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

上一篇建立了基础的场景後，接下来让我们来建立物件後将物件放入场景中。Three.js提供了多种几何图形，可以直接建构相关物件做使用，而若希望运用更复杂的图像，可以从3D图库找寻或是在3D软件中建模输出成glTF(或是FBX、OBJ等档案类型)，利用Loader载入使用。

在基础场景中，放上立体几何图型

事前准备：scene、camera、renderer建立基础场景

1. 建立图型物件
Three.js内建多个立体几何图形，包含立方体BoxGeometry、圆锥体ConeGeometry、圆柱体CylinderGeometry、球体SphereGeometry、圆环TorusGeometry等，皆利用new建构出相关图型，不同图型的所需参数不同，以立方体为例，可以分别传入x轴宽度、y轴高度、z轴深度，另外也可再传入宽度、高度、深度表面的分段数，主要影响非平面的表面呈现，分段数越高，呈现曲度的精细度也越高。

const boxGeometry = new THREE.BoxGeometry(2,3,1); //传入x轴宽度2、y轴高度3、z轴深度1 (预设为1)。

2. 物件挂上mesh表面网格
建构出相基础图型骨架後，需利用THREE.Mesh()将mesh网格套上基础图型上，让物件具有表面网格，才能算是完成基础物件的建立。

const boxGeometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh( boxGeometry );

3. 放进场景中并调整位置
另外，若没有特别设定物体的位置的话，预设状态可能与摄影机重叠，因此，可以将摄影机的z轴位置一并调整。

const boxGeometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh( boxGeometry );
scene.add( cube );
camera.position.z = 5;

4. render 进行场景和摄影机渲染
最後，利用渲染器渲染场景和摄影机，就能看到物件出现在场景中罗！

renderer.render( scene, camera );

到这里就大功告成罗! 可以在场景中发现一个白色立方体的正面(因camera的视角关系，看起来像是2D平面)，我们可以也调整一下摄影机的x、y轴位置，稍微调整一下方向，就能依照摄影机的透视投影方式，呈现对应的投影图像。

<script type="module">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

//建立基础场景(准备scene、camera、renderer)
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 );
document.body.appendChild( renderer.domElement );

//建构立体图形(立方体)
const boxGeometry = new THREE.BoxGeometry();

//mesh生成物件的表面网格
const cube = new THREE.Mesh( boxGeometry );

//把物件加进场景scene中
scene.add( cube );

//调整摄影机camera位置
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 5;

//利用renderer渲染场景与摄影机
renderer.render( scene, camera );
</script>