Three.js 核心属性

1.场景 (Scene) 相关属性

1.1 基础属性

• background: 场景背景颜色或纹理

scene.background = new THREE.Color(0x87CEEB); // 设置天空蓝背景
scene.background = new THREE.TextureLoader().load('sky.jpg'); // 使用纹理作为背景

• fog: 场景雾效

// 线性雾
scene.fog = new THREE.Fog(0xffffff, 10, 100);
// 指数雾
scene.fog = new THREE.FogExp2(0xffffff, 0.01);

• children: 场景中所有对象的数组

console.log(scene.children); // 查看场景中的所有对象

2.相机 (Camera) 相关属性

2.1 透视相机 (PerspectiveCamera)

• fov: 视野角度 (单位：度)

camera.fov = 60; // 默认75，值越小看到的范围越窄

• aspect: 宽高比

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); // 修改后必须调用

• near/far: 近截面/远截面距离

camera.near = 0.1; // 小于此距离的对象不渲染
camera.far = 1000; // 大于此距离的对象不渲染

• position: 相机位置

camera.position.set(0, 5, 10); // (x, y, z)

2.2 正交相机 (OrthographicCamera)

• left/right/top/bottom: 视口边界

const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2,  // right
  height / 2, // top
  height / -2 // bottom
);

3.渲染器 (Renderer) 相关属性

• shadowMap: 阴影相关设置

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 柔和阴影

• pixelRatio: 像素比

renderer.setPixelRatio(window.devicePixelRatio); // 适配高清屏幕

• outputEncoding: 输出编码

renderer.outputEncoding = THREE.sRGBEncoding; // 更真实的颜色渲染

• toneMapping: 色调映射

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;

4.几何体 (Geometry) 通用属性

4.1 BufferGeometry 核心属性

• attributes: 包含所有几何属性

geometry.attributes.position // 顶点位置
geometry.attributes.normal   // 法线向量
geometry.attributes.uv        // 纹理坐标

• boundingBox/boundingSphere: 边界框/边界球

geometry.computeBoundingBox();
console.log(geometry.boundingBox);

4.2 常用几何体参数

• BoxGeometry: 立方体

new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

• SphereGeometry: 球体

new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);

• CylinderGeometry: 圆柱体

new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded);

5.材质 (Material) 通用属性

5.1 基础材质属性

• color: 材质颜色

material.color = new THREE.Color(0xff0000); // 红色

• wireframe: 线框模式

material.wireframe = true; // 显示为线框

• transparent/opacity: 透明度

material.transparent = true;
material.opacity = 0.5; // 50%透明

• side: 渲染面

material.side = THREE.FrontSide; // 默认只渲染正面
material.side = THREE.BackSide;  // 只渲染背面
material.side = THREE.DoubleSide; // 双面渲染

5.2 光照相关属性

• emissive/emissiveIntensity: 自发光

material.emissive = new THREE.Color(0x00ff00);
material.emissiveIntensity = 0.5;

• roughness/metalness: PBR材质参数

material.roughness = 0.5; // 0-1，表面粗糙度
material.metalness = 0.5; // 0-1，金属质感

5.3 纹理映射属性

• map: 基础颜色纹理

material.map = new THREE.TextureLoader().load('texture.jpg');

• normalMap: 法线贴图

material.normalMap = new THREE.TextureLoader().load('normal.jpg');
material.normalScale = new THREE.Vector2(1, 1); // 法线强度

• roughnessMap/metalnessMap: PBR纹理

material.roughnessMap = new THREE.TextureLoader().load('roughness.jpg');
material.metalnessMap = new THREE.TextureLoader().load('metalness.jpg');

6.灯光 (Light) 通用属性

6.1 所有灯光共有属性

• color: 灯光颜色

light.color = new THREE.Color(0xffffff);

• intensity: 灯光强度

light.intensity = 1.0; // 默认值

6.2 特定灯光属性

• DirectionalLight:

light.shadow.camera.near = 0.5; // 阴影近截面
light.shadow.camera.far = 500;  // 阴影远截面
light.shadow.mapSize.width = 1024; // 阴影贴图分辨率

• PointLight:

light.distance = 100; // 光照距离
light.decay = 1;      // 衰减系数

• SpotLight:

light.angle = Math.PI / 4; // 光照角度
light.penumbra = 0.5;      // 半影衰减

7.网格 (Mesh) 相关属性

• position/rotation/scale: 变换属性

mesh.position.set(0, 1, 0);
mesh.rotation.set(Math.PI/2, 0, 0);
mesh.scale.set(2, 1, 1); // x轴放大2倍

• castShadow/receiveShadow: 阴影设置

mesh.castShadow = true;    // 投射阴影
mesh.receiveShadow = true; // 接收阴影

• userData: 自定义数据

mesh.userData = { id: 1, name: 'player' };

8.动画相关属性

• Clock: 计时器

const clock = new THREE.Clock();
function animate() {
  const delta = clock.getDelta(); // 获取时间差
  const elapsed = clock.getElapsedTime(); // 获取总时间
  // 动画逻辑...
}

• AnimationMixer: 动画混合器

const mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

9.性能优化属性

• frustumCulled: 视锥剔除

mesh.frustumCulled = true; // 默认true，在视锥外的对象不渲染

• renderOrder: 渲染顺序

transparentMesh.renderOrder = 1; // 后渲染透明对象

• dispose() : 释放资源

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

10.高级渲染属性

• depthTest/depthWrite: 深度测试

material.depthTest = true;  // 默认true，启用深度测试
material.depthWrite = true; // 默认true，写入深度缓冲

• blending: 混合模式

material.blending = THREE.NormalBlending; // 默认混合模式
material.blending = THREE.AdditiveBlending; // 加法混合

• alphaTest: 透明度测试

material.alphaTest = 0.5; // 丢弃alpha值小于0.5的片段