一、几何体(Geometry)
在 Three.js 中,几何体定义了物体的形状。我们先来创建一些基本的几何体。
(一)立方体(BoxGeometry)
立方体是最常见的几何体之一。通过以下代码可以创建一个立方体:
// 创建一个立方体几何体,参数分别为长、宽、高
const geometry = new THREE.BoxGeometry(1, 1, 1);
这里的三个参数分别代表立方体在 x、y、z 轴方向上的尺寸。1 表示每个方向的长度为 1 个单位。
(二)球体(SphereGeometry)
球体的创建也很简单:
// 创建一个球体几何体,第一个参数为半径,第二个参数为水平分段数,第三个参数为垂直分段数
const geometry = new THREE.SphereGeometry(0.5, 32, 16);
第一个参数0.5是球体的半径。水平分段数(32)和垂直分段数(16)决定了球体表面的细分程度,数值越高,球体越光滑,但计算量也会增加。
(三)圆柱体(CylinderGeometry)
创建圆柱体需要指定底面半径、顶面半径、高度以及分段数等参数:
// 创建一个圆柱体几何体,参数依次为底面半径、顶面半径、高度、径向分段数、高的分段数、开口与否
const geometry = new THREE.CylinderGeometry(0.3, 0.3, 1, 32, 1, false);
这里底面半径和顶面半径都为0.3,表示是一个上下粗细一致的圆柱体,高度为1。径向分段数(32)控制圆周方向的细分程度,高的分段数(1)表示沿高度方向的分段数,false表示圆柱体是封闭的。
二、材质(Material)
材质决定了几何体表面的外观。Three.js 提供了多种材质类型,每种材质都有不同的特性。
(一)基础材质(MeshBasicMaterial)
MeshBasicMaterial 是一种简单的材质,它不受光照影响,始终显示为设置的颜色。
// 创建一个基础材质,设置颜色为红色
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
这种材质适合用于不需要光照效果的简单场景,或者用于调试。
(二)兰伯特材质(MeshLambertMaterial)
MeshLambertMaterial 是一种漫反射材质,它会根据光照情况显示不同的亮度,使物体看起来更有立体感。
// 创建一个兰伯特材质,设置颜色为绿色
const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
在有光照的场景中,使用这种材质的物体表面会根据光线的入射角呈现出不同的明暗效果。
(三)高光材质(MeshPhongMaterial)
MeshPhongMaterial 除了有漫反射效果外,还能模拟高光反射,让物体表面看起来更加光滑。
// 创建一个高光材质,设置颜色为蓝色,高光颜色为白色,光泽度为30
const material = new THREE.MeshPhongMaterial({
color: 0x0000ff,
specular: 0xffffff,
shininess: 30
});
specular属性设置高光的颜色,shininess属性控制光泽度,数值越大,高光越明显,物体看起来越光滑。
三、光源(Light)
光源为场景添加照明,使物体能够显示出不同的亮度和阴影。
(一)环境光(AmbientLight)
环境光均匀地照亮整个场景,它没有特定的方向。
// 创建一个环境光,设置颜色为灰色
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
环境光可以为场景提供一个基础的照明,让物体在没有其他光源的情况下也能可见,但它不会产生明显的阴影效果。
(二)点光源(PointLight)
点光源从一个点向各个方向发射光线,就像灯泡一样。
// 创建一个点光源,设置颜色为白色,强度为1
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);
position属性用于设置点光源的位置,这里将点光源放置在 (2, 2, 2) 的位置。强度(1)控制光线的明亮程度。
(三)平行光(DirectionalLight)
平行光从一个方向发射平行光线,类似于太阳光。
// 创建一个平行光,设置颜色为白色,强度为1
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-1, -1, 1).normalize();
scene.add(directionalLight);
normalize()方法用于将方向向量归一化,确保光线以正确的方向传播。通过设置position属性可以调整平行光的方向。
四、相机(Camera)
相机决定了我们观察 3D 场景的视角。
(一)透视相机(PerspectiveCamera)
透视相机模拟人眼的视角,物体近大远小。
// 创建一个透视相机,第一个参数为视野角度,第二个参数为宽高比,第三和第四个参数为近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
视野角度(75)决定了相机能够看到的角度范围。宽高比根据窗口的宽度和高度动态计算,以确保场景在不同尺寸的屏幕上都能正确显示。近裁剪面(0.1)和远裁剪面(1000)定义了相机能够看到的距离范围,在这个范围之外的物体将不会被渲染。
(二)正交相机(OrthographicCamera)
正交相机的投影方式是平行投影,物体无论远近大小都相同。
// 创建一个正交相机,参数依次为左、右、上、下、近裁剪面、远裁剪面
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
这种相机常用于 2D 场景或者需要保持物体尺寸一致的场景,比如制作建筑图纸等。
通过今天对几何体、材质、光源和相机的学习,我们可以创建出一个包含多种元素的 3D 场景,并且能够通过调整这些元素的参数来实现不同的效果。接下来,可以尝试组合这些知识,创建一个自己的简单 3D 场景,比如一个包含不同形状、颜色和光照效果的小世界。