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>

演示链接

示例链接

相关推荐
魂断蓝桥66613 小时前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
Mintopia21 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Mintopia2 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
良辰未晚3 天前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
Mintopia3 天前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
Mintopia3 天前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
阿怼丶13 天前
🔥Three.js轮廓线高亮神器来啦!自定义高亮选中效果只需一个类搞定!
前端·three.js
小桥风满袖13 天前
Three.js-硬要自学系列36之专项学习包围盒
前端·css·three.js
Mintopia13 天前
Three.js 模块化开发:代码界的乐高搭建指南
前端·javascript·three.js
刘皇叔code14 天前
Three.js中LightProbe的应用
three.js