1.基本概念
1) 場景
如何理解場景 場景就是一個三維的世界, 在這個世界中可以放置各種各樣的物體 可以理解成一個**空間**, 或者**容器**2) 相機
如何理解相機 🤔**思考: **如何在二維平面表現三維效果 由于我們的顯示器是二維平面, 只有兩個維度, 如何在一個二維平面表現出三維效果呢? 在現實生活中, 得益于拍照技術, 從不同的角度拍射(觀察)同一個物體, 然后通過一些光照陰影我們的大腦可以自行腦補出三維的畫圖 **這里的相機就是三維空間的觀察者** 當相機從不同的角度觀察同一個物體會得到不同的圖像, 然后把這些圖像使用一定的技術拼接組合, 我們的大腦會根據生活在三維世界的經驗自行腦補出三維空間3) 物體
在三維空間, 可以放置一些物體, 這些物體就是**被觀察的對象** 不同的物體形狀, 大小, 材質和紋理不相同 盡可能模擬現實生活中的實際物體, 比如
4) 光源
有了光照，物體就會有明暗效果的區別2.開發環境搭建
1) 開發建議
在開發之前, 我有幾點建議 **1一定使用代碼自動補全!!!** 由于three.js有眾多的API, 名字長, 單詞容易拼錯, 基本上記不住 **2模塊化開發** threejs的官方從150+版本后打算廢棄直接引入的方式, 并在160版本移除
2) 初始化項目
創建一個目錄three-basic, 執行npm init -y
3) 安裝three.js
```javascript npm install three@0.152 ```??**** 特別注意
由于threejs的更新非常快, 這里默認安裝會自動安裝最新版的three.js, 不同的版本下API和目錄結構可能不同
本教程(2023-05-10)使用的版本是最新版(v0.152.2)
為了保證一致性, 建議大家在安裝時指定版本
4) 使用vite
vite是開箱即用的下一代打包工具, 原生支持模塊化開發 相比于webpackRollupParcel更快, 更好用 將vite安裝成開發時依賴, 使用vite啟動開發服務 注意：使用5.4.11版本的vitenpm i vite@5.4.11 -D
創建入口文件index.html, 在入口文件中引入
●初始化樣式reset.css
●主入口文件main.js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入初始化樣式 --><link rel="stylesheet" href="./src/assets/styles/reset.css" /></head><body><!-- 使用模塊化方式引入入口文件 --><script src="./src/main.js" type="module"></script></body>
</html>
* {margin: 0;padding: 0;
}body {background-color: skyblue;
}
// 導入THREE
import * as THREE from 'three'// 創建一個場景
const scene = new THREE.Scene()
console.log(scene)
編輯package.json腳本
"scripts": {"dev": "vite"
},
啟動開發服務
npm run dev
如果過程中有任何不懂的地方
大家可以+下方小助手↓回復關鍵詞 su7 免費獲取
