17. Threejs案例-Three.js创建多个立方体

17. Threejs案例-Three.js创建多个立方体

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的核心类。它负责将场景中的对象渲染到画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数 类型 描述
parameters Object 可选参数对象,用于配置渲染器。常用参数包括:antialias(抗锯齿)、alpha(透明背景)等。
方法
  • setSize(width, height): 设置渲染器输出的尺寸。
  • setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
Scene (场景)

Scene 是 Three.js 中用于存储和管理所有可见对象的容器。

构造器

new THREE.Scene()

方法
  • add(object): 向场景中添加对象。
  • remove(object): 从场景中移除对象。
PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于模拟人眼视角的相机类。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数 类型 描述
fov Number 视野角度,单位为度。
aspect Number 相机的宽高比。
near Number 近裁剪面距离。
far Number 远裁剪面距离。
方法
  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向目标点。
BoxGeometry (立方体几何体)

BoxGeometry 是 Three.js 中用于创建立方体几何体的类。

构造器

new THREE.BoxGeometry(width, height, depth)

参数 类型 描述
width Number 立方体的宽度。
height Number 立方体的高度。
depth Number 立方体的深度。
方法
  • translateX(amount): 沿 X 轴移动几何体。
  • translateY(amount): 沿 Y 轴移动几何体。
  • translateZ(amount): 沿 Z 轴移动几何体。
MeshNormalMaterial (网格法线材质)

MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。

构造器

new THREE.MeshNormalMaterial(parameters)

参数 类型 描述
parameters Object 可选参数对象,用于配置材质。
方法
  • color.set(color): 设置材质的颜色。
Mesh (网格对象)

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

构造器

new THREE.Mesh(geometry, material)

参数 类型 描述
geometry Geometry 几何体对象。
material Material 材质对象。
方法
  • translateX(amount): 沿 X 轴移动网格对象。
  • translateY(amount): 沿 Y 轴移动网格对象。
  • translateZ(amount): 沿 Z 轴移动网格对象。

代码

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>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $("#myContainer").append(myRenderer.domElement);

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

    // 创建透视相机
    var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    myCamera.position.set(40.06, 20.92, 42.68);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建第一个立方体
    var myGeometry1 = new THREE.BoxGeometry(16, 16, 16);
    var myMaterial1 = new THREE.MeshNormalMaterial();
    var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
    myMesh1.translateX(-40);
    myScene.add(myMesh1);

    // 创建第二个立方体
    var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
    var myMaterial2 = new THREE.MeshNormalMaterial();
    var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
    myMesh2.translateX(-10);
    myScene.add(myMesh2);

    // 创建第三个立方体
    var myGeometry3 = new THREE.BoxGeometry(16, 16, 16);
    var myMaterial3 = new THREE.MeshNormalMaterial();
    var myMesh3 = new THREE.Mesh(myGeometry3, myMaterial3);
    myMesh3.translateX(20);
    myScene.add(myMesh3);

    // 渲染三个相同大小的立方体图形
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

相关推荐
山海鲸可视化1 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染
Mintopia2 天前
Three.js 场景后处理的秘密:像素世界的魔法改造术
前端·javascript·three.js
Perfumere3 天前
【WebGPU学习杂记】Uniform和Stroage的区别和适用场景
前端·webgl
Mintopia3 天前
Three.js 流水效果制作:从像素到波澜的魔法之旅
前端·javascript·three.js
蓝婷儿3 天前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
Perfumere4 天前
【WebGPU学习杂记】缓冲区是个啥?内存?闪存?
前端·webgl
不关小白白的事4 天前
🚗 Three.js 实战全解析:打造 SU7 展示 + 人物控制 + HDR 场景 + 碰撞检测
three.js
阿怼丶4 天前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js
Mintopia4 天前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
Mintopia5 天前
Three.js 顶点与颜色点的装配艺术:从像素到彩虹的底层之旅
前端·javascript·three.js