1.初识Three.js

一、三要素

Three.js中的三要素是指：场景Scene、相机Camera和渲染器Renderer。通过这三要素，可以在web浏览器中展示出一个空间。

1.场景

// 创建3D场景对象Scene
const scene = new THREE.Scene();

scene.add()方法可以添加一些对象到场景中，例如：物体、光源、控制器等。

2.相机

相机分类：正投影相机OrthographicCamera、透视投影相机PerspectiveCamera。

简单理解就是，需要模拟人的第一人称视角的时候使用透视投影相机，反之使用正投影相机。

相机有两点核心：相机的位置和相机观察的位置。

    // 创建一个透视相机 PerspectiveCamera(相机视锥体竖直方向视野角度,相机视锥体水平方向和竖直方向长度比,相机视锥体近裁截面相对相机距离,相机视锥体远裁截面相对相机距离)
    const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000)
    camera.position.set(200, 200, 200)  // 设置相机位置
    camera.lookAt(0, 0, 0)    // 设置相机观察位置

3.渲染器

什么是渲染器呢？

Three.js中文网给出的解释是：生活中如果有了景物和相机，那么如果想获得一张照片，就需要你拿着相机，按一下，咔，完成拍照。对于threejs而言，如果完成“咔”这个拍照动作，就需要一个新的对象，也就是WebGL渲染器WebGLRenderer (opens new window)。

作为一个前端程序员我的理解就是，要把画面渲染上DOM上了。

    const renderer = new THREE.WebGLRenderer()  // 创建一个WebGL渲染器对象
    renderer.setSize(window.innerWidth , window.innerHeight)  // 设置Canvas画布大小
    renderer.render(scene, camera)  // 将场景和相机一起渲染到渲染器中
    document.body.appendChild(renderer.domElement)   // 将Canvas画布插入到dom元素中

完整代码：

import * as THREE from 'three'
// 四要素：场景、相机、物体(形状+材质)、渲染器
const scene = new THREE.Scene()   // 创建场景
// 创建一个透视相机 PerspectiveCamera(相机视锥体竖直方向视野角度,相机视锥体水平方向和竖直方向长度比,相机视锥体近裁截面相对相机距离,相机视锥体远裁截面相对相机距离)
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000)
camera.position.set(200, 200, 200)  // 设置相机位置
camera.lookAt(0, 0, 0)    // 设置相机观察位置

const geometry = new THREE.BoxGeometry(100, 100, 100) // 创建一个形状

// 创建一个半透明材质
const material = new THREE.MeshBasicMaterial({
     color: 0x0000ff,// 设置材质颜色
     transparent: true,// 开启透明
     opacity: 0.5// 设置透明度
})

const mesh = new THREE.Mesh(geometry, material)  // 创建一个网格模型
scene.add(mesh) // 添加到场景

const renderer = new THREE.WebGLRenderer()  // 创建一个WebGL渲染器对象
renderer.setSize(window.innerWidth / window.innerHeight)  // 设置Canvas画布大小
renderer.render(scene, camera)  // 将场景和相机一起渲染到渲染器中
document.body.appendChild(renderer.domElement)   // 将Canvas画布插入到dom元素中

二、常用控件

1.辅助观察坐标系

THREE.AxesHelper() 的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

2.轨道控制器

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件

3.性能监视器

//引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';

//创建stats对象
const stats = new Stats();
//stats.domElement:web页面上输出计算结果,一个div元素，
document.body.appendChild(stats.domElement);
// 渲染函数
function render() {
	//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
	stats.update();
	renderer.render(scene, camera); //执行渲染操作
	requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();