前端框架

21 01月

Three.js入门： 构建一个立方体

2022-01-21 前端框架

Three.js入门： 构建一个立方体

Three.js 是一个 JavaScript 库，用于在 Web 浏览器中创建 3D Web 图形。前面介绍过一些基本的知识和实现简单的效果《Three.js 入门指南》和《【Three.js】随着元宇宙开启WEB3D之路》，本文从简单的构建立方体出发，介绍一些基础概念。

预览效果：https://codepen.io/quintiontang/full/WNZBmrM

完整的代码如下：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry(2, 2, 2 );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

cube.rotation.x += 0.5;
cube.rotation.y += 0.5;
  
renderer.render( scene, camera );

这是每个 Three.js 应用程序一种常见模式，包括 WebGLRenderer、 Scene 、 Camera ，如下：

场景

首先使用 Scene 创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）。

const scene = new THREE.Scene();

相机

创建相机 Camera，这里选用 PerspectiveCamera 创建透视投影相机。这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

PerspectiveCamera 有四个参数：

  • fov — 摄像机视锥体垂直视野角度，这里参数值为 75；
  • aspect — 摄像机视锥体长宽比，这里根据页面的可视长宽进行计算 window.innerWidth/window.innerHeight；
  • near — 摄像机视锥体近端面，值为 0.1；
  • far — 摄像机视锥体远端面，值为 1000

WebGLRenderer

WebGL渲染器，这个渲染器比 Canvas 渲染器（CanvasRenderer）有更好的性能，语法如下：

const renderer = new THREE.WebGLRenderer(parameters);

parameters 是一个可选对象，用来定义渲染器行为的属性，没有设置该参数时，将使用默认值。

{
    canvas: "一个用来绘制输出的 Canvas 对象",
    context: "所用的 渲染上下文(RenderingContext) 对象",
    precision: "着色器的精度，包括：highp、mediump、lowp，默认为：highp，如果设备支持的话",
    alpha : "是否可以设置背景色透明 , 默认为 false",
    premultipliedAlpha: " Boolean, 默认为 true",
    antialias: "是否开启反锯齿, 默认为 false"
    stencil: "Boolean, 默认为 true",
    preserveDrawingBuffer: "是否保存绘图缓冲, 默认为 false",
    depth: "Boolean, 默认为 true",
    logarithmicDepthBuffer: "Boolean, 默认为 false"
}

BoxGeometry

BoxGeometry 是用来构建四边形的几何立方体或者不规则四边形，语法如下：

const geometry = new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer );
  • width — X轴上面的宽度，默认值为1。
  • height — Y轴上面的高度，默认值为1。
  • depth — Z轴上面的深度，默认值为1。
  • widthSegments — （可选）宽度的分段数，默认值是1。
  • heightSegments — （可选）高度的分段数，默认值是1。
  • depthSegments — （可选）深度的分段数，默认值是1。

本文设置构建了一个长宽高度为 2 的立方体：

const geometry = new THREE.BoxGeometry(2, 2, 2 );

MeshBasicMaterial

一个以简单着色（平面或线框）方式来绘制几何体的材质，语法如下：

MeshBasicMaterial( parameters : Object )
  • parameters - （可选）用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入（包括从Material继承的任何属性)。

本文定义了一个红色的立方体：

const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

Mesh

网格表示基于以三角形为 polygon mesh（多边形网格）的物体的类，语法如下：

Mesh( geometry : BufferGeometry, material : Material )

Mesh=Geometry+Material

  • geometry ：（可选）BufferGeometry 的实例，默认值是一个新的 BufferGeometry。
  • material ：（可选）一个 Material，或是一个包含有 Material 的数组，默认是一个新的 MeshBasicMaterial。
const cube = new THREE.Mesh( geometry, material );

接下来就将定义好的 cube 添加到场景：

scene.add( cube );

render

渲染器最重要的方法，使用相机渲染一个场景。

renderer.render( scene, camera );

语法格式为：

render(scene, camera, renderTarget, forceClear);

  • scene 是要绘制的场景
  • camera 指定相机，相机照射的区域会转换成 2D 绘制到屏幕
  • renderTarget 如果不让渲染的内容直接绘制到屏幕，则存放到renderTarget ，否则渲染到通常的canvas上
  • forceClear 为 true 时则颜色、深度和模板绘制缓冲将在渲染前被清除，即使渲染器的 autoClear 属性为 false

到此，一个简单的立方体就构建完成了。

three.jsWebGLffmpeg