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>

演示链接

示例链接

相关推荐
Mintopia8 小时前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js
Mintopia1 天前
Three.js 中的噪声与图形变换:一场数字世界的舞蹈
前端·javascript·three.js
中国黄金Gold2 天前
Three.js OrbitControls:实现鼠标左键直接平移场景
three.js
三年三月2 天前
021-顶点法线与反射原理
javascript·three.js
Mintopia2 天前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Mintopia3 天前
Three.js 中的 Color 对象:玩转色彩的魔法方块
前端·javascript·three.js
答案—answer4 天前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
Coffeeee4 天前
Threejs粒子动效之龙卷风
前端·three.js·动效
Mintopia4 天前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
答案answer4 天前
three.js 实现几个炫酷的粒子特效(火焰,烟雾,烟花)
前端·three.js