Three 起步

创建一个场景 + 相机 + 渲染器

import * as THREE from "three";

const scene = new THREE.Scene();

// 创建一个透视相机  第一个参数是视野范围  第二个参数是宽高比  第三个参数是近裁剪面  第四个参数是远裁剪面
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

添加一个物体

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

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

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

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

渲染场景

renderer.render(scene, camera);

控制器

添加轨道控制器

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  // 更新轨道控制器
  controls.update();
  renderer.render(scene, camera);
}

辅助坐标系

添加辅助坐标系 (出现x轴(红色)、y轴(绿色)、z轴(蓝色))

// 添加辅助坐标系
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);