提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
文章目錄
- 前言
- 一、安裝
- 二、三要素
- 1.場景
- 1.1創建場景
- 1.2向場景添加元素
- 1.3場景屬性
- 2.相機
- 2.1相機特點
- 2.2正交相機
- 2.3空間布局
- 2.4小姐操作
- 3.渲染器
- 總結
前言
本章簡單介紹前端框架threeJS的使用，使用threeJS我們可以構建出前端的3D界面。不僅能應用在看房、模型分享網站等有需求的項目中，還可以在其他項目中做出酷炫的效果。
一、安裝
為了方便查看效果，我們用vite快速創建一個項目,然后使用npm工具進行安裝，命令如下：
npm install --save three
安裝完成后，我們編寫一個html文件測試
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script type="module">import * as THREE from "three";// 創建場景const scene = new THREE.Scene();// 加載圖片作為背景// const loader = new THREE.TextureLoader();// loader.load("./image/1.png", (texture) => {// scene.background = texture;// });// 創建透視相機const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);// 修改相機位置camera.position.set(0, 0, 5);// 旋轉相機camera.lookAt(0, 0, 0);// 物體網格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);// 創建網格輔助線const gridHelper = new THREE.GridHelper(10, 10);scene.add(gridHelper);// 創建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 將渲染出的元素追加到頁面document.body.appendChild(renderer.domElement);function animation() {requestAnimationFrame(animation);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染場景和相機renderer.render(scene, camera);}animation();</script></body>
</html>運行后，對應頁面上會出現一個不停旋轉的立方體
然后說明threeJS可以使用了
二、三要素
treeJS中有三個重要元素
- 場景
- 相機
- 渲染器
1.場景
場景元素(scene)中存儲著我們所有的對象（模型、燈光、攝像機），是一個容器
1.1創建場景
從導入three包中提供的函數，可以創建一個場景對象
import * as THREE from 'three';const scene = new THREE.Scene();
1.2向場景添加元素
有了場景后，我們就可以向里面添加需要的元素，這個元素可以是模型、燈光等，threeJS中提供了多種默認的模型，也可以自己讀取建模軟件中的模型進行導入，我們試著導入一個默認的立方體：
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 );
對于模型而言，創建出的物體還需要為其指定材質才能夠正常顯示。
最后使用BoxGeometry()創建模型頂點數據，用MeshBasicMaterial()創建模型材質,兩者結合變成完整的立方體模型，然后添加到場景scene中
1.3場景屬性
場景除了可以存儲各種元素以外，場景對象本身也有很多屬性，比如我們可以使用background屬性設置場景背景
2.相機
threejs中提供了多種類型的相機：正交相機（距離不影響物體大小）、透視相機（物體近大遠小）、立方相機（用于全景圖）、立體相機。
這里主要使用的是透視相機，因為符合人眼的規律。
2.1相機特點
在開始介紹該對象的屬性前，先說一下3D建模中透視相機的特點：
相機的視野區域是一個立方體（錐體），離我們人眼原的一段是遠端，離我們人眼近的一端是近端，處于這個立方體內的物體會被投射到近端，形成畫面。
2.2正交相機
我們說過，相機有很多種類型，上面視野范圍呈錐體的是透視相機，而正交相機的視角范圍是一個立方體，正交相機投射的物體會保留原來的大小（不會近大遠小）。
這種相機常被用于一些需要精準測量的模型中，不會因為縮放干擾到數據。
2.3空間布局
場景中用三維坐標來描述位置，threejs中的布局如下（用blender模擬一下）：
如果是剛創建出的元素（包括相機）都是生成在場景原點的位置，如果我們想要成功渲染出模型，需要先調整模型和相機的位置，讓模型處于相機的可視范圍內。
2.4小姐操作
相機可以進行位置的移動和視角的旋轉，這些可以幫助我們在頁面渲染出一些想要的效果。
// 修改相機位置camera.position.set(0, 0, 10);// 視角中心位置（看向哪）camera.lookAt(5, 0, 0);
3.渲染器
設置好場景和相機后需要使用渲染器才可以真正渲染到頁面上。
本質是在canvas標簽上來展示效果。
渲染器我們這里介紹WebGLRenderer
調用構造器可以創建對應對象，其中可以設置canvas屬性來指定一個已有的canvas標簽，在里面渲染效果。
// 創建渲染器const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('.canvas1')});
如果不設置，或者沒有現成的canvas元素，就需要用追加節點的方式動態的追加一個新的canvas元素。
document.body.appendChild(renderer.domElement)
這里renderer.domElement指向的是用來渲染的canvas對象，如果在構造方法中指定過，就是我們指定的那一個。如果是沒有指定過，就會自動生成一個canvas，這個時候再用來作為追加節點就可以了。
總結
由此我們已經能夠簡單使用threeJS創建簡單模型，不過想要做出酷炫效果，需要導入外部模型，這個后面再說。
