一个简单的案例，理解threejs中几个基本概念

Posted 2021-04-21 牧码小子

好了，废话不多说，接下来我想通过一个简单的案例，先和大伙来聊一聊threejs中几个简单的概念。

资源下载

基本概念

在threejs中有几个基本的概念：

1.场景

场景就是你看到的花花世界，这就是一个场景，反映到threejs中，场景就是所有物体的容器，例如，我们想显示一个卡车，那就要将这个卡车放加入到场景中，然后才能显示出来。

2.相机

相机就相当于人的眼睛，人用眼睛看这花花世界，而在threejs中，使用相机来观察场景，相机的位置、相机的角度都决定了看到的场景会不同，相机有透视相机和正投影相机等。

3.渲染器

渲染器就是将相机拍摄的画面在页面的某个dom节点中显示出来。

4.组件

组件就是要显示的物体，这种物体有平面几何物体，有三维物体。

代码实现

创建一个普通项目，将下载到的threejs中的build/three.js文件拷贝到项目中，然后在项目中创建一个html页面，如下：

开始代码编写：

首先在需要将threejs引入到项目中，然后在js中分别创建场景、相机、渲染器以及组件：

 
   
   
 

  
    
    
  
var scene = new THREE.Scene();
  
    
    
  
var camera = new THREE.PerspectiveCamera(60, window.innerWidth /window.innerHeight, 1, 1000);
  
    
    
  
var render = new THREE.WebGLRenderer();
  
    
    
  
render.setClearColor("#FFFFFF");
  
    
    
  
render.setSize(window.innerWidth, window.innerHeight);
  
    
    
  
document.body.appendChild(render.domElement);
  
    
    
  
var geometry = new THREE.CubeGeometry(1,1,1);
  
    
    
  
var material = new THREE.MeshBasicMaterial({color: 0xFFB6C1});
  
    
    
  
var cube = new THREE.Mesh(geometry, material);
 
   
   
 

代码解释：

1. newTHREE.Scene()表示创建一个场景出来。

2. 第2行代码表示创建一个相机，第一个参数视角为60度，第二个参数表示实际窗口的宽高比，第三个参数表示近平面，第四个参数表示远平面（关于最后两个参数，涉及到一点图形学的东西，人的眼睛看到的空间区域是一个四棱台，太近的太远的都看不到，近处的截面就是近平面，最远处的截面就是远平面，读者暂时可以这样理解）。

3. 第3-5行代码表示创建一个渲染器，设置渲染器颜色为白色，同时设置渲染器的大小。

4. 第6行代码表示将渲染器渲染的结果在页面的body元素中显示出来。

5. 第7-9行代码表示创建一个三维的立方体，设置材料的颜色为粉色，然后利用THREE.Mesh构造一个立方体出来。

元素都创建出来了，接下来将组件添加到场景中，同时设置相机的深度为5，如下：

 
   
   
 

  
    
    
  
scene.add(cube);
  
    
    
  
camera.position.z = 5;
 
   
   
 

最后，通过如下方式将图像渲染出来：

 
   
   
 

  
    
    
  
function showCube() {
  
    
    
  
    render.render(scene, camera);
  
    
    
  
}
  
    
    
  
showCube()
 
   
   
 

传入场景和相机，利用渲染器将之渲染出来，最终执行结果如下：

此时的图像是静止不动的，让图像动起来，有两种不同的方式：

1. 图像本身动起来

2. 相机动起来

本案例采用第一种方式，让图像在三个坐标上旋转，修改showCube方法如下：

 
   
   
 

  
    
    
  
function showCube() {
  
    
    
  
    requestAnimationFrame(showCube)
  
    
    
  
    cube.rotation.x += 0.01;
  
    
    
  
    cube.rotation.y += 0.01;
  
    
    
  
    cube.rotation.z += 0.01;
  
    
    
  
    render.render(scene, camera);
  
    
    
  
}
 
   
   
 

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，然后在重绘过程中使图像旋转起来，如下：

好了，至此，一个简单的案例就完成了。不知道大伙对threejs有没有一点入门呢？

▼

往期精彩回顾

▼