ThreeJs入门案例：实现一个三维盒子

前言

今天通过一个简单的例子了解ThreeJs的模型创建的过程，成品如下：

第一步

首先先创建ThreeJS三要素：场景Sceen,相机Camera,渲染器Renderer

javascript 复制代码

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75, //fov视角
  window.innerWidth / window.innerHeight, //aspect宽高比
  0.1, //near近截面
  1000 //far远截面
);
const renderer = new THREE.WebGLRenderer();

只有在截锥体范围内的模型才会被渲染到画布上面，这里选择的是透视投影相机PerspectiveCamera，这是使用比较多的相机。

ini 复制代码

camera.lookAt(0,0,0);
camera.position.set(200, 200, 200);

创建了相机以后需要设置位置(position)以及观察对象(lookAt)

第二步

创建模型主要也是三步，创建几何体Geometry，创建材质Material，合成模型Mesh

ini 复制代码

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const basicMaterial = new THREE.MeshBasicMaterial();
const group = new THREE.Group();

basicMaterial.wireframe = true; //这个参数是将一个基本材质设置为线框模式

三重循环创建一个3*3*3个正方形模型
for(let i = 0; i < 3; i++) {
  for(let j = 0; j < 3; j++) {
    for(let z = 0; z < 3; z++) {
      const boxMesh = new THREE.Mesh(boxGeometry, basicMaterial);
      boxMesh.translateX(i-1);
      boxMesh.translateY(j-1);
      boxMesh.translateZ(z-1);
      group.add(boxMesh);
    }
  }
}
group.position.set(0,0,0)

这里面使用了分组Group，分组的作用是为了将多个模型放在一起，方便进行后续的旋转或移动的操作

第三步

将模型放入场景中并且用渲染器渲染到画布上

csharp 复制代码

scene.add(groud);
renderer.setSize(window.innerWidth, window.innerHeight); //铺满整个画布

//获取一个id为threejs的dix元素
const ref = document.getElementById('threejs'); 
ref.appendChild(renderer.domElement);

第四步

给模型添加旋转效果

ini 复制代码

const clock = new THREE.Clock();
function render () {
    let time = clock.getElapsedTime();//返回一个时间的值
    
    //旋转
    cube.rotation.y = time * 0.4;
    cube.rotation.x = time * 0.3;
    renderer.render(scene, camera);//重新渲染页面
    requestAnimationFrame(render);//AnimationFrame函数会在下一次重绘之前执行指定的回调函数，将render函数做为回调函数进行无限的递归，让模型一直都在运动
}
render();

到这里就结束了，后续我会继续更新ThreeJS的小demo，如果有什么问题可以在评论区一起讨论。