2023-05-25

threejs引入CSS3Dobject   CSS3DSprite     CSS2Dobject模型后,显示不出来的问题 

---

关键点.就是渲染器的选择..常规渲染器(WebGLRenderer),是用于渲染3D模型的.而CSS3Dobject渲染器是CSS3DRenderer.  就是在添加渲染器时需要添加2中渲染器.有了渲染器后.需要添加控制器..这里的控制器,需要CSS3Dobject的控制器.而不是WebGLRenderer的控制器.有了这2步注意项后.就可以实现场景scene 中添加CSS3DRenderer模型后才会显示出来

直接上代码:

            var scene = new THREE.Scene();
            var group = new THREE.Group()
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({
                color: 0x00ff00
            });
            var cube = new THREE.Mesh(geometry, material);
            var cube2 = new THREE.Mesh(geometry, material);
            var cube3 = new THREE.Mesh(geometry, material);
            cube2.position.set(2, 0, 0)
            cube3.position.set(-2, 0, 0)
            scene.add(cube);
            scene.add(cube2);
            scene.add(cube3);

            camera.position.z = 5;

            var labelRenderer = new CSS3DRenderer();
            labelRenderer.setSize(window.innerWidth, window.innerHeight);
            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '0px';
            document.body.appendChild(labelRenderer.domElement);

            var controls1 = new OrbitControls(camera, labelRenderer.domElement)//有了他,就不用renderer 控制器了

            let div = document.createElement("div");
            div.textContent = "CSS3DSprite";
            div.style.color = '#111fff'
            var labelObject = new CSS3DSprite(div);
            labelObject.position.set(0, 1, 0);
            labelObject.scale.set(0.01, 0.01, 0.01);
            cube.add(labelObject);

            var animate = function() {
                requestAnimationFrame(animate);
                labelRenderer.render(scene, camera);
                renderer.render(scene, camera);

            };

            animate();