threejs得WebGLRenderer+CSS3DRenderer结合使用

文章目录

概要

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

1：CSS3DRenderer+WebGLRenderer出现鬼畜bug

复制代码

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

2：解决思路

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

3：代码示例

c 复制代码

<!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>

小结

提示：这里可以添加总结

例如：

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