上一篇建立了基礎的場景後，接下來讓我們來建立物件後將物件放入場景中。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>