写点什么

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

作者:devpoint
  • 2022 年 1 月 20 日
  • 本文字数:2053 字

    阅读完需:约 7 分钟

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

Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。前面介绍过一些基本的知识和实现简单的效果,本文从简单的构建立方体出发,介绍一些基础概念。


预览效果: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 应用程序一种常见模式,包括 WebGLRendererSceneCamera ,如下:

场景

首先使用 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


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

发布于: 刚刚阅读数: 2
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
Three.js入门: 构建一个立方体