Three.js 之初级入门

#. 前言

Three.js 是基于原生 WebGL 封装运行的三维引擎，在所有 WebGL 引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

可用于物联网3D可视化、产品720在线预览、数据可视化、科教领域、家装室内设计相关及WebVR相关等。

本质上主要借助于 canvas 来实现，一般前端比较复杂的绘图基本上都是 canvas (画布)。

#. 引入

1. npm 安装

npm install three --save-dev

import * as THREEfrom 'three'

2. script 标签引入

<script src="../assets/js/thress.js"> </script>

#. 使用

一般使用 three.js 分为三步：创建场景 ==> 创建相机 ==> 创建渲染器。

1. 创建场景

// 创建一个场景
let scene = new THREE.Scene();

2. 创建相机

// 创建一个投射相机 （接收四个参数）
// 第一个参数：视角  
// 第二个参数：宽高比 
// 第三个参数：近面距离 （z轴）
// 第四个参数：远面距离 （z轴）
let wh = window.innerWidth / window.innderHeight;
let camera = new THREE.PerspectiveCamera(65, wh, 100, 1000);
// 设置相机的位置
camera.position.z = 500 或 camera.set(0,0,500);

3. 创造渲染器

// 创建渲染器
let renderer = new THREE.WebGLRenderer({
  antialias:true // 去除锯齿
});
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的背景色 与 透明度
renderer.setClearColor(0xff00ff, 1);  

写到这这里， 基本步骤就完成了。但只是一个空场景并没有什么东西，我们来创建一个几何体，举个栗子：

// 创建一个 长、宽、高都是 100 的正方体
let geometry = new THREE.BoxGeomotry(100,100,100);

// 指定几何体的材料
// 这种为 简单着色（平面或线框）方式来绘制几何体的材质
// 不受光照的影响 即不能使用 DirectionalLight(平行光) 及 AmbientLight(环境光) 
let material = new THREE.MeshBasicMaterial({  // 方式一
  color: 0x00ff00
});

// 也可设置高光材质，这种材质必须设置  AmbientLight(环境光)  
let material = new THREE.MeshPhongMaterial({ // 方式二
  color: 0x00ff00
});
// AmbientLight(环境光)  
let light = new Three.AmbientLight( 0x00e5fd ); // soft white light
scene.add(light);

// 把几何体 和 材料组合起来, 形成网格
let cube = new THREE.Mesh(geometry, material);
// 旋转网格
cube.rotation.x = 0.3; 
cube.rotation.y = 0.5; 
// 把网格放到场景中
scene.add(cube);

4. 把 canvas 渲染在页面上

// 把创建好的canvas放在页面中
document.body.appendChild(renderer.domElement);
// 渲染创建好的场景 和 相机
renderer.render(scene, camera);

5. 自动旋转

function animate(){
  cube.rotation.x += 0.1; 
  cube.rotation.y = 0.1; 
  renderer.render(scene, camera);
  // 这一帧执行完，自动执行下一帧 
  requestAnimationFrame(animate);
}
// 调用动画
animate();

6. 鼠标控制

安装
npm install three-orbitcontrols --s
引入
import 'three-orbitcontrols'
使用
let controls = new Three.OrbitControls(camera, renderer.domElement);
controls.update();

到这里就完成啦，赶快试试吧~~
别忘记点赞哦~~