threejs得WebGLRenderer+CSS3DRenderer结合使用

文章目录

- 概要
- 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 = nullconst 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 lightscene.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 / 4cube.rotation.y = Math.PI / 4cube.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>