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

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>

演示链接

示例链接

相关推荐
Jedi Hongbin2 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
接着奏乐接着舞。2 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
刘皇叔code3 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
世伟爱吗喽4 天前
threejs入门学习日记
前端·javascript·three.js
拜无忧6 天前
three.js纸飞机飞行撞建筑
前端·three.js
拜无忧6 天前
three/文字爆裂效果
three.js
前端人类学7 天前
构筑数字夜空:Three.js 建筑群灯光特效全解析
javascript·three.js
柳杉9 天前
使用three.js搭建3d隧道监测-3
前端·javascript·three.js
三维搬砖者10 天前
06Threejs电影拍摄角度-第三章:搭建场景 - 初始化环境
three.js
sixgod_h10 天前
Threejs源码系列- renderer/webgl
three.js