CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例

import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
import { OrthographicCamera } from 'three';
 
// 创建CSS3DRenderer实例
const cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0';
document.body.appendChild(cssRenderer.domElement);
 
// 创建正交摄像机
const camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 1, 1000);
camera.position.set(0, 0, 500);
 
// 创建3D对象并添加到场景中
const scene = new THREE.Scene();
const box = new CSS3DObject(document.createElement('div'));
box.element.style.width = '100px';
box.element.style.height = '100px';
box.element.style.background = 'red';
box.position.set(0, 0, 0);
scene.add(box);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

这段代码创建了一个CSS3DRenderer实例，并设置了正交摄像机，然后创建了一个CSS3DObject作为3D场景中的一个元素，并添加了一个<div>元素作为3D对象的外壳。最后，在一个循环中使用CSS3DRenderer来渲染场景。这个案例展示了如何将CSS元素与Three.js的3D场景相结合，为Web开发者提供了一个创建3D网页的新思路。