Three.js 3D

快速开始

import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({color: 0x44aa88})
));
scene.add(new THREE.DirectionalLight(0xffffff, 3));
scene.add(new THREE.AmbientLight(0x404040, 0.5));
camera.position.z = 5;
function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();

导入

npm install three

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

关键模式

Object3D（所有对象均继承自该类）

obj.position.set(x,y,z); obj.rotation.set(x,y,z); obj.scale.set(x,y,z); // 欧拉角，单位为弧度
obj.quaternion.set(x,y,z,w);       // 无万向节锁问题
obj.lookAt(target);                // -Z 轴朝向 target，+Y 轴为上方向
parent.add(child); parent.remove(child); parent.attach(child); // 重设父级，不改变视觉位置
obj.getWorldPosition(v); obj.localToWorld(v); obj.worldToLocal(v);

颜色

new THREE.Color(0xff0000); new THREE.Color('#ff0000'); new THREE.Color(1,0,0);
color.setHSL(hue, saturation, lightness); // 取值范围：0–1

释放资源（务必执行！）

geometry.dispose(); material.dispose(); texture.dispose(); renderTarget.dispose();

参考文档

请根据当前任务查阅对应文件——每份文档均简洁明了、聚焦特定领域：