52. Three.js案例-创建实心和空心立方体
实现效果
在本案例中,我们使用Three.js创建了一个包含实心和空心立方体的3D场景。具体效果为:一个实心立方体位于左侧,而一个带有绿色边框的空心立方体位于右侧。整个场景采用了环境光照明,背景颜色设置为白色。
知识点
WebGLRenderer 渲染器
THREE.WebGLRenderer
用于创建WebGL渲染器对象,它负责将3D场景绘制到浏览器画布上。
构造器
new THREE.WebGLRenderer(parameters)
参数 | 类型 | 描述 |
---|---|---|
parameters | Object | 包含渲染器属性的对象。 |
常用参数:
antialias
: 布尔值,默认为false。如果设置为true,则启用抗锯齿功能。alpha
: 布尔值,默认为false。如果设置为true,则允许透明背景。
方法
setSize(width, height)
: 设置渲染器输出的宽度和高度。setClearColor(color, alpha)
: 设置渲染器清除颜色(即背景色)及透明度。
PerspectiveCamera 透视相机
THREE.PerspectiveCamera
用于创建透视投影相机,模拟人眼观察世界的方式。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数 | 类型 | 描述 |
---|---|---|
fov | Number | 视野角度,以度为单位。 |
aspect | Number | 宽高比,通常为canvas宽除以高。 |
near | Number | 近裁剪面距离。 |
far | Number | 远裁剪面距离。 |
方法
position.set(x, y, z)
: 设置相机位置坐标。lookAt(vector)
: 让相机看向指定位置。
Scene 场景
THREE.Scene
用于创建场景对象,作为所有物体、光源等元素的容器。
方法
add(object)
: 向场景添加对象,如几何体、光源等。
AmbientLight 环境光
THREE.AmbientLight
用于创建环境光源,对场景中的所有物体均匀照亮。
构造器
new THREE.AmbientLight(color, intensity)
参数 | 类型 | 描述 |
---|---|---|
color | Color/Hex/String | 光源颜色。 |
intensity | Number | 强度,默认值为1.0。 |
BoxGeometry 立方体几何体
THREE.BoxGeometry
用于创建立方体或长方体几何体。
构造器
new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
参数 | 类型 | 描述 |
---|---|---|
width | Number | 宽度。 |
height | Number | 高度。 |
depth | Number | 深度。 |
widthSegments | Number | 宽方向分段数,默认为1。 |
heightSegments | Number | 高方向分段数,默认为1。 |
depthSegments | Number | 深方向分段数,默认为1。 |
MeshNormalMaterial 材质
THREE.MeshNormalMaterial
用于创建基于法线的材质,显示物体表面法线方向的颜色。
属性
color
: 材料颜色,默认为灰色。wireframe
: 是否以线框模式渲染,默认为false。
EdgesHelper 边缘辅助线
THREE.EdgesHelper
用于创建边缘线,可以直观地展示物体的轮廓。
构造器
new THREE.EdgesHelper(object, hex)
参数 | 类型 | 描述 |
---|---|---|
object | Object3D | 要添加边缘线的对象。 |
hex | Hex | 边缘线颜色,默认为黑色。 |
render() 渲染方法
myRenderer.render(myScene, myCamera)
用于执行一次渲染操作,将场景通过相机视角绘制到屏幕上。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
// 创建渲染器
var myRenderer = new THREE.WebGLRenderer({antialias: true});
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$("#myContainer").append(myRenderer.domElement);
// 创建相机
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 30, 1000);
myCamera.position.set(-34.34, -40.56, 35.83);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
// 创建场景
var myScene = new THREE.Scene();
myScene.add(new THREE.AmbientLight('white'));
// 创建实心立方体
var myGeometry1 = new THREE.BoxGeometry(6, 6, 6);
var myMaterial1 = new THREE.MeshNormalMaterial();
var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
myMesh1.translateX(-20);
myScene.add(myMesh1);
// 创建空心立方体
var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial2 = new THREE.MeshNormalMaterial();
var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
// 添加边框线
var myBorder = new THREE.EdgesHelper(myMesh2, 'darkgreen');
myMesh2.translateX(10);
myBorder.translateX(10);
myScene.add(myBorder);
// 渲染立方体
myRenderer.render(myScene, myCamera);
</script>
</body>
</html>