JS Library 学习笔记：Three.js 初见面，在2D画面创造三维世界 (一)

引入Z轴创造体积、呈现空间感外，光影也是 3D 重要元素，光的强弱、位置、角度、色彩等，会与物体的「材质」一同影响呈现的样子；除了物体与光源变化外，也可以操作观者的画面视角，这边通常会用「摄影机」来形容，由视角的变化转换与空间的利用，也能创造出有趣的效果。

在网际网路、设备与相关技术的发展下，运算效率提升让浏览器能建立出精致的画面效果，3D网页技术发展至今具有一定的成熟度，同时，专注於3D技术的 JavaScript Library 也逐渐丰富多元，接下来将使用相当有名的 Three.js。

刚刚提到的三轴维度、光源效果、摄影机与物体材质，也会在接下来的使用中提到这些元素，让我们开始吧！

在2D画面创造三维世界

安装Three.js

可以利用npm下载安装用於专案中，也可以利用CDN的方式将Three.js引入；另外，因 Three.js 使用的是 ES module，因此在使用时在HTML的script标签需将type标示为module。

<script type="module">
  import * as THREE from 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/three.js';
</script>

最新版本的连结可以在 https://cdn.skypack.dev/three 查询，或是可以使用cdnjs网站提供的CDN： https://cdnjs.com/libraries/three.js

建立基础场景 (scene、camera、renderer)

接下来，就可以直接在<script>、</script>之间建立基础的场景，Three.js的基础场景包含「场景 scene」、「摄影机camera」、「渲染器renderer」三个主要元素，皆使用new建构出来即可。

摄影机camera
要能在2D萤幕上呈现3D立体图像，需要搭配物体投影的成像方法，而不同投影类型则控制在摄影机中。Three.js主要提供能呈现最接近人眼所见场景的透视投影PerspectiveCamera，和正投影(正射投影)的OrthographicCamera；另外，还有包含两个摄影机的StereoCamera、六个CubeCamera，而包含一组摄影机的ArrayCamera，则适合运用在VR等类型的场景中。

PerspectiveCamera()需传入四个参数，用於定义投影的锥形体，分别为垂直角度、锥体的长宽比例、近端面面积、远端面面积；而OrthographicCamera()则需分别传入左、右、上、下、近、远共六个面的参数。

//建立使用透视投影的摄影机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

渲染器renderer
利用new将THREE.WebGLRenderer()建构出基础渲染器，可以使用setSize()函式设定渲染的大小，最後再将将渲染器的domElement属性放置到HTML中，即可完成场景的建立。

//建构场景
const scene = new THREE.Scene();
//建构摄影机(透视投影摄影机)
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//建构渲染器
const renderer = new THREE.WebGLRenderer();
//调整大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将渲染器的domElement属性放置到HTML
document.body.appendChild( renderer.domElement );

场景建立完成後，再将立体物件建立出来、加进场景中，再透过渲染器进行渲染，就能在场景中加入静态3D物件罗！