文章目录
- 概要
- 1：CSS3DRenderer+WebGLRenderer出现鬼畜bug
- 2：解决思路
- 3：代码示例
- 小结
概要
在使用threejs显示label发现，人家自带了CSS3DRenderer/CSS2DRenderer.
1：CSS3DRenderer+WebGLRenderer出现鬼畜bug
第一种：在二个render添加control得时候如果WebGLRenderer在最上层会出现遮盖CSS3DRenderer。 第二种：如果CSS3DRenderer在最上层会触发二个control抖动情况。
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>
小结
提示：这里可以添加总结
例如：
提供先进的推理，复杂的指令，更多的创造力。
