ThreeJS创建一个3D物体的基本流程

1.创建场景：创建一个THREE.Scene实例，它将作为所有3D对象的容器。

// 创建场景
const scene = new THREE.Scene();

2.创建相机：创建一个相机对象，通常是THREE.PerspectiveCamera，用于定义观察场景的视角和位置。

//创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
)

3.设置相机位置 ：通过camera.position.set()设置相机坐标

// 设置相机位置
camera.position.set(0, 0, 5);

4.创建渲染器：创建一个THREE.WebGLRenderer实例来渲染场景。

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

5.设置渲染器尺寸：使用renderer.setSize(width, height)根据需要设置渲染器的宽度和高度。

renderer.setSize(window.innerWidth, window.innerHeight);

6.添加渲染器的DOM元素到页面：使用document.body.appendChild(renderer.domElement)将渲染器的DOM元素添加到HTML页面中。

document.body.appendChild(renderer.domElement);

7.创建几何体：使用THREE.Geometry类或其子类来创建物体的几何形状。

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

8.创建材质：创建一个THREE.Material实例来定义物体的外观，包括颜色、纹理等。

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

9.创建网格：将几何体和材质结合起来创建一个实例，这是一个实际的3D物体。

// 创建网格
const cube = new THREE.Mesh(geometry, material);

10.添加物体到场景：使用scene.add(cube)将创建的网格添加到场景中。

// 将网格添加到场景中
scene.add(cube);

11.渲染场景：使用renderer.render(scene, camera)来渲染场景和相机。

// 渲染到页面上
renderer.render(scene, camera);

12.添加动画（可选）：如果需要，可以通过修改物体的位置、旋转或缩放属性，并在每次动画帧中重新渲染来创建动画效果。

// 渲染函数
function animate() {
  requestAnimationFrame(animate);
  // 旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染到页面上
  renderer.render(scene, camera);
}
animate();