threejs得WebGLRenderer+CSS3DRenderer结合使用

文章目录

概要

在使用threejs显示label发现，人家自带了CSS3DRenderer/CSS2DRenderer.

1：CSS3DRenderer+WebGLRenderer出现鬼畜bug

第一种：在二个render添加control得时候如果WebGLRenderer在最上层会出现遮盖CSS3DRenderer。
第二种：如果CSS3DRenderer在最上层会触发二个control抖动情况。
1
2

2：解决思路

二个render使用同一个camera，使用二个control（必须二个control.update()—都要跑起来）。

3：代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .web-gl {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>

    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.155/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.155/examples/jsm/"
            }
        }
    </script>
</head>

<body>
    <div class="web-gl"></div>
    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
        import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';

        const scene = new THREE.Scene();
        scene.background = null
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer({
            alpha: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.domElement.style.position = 'absolute'
        renderer.domElement.style.top = '0'

        document.querySelector('.web-gl').appendChild(renderer.domElement);

        const css3Renderer = new CSS3DRenderer();
        css3Renderer.setSize(window.innerWidth, window.innerHeight);
        css3Renderer.domElement.style.position = 'absolute'
        css3Renderer.domElement.style.top = '0'

        document.querySelector('.web-gl').appendChild(css3Renderer.domElement);

        const testDiv = document.createElement('div')
        testDiv.innerHTML = 'hsadasd'
        testDiv.style.background = 'red'

        const css3Object = new CSS3DSprite(testDiv)
        css3Object.scale.set(0.5, 0.5, 0.5)
        scene.add(css3Object)

        const light = new THREE.AmbientLight(0xffffff, 1); // soft white light
        scene.add(light);

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        cube.rotation.x = Math.PI / 4
        cube.rotation.y = Math.PI / 4
        cube.scale.set(10, 10, 10)
        scene.add(cube);

        camera.position.z = 20;

        const controls = new OrbitControls(camera, renderer.domElement);
        const controls2 = new OrbitControls(camera, css3Renderer.domElement);

        function animate() {
            requestAnimationFrame(animate);

            renderer.render(scene, camera);
            css3Renderer.render(scene, camera)

            controls.update();
            controls2.update()
        };

        animate();
    </script>
</body>

</html>
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

小结

提示：这里可以添加总结

例如：

提供先进的推理，复杂的指令，更多的创造力。

相关阅读:
今天是七夕，来看看程序员的土味情话。
基本的SELECT语句
第六章——Python数据容器
齐岳[C7MIm]PF6离子液体1-庚基-3-甲基咪唑六氟磷酸盐
代码随想录二刷day45
关于QUERY_ALL_PACKAGES权限导致Google下架apk
Aethir推出其首次去中心化AI节点售卖
JAXB实现JavaBean与XML相互转换（详尽）
AE调试(人脸场景)
单源最短路的综合应用

原文地址：https://blog.csdn.net/mmiaoChong/article/details/132668155