43. Three.js案例-绘制100个立方体

实现效果

知识点

WebGLRenderer（WebGL渲染器）

WebGLRenderer是Three.js中最常用的渲染器之一，用于将3D场景渲染到网页上。

构造器

WebGLRenderer(parameters : Object)

参数	类型	描述
parameters	Object	渲染器参数对象

常用参数：

antialias：是否开启抗锯齿，默认为false。
alpha：是否透明，默认为false。
premultipliedAlpha：是否使用预乘Alpha值，默认为true。
preserveDrawingBuffer：是否保存绘图缓冲区，默认为false。
stencil：是否使用模板缓冲区，默认为true。
depth：是否使用深度缓冲区，默认为true。
logarithmicDepthBuffer：是否使用对数深度缓冲区，默认为false。
failIfMajorPerformanceCaveat：如果性能较差则失败，默认为false。
powerPreference：GPU性能偏好，默认为"default"。

方法

setSize(width, height, updateStyle)：设置渲染器输出的分辨率（以像素为单位）。
setClearColor(color, alpha)：设置清除颜色和透明度。

PerspectiveCamera（透视相机）

PerspectiveCamera是Three.js中的一种相机类型，模拟人眼透视效果。

构造器

PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度（以度为单位）
aspect	Number	宽高比
near	Number	近裁剪面
far	Number	远裁剪面

属性

position：相机的位置。
rotation：相机的旋转角度。
lookAt(vector)：使相机看向指定位置。

Scene（场景）

Scene是Three.js中的一个容器，用于容纳所有要渲染的对象、灯光等。

构造器

new Scene()

BoxGeometry（立方体几何体）

BoxGeometry用于创建立方体或长方体。

构造器

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

参数	类型	描述
width	Number	宽度
height	Number	高度
depth	Number	深度
widthSegments	Number	宽度分段数
heightSegments	Number	高度分段数
depthSegments	Number	深度分段数

MeshDepthMaterial（深度材质）

MeshDepthMaterial是一种材质，它根据物体与相机的距离来着色。

构造器

MeshDepthMaterial(parameters)

参数	类型	描述
parameters	Object	材质参数对象

常用参数：

wireframe：是否使用线框模式，默认为false。
wireframeLinewidth：线框宽度，默认为1。

Mesh（网格）

Mesh是Three.js中表示几何体和材质组合的对象。

构造器

Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	几何体
material	Material	材质

Group（组）

Group是一个可以包含其他对象的空对象，类似于场景中的文件夹。

构造器

new Group()

代码

html 复制代码

<!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 type="text/javascript">
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('black', 1.0);
    $('#myContainer')[0].appendChild(myRenderer.domElement);

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45,
        window.innerWidth / window.innerHeight, 30, 1000);
    myCamera.position.set(-40.91020281125894,
        12.522960007309857, 22.79661391601931);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建场景
    var myScene = new THREE.Scene();

    // 创建100个立方体
    var mySize = 9;
    var myGeometry = new THREE.BoxGeometry(mySize, mySize, mySize);
    var myMaterial = new THREE.MeshDepthMaterial();
    var myGroupMesh = new THREE.Group();
    for (var x = 0; x < 100; x++) {
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myMesh.position.set(x * mySize * 2 - mySize, 0, 0);
        myGroupMesh.add(myMesh);
    }
    myScene.add(myGroupMesh);

    // 渲染100个立方体
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接