探索三维世界：从Hello World开始的Three.js入门之旅

1、什么是Three.Js

Three.js是一个基于JavaScript的开源3D图形库，用于创建和显示动态三维图形的Web应用程序。它提供了丰富的功能和工具集，可以轻松地创建出各种三维场景、动画和交互式体验，支持多种3D模型格式和材质，可用于游戏、虚拟现实、数据可视化等领域。

2、前要准备工作

three.js官网：https://threejs.org/ 但是由于其是部署在外国站点，直接访问起来的效果不是那么好，所以还是推荐本地直接部署一个官网文档，找到其GitHub地址：https://github.com/threejs 直接将代码下载下来，或者git pull 同理，之后执行以下命令进行本地启动

npm install
npm run dev

简单介绍一下启动项目打开的文件夹说明

文件夹名称	说明
build	编译后代码
docs	文档
editor	可视化编辑器
examples	案例
src	源码

3、Hello World

安装依赖，这里构建一个vue的项目就跳过了，可以快速初始化一个Vue脚手架项目

npm i three

3.1、引入three

为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，下面就对几个对象分别说明

import * as THREE from 'three'

3.2、创建场景

场景就好比于是整个ThreeJs需要展示到哪里的地方，可以将其理解为一个大的容器

const scene = new THREE.Scene();

3.3、创建相机

three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。

• 第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
• 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
• 接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 5 );
scene.add( camera );

3.4、渲染器

除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。

除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 使用渲染器   通过相机将场景渲染
renderer.render( scene, camera );

3.5、创建物体

要创建一个立方体，我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们的属性的对象。这里设置一个color属性，值为0x00ff00，也就是绿色。

最后我们需要一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

到这里我们就完成了一个简单的ThreeJs入门的案例了，可以将一个正方体绘制到页面上了。

3.6、渲染

这里直接将整个场景给渲染到body标签下：

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

3.7、让正方体“动”起来

在前面我们已经创建好了一个正方体对象cube，只需要修改其postion的xyz的值就可以修改其位置了，也就是让正方体动起来，使用js的requestAnimationFrame方法即每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;

    renderer.render( scene, camera );
}

animate();

3.8、手动控制正方体的运动

这里我们可以添加一个轨道控制器，它可以使得相机围绕目标进行轨道运动。OrbitControls 是一个附加组件，必须显式导入。

创建轨道控制器包含两个参数

• object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
• domElement: 用于事件监听的HTML元素。

import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
const controls = new OrbitControls(camera, renderer.domElement);

3.9、坐标轴辅助器

用于简单模拟3个坐标轴的对象。红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);