threejs得WebGLRenderer+CSS3DRenderer结合使用

在Three.js中，WebGLRenderer用于渲染3D场景，而CSS3DRenderer用于渲染使用CSS样式的3D元素。你可以将它们结合使用，以便利用两者各自的优势。以下是一个简单的例子，展示如何同时使用WebGLRenderer和CSS3DRenderer：

import * as THREE from 'three';
 
// 创建3D场景
const scene = new THREE.Scene();
 
// 创建WebGL渲染器
const webglRenderer = new THREE.WebGLRenderer({ antialias: true });
webglRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(webglRenderer.domElement);
 
// 创建CSS 3D渲染器
const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild(cssRenderer.domElement);
 
// 创建一个3D物体
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
 
// 创建一个CSS 3D元素
const cssElement = document.createElement('div');
cssElement.style.width = '100px';
cssElement.style.height = '100px';
cssElement.style.background = 'red';
const cssObject = new THREE.CSS3DObject(cssElement);
scene.add(cssObject);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 更新物体和渲染
  webglRenderer.render(scene, camera);
  cssRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们创建了一个3D立方体使用WebGLRenderer渲染，并创建了一个使用CSS样式的3D元素使用CSS3DRenderer渲染。两者渲染的结果会叠加在一起。你可以根据需要将它们放置在不同的层级或调整样式以实现所需的效果。