要使用Three.js搭建web 3D场景，可以按照以下步骤：
-
准备环境：
- 创建一个HTML文件，用于承载你的3D场景。
- 在HTML文件中引入Three.js库，可以通过下载官方库或使用CDN链接。
-
创建场景：
- 在JavaScript中，创建一个场景对象，用于容纳所有的3D元素。
-
创建相机：
- 创建一个透视相机或正交相机，用于观察场景中的物体。
-
创建渲染器：
- 创建一个渲染器对象，将场景和相机渲染到HTML页面上。
-
添加3D对象：
- 创建和添加3D模型、几何体、灯光等到场景中。
-
设置交互（可选）：
- 添加交互功能，如鼠标控制、键盘控制等，以改变或操作3D场景。
-
渲染场景：
- 在循环中渲染场景，通常使用
requestAnimationFrame函数来实现。
- 在循环中渲染场景，通常使用
以下是一个简单的示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Web 3D Scene</title></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 创建场景var scene = new THREE.Scene();// 创建透视相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 创建渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建一个立方体var geometry = new THREE.BoxGeometry();var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });var cube = new THREE.Mesh(geometry, material);scene.add(cube);// 渲染场景var animate = function () {requestAnimationFrame(animate);// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);};animate();</script></body>
</html>这是一个基本的Three.js 3D场景的示例。你可以根据自己的需求添加更多的3D元素、纹理、光照和交互功能。
