網(wǎng)站建站方案說明書網(wǎng)站制作的費用
Threejs
1 前言
Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。
既然Threejs是一款WebGL三維引擎，那么它可以用來做什么想必你一定很關心。所以接下來內(nèi)容會展示大量基于Threejs引擎或Threejs類似引擎開發(fā)的Web3D應用，以便大家了解。
參考資料：
官網(wǎng)Demo
官網(wǎng) api 文檔
Three.js入門教程
2 three 核心概念
1.1 場景
3d 世界的容器，可以在容器中，添加 地面、天空、光照、人、動物等等。
1.2 相機
用來拍攝場景中的畫面，相機在場景中的位置不同，角度不同，拍攝出來的畫面就不一樣。
1.3 渲染器
用于將相機拍攝出來的畫面，繪制到畫布上。
1.4 物體
3D世界是由一個個物體組合而成的。人、車、樓等等都是一個個的物體。
1.5 光線
有了光線你看到的物體才會有各種各樣的顏色，并且隨著光線的反射與折射產(chǎn)生出更加真實的感覺。
3 安裝及使用three
3.1 安裝
# three的版本指定好，新版有時更新了api，可能導致之前使用的方法不起作用
npm i three@0.100.0
3.2 使用
-
在腳手架搭建的項目中使用
import Three from 'three' -
在html 頁面中使用
<script src='./three.js'></script>
4 threejs 初探
<!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>three-demo</title><script src="./libs/three.min.js"></script><style>html,body {height: 100vh;width: 100vw;padding: 0;margin: 0;border: 0;}#demo {width: 100%;height: 100vh;}</style></head><body><div id="demo"></div><script>const { THREE } = window;const {// 核心三件套Scene, // 場景WebGLRenderer, // 渲染器PerspectiveCamera, // 透視相機BoxGeometry, // 正方體幾何體Mesh, // 網(wǎng)格 -- 物體PointLight, // 點光源AmbientLight, // 環(huán)境光 } = THREE;// 用于繪制3D圖像的domconst renderDom = document.getElementById("demo");const width = renderDom.clientWidth; //窗口寬度const height = renderDom.clientHeight; //窗口高度const k = width / height; //窗口寬高比const s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大// 創(chuàng)建場景const scene = new Scene();// 物體的形狀 -- 創(chuàng)建一個立方體幾何對象const geometry = new BoxGeometry(100, 100, 100);// 物體材質(zhì) -- 銅、鐵、顏色const material = new MeshLambertMaterial({color: 0x0000ff,});// 通過幾何形狀和材質(zhì)創(chuàng)建出一個 立方體const mesh = new Mesh(geometry, material); //網(wǎng)格模型對象Mesh// 將物體加入到場景中scene.add(mesh); //網(wǎng)格模型添加到場景中// 添加點光源const point = new PointLight(0xffffff);point.position.set(400, 200, 300); //點光源位置scene.add(point); //點光源添加到場景中// 添加環(huán)境光const ambient = new AmbientLight(0xfbea94);scene.add(ambient);// 創(chuàng)建相機const camera = new PerspectiveCamera();camera.fov = 35; // 視角度數(shù)camera.near = 1; // 設置相機最小拍攝距離camera.far = 1000; // 設置相機最大拍攝距離camera.position.set(350, 290, 220); //設置相機位置camera.lookAt(scene.position); //設置相機方向(指向的場景對象)// 創(chuàng)建渲染器const renderer = new WebGLRenderer({precision: "lowp",alpha: true,antialias: true,logarithmicDepthBuffer: true,});renderer.setSize(width, height); // 設置渲染區(qū)域尺寸renderer.setClearColor(0xb9d3ff, 1); // 設置背景顏色// 在 demo dom 中插入渲染器renderDom.appendChild(renderer.domElement);// 將相機拍攝到的畫面渲染出來renderer.render(scene, camera);</script></body>
</html>three 核心概念示例圖
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3zrNrYOL-1687830109752)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs.png)]
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YHszuf74-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs2.png)]
透視相機圖解
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9zSBWKOE-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\14238c00f908461ba7007348de2bc604.png)]
5 threejs 全景學習曲線
- Scene - 場景
- Camera - 相機
- 透視相機
- 正交相機
- WebGLRenderer - 渲染器
- 物體
- Points - 點
- Line - 線
- Mesh - 多邊形網(wǎng)格
- Geometry - 幾何體
- Skeleton - 骨架
- Bone - 骨骼
- Sprite - 精靈
- Group - 分組
- Light - 光
- 環(huán)境光
- 平行光
- 點光源
- 聚光燈
- 半球光
- Texture - 紋理貼圖
- VideoTexture - 視頻紋理
- DepthTexture - 深度紋理
- CubeTexture - 立方紋理
- Canvas紋理
- Material - 材質(zhì)
- 線材質(zhì)
- 點材質(zhì)
- 網(wǎng)格材質(zhì)
- 著色器材質(zhì)
- 陰影材質(zhì)
- 精靈材質(zhì)
- Loader - 加載器
- 加載模型文件
- 加載文字
- 加載圖片
- 加載音頻
- 加載視頻
- 加載紋理
- Animation - 動畫
- 幀動畫
- 軌道動畫
- 骨骼動畫
- 變形動畫
- Audio - 語音
- 內(nèi)置計算方法
- 數(shù)學庫
- 路徑創(chuàng)建
- 形狀創(chuàng)建