THREE--demo12（CSS 3D）_css 3d 框架

效果

源码

import { useEffect, useRef } from 'react'
import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'

const Demo12 = () => {
    let scene, camera, renderer, orbitControls, axes

    useEffect(() => {
        init()
    }, [])

    const ThreeContainer = useRef()

    // 场景，作为容器，保存并跟踪所有渲染的物体
    const initScene = () => {
        scene = new T.Scene()
    }

    // 相机
    const initCamera = () => {
        // 透视相机，参数：视场，长宽比，近面，远面
        camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 150
        camera.lookAt(scene.position)
    }

    // 渲染器，计算指定相机角度下，浏览器中scene的样子
    const initRenderer = () => {
        // css 3d 渲染器
        renderer = new CSS3DRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        // 将render的输出挂载到HTML页面框架中的元素上
        ThreeContainer.current.append(renderer.domElement)
    }

    // 坐标轴
    const initAxes = () => {
        axes = new T.AxesHelper(20)
        scene.add(axes)
    }

    // 坐标格
    const initGridHelper = () => {
        // 参数：坐标格尺寸，坐标格细分次数，中线颜色，坐标格网格线颜色.
        const gridHelper = new T.GridHelper(100, 10, 0xff0000, 0x00ffff)
        scene.add(gridHelper)
    }

    // 轨道控制器
    const initOrbitControls = () => {
        orbitControls = new OrbitControls(camera, renderer.domElement)
    }

    // 创建iframe
    const createCssObject = () => {
        const iframe = document.createElement('iframe')
        iframe.src = 'https://blog.csdn.net/weixin_43794073?type=blog'
        iframe.style.width = '1920px'
        iframe.style.height = '1080px'
        iframe.style.background = '#f00'
        iframe.style.border = '10px solid #1890ff'
        iframe.style.boxShadow = '0 0 20px #ff0000'

        // CSS3DObject 将dom元素转换为3d元素
        const cssObj = new CSS3DObject(iframe)
        cssObj.position.set(0, 0, 0)
        cssObj.scale.set(0.1, 0.1, 0.1)

        scene.add(cssObj)
    }

    // 渲染场景
    const renderScene = () => {
        requestAnimationFrame(renderScene)
        renderer.render(scene, camera)
    }

    const resize = () => {
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }, false)
    }

    // 初始化
    const init = () => {
        initScene()
        initCamera()
        initRenderer()
        initOrbitControls()
        initAxes()
        initGridHelper()
        createCssObject()
        renderScene()
        resize()
    }

    return (
        <div ref={ThreeContainer} />
    )
}

export default Demo12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106