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>

演示链接

示例链接

相关推荐
小桥风满袖7 小时前
Three.js-硬要自学系列29之专项学习透明贴图
前端·css·three.js
Danta7 小时前
从 0 开始学习 Three.js(2)😁
前端·javascript·three.js
Mintopia8 小时前
Three.js 力导向图:让数据跳起优雅的华尔兹
前端·javascript·three.js
Mintopia1 天前
Three.js 物理引擎:给你的 3D 世界装上 “牛顿之魂”
前端·javascript·three.js
Danta1 天前
从0开始学习three.js(1)😁
前端·javascript·three.js
Mintopia2 天前
Three.js 粒子系统:让代码化身奇幻造梦师
前端·javascript·three.js
Mintopia3 天前
Three.js 形变动画(Morph Target Animation):让 3D 模型跳起变形之舞
前端·javascript·three.js
深流层4 天前
Three.js 中实现带宽度的线
前端·three.js
qq_589568104 天前
threejsPBR材质与纹理贴图
three.js·材质·贴图
Mintopia5 天前
Three.js WebGPU 支持:利用 WebGPU 提升渲染性能
前端·javascript·three.js