文章目录
- 概要
- 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>
小结
提示：这里可以添加总结
例如：
提供先进的推理，复杂的指令，更多的创造力。
