動(dòng)漫做h在線觀看網(wǎng)站b2b模式的電商平臺(tái)有哪些
個(gè)人簡(jiǎn)介
👀個(gè)人主頁(yè)： 前端雜貨鋪
🙋?♂?學(xué)習(xí)方向： 主攻前端方向，正逐漸往全干發(fā)展
📃個(gè)人狀態(tài)： 研發(fā)工程師，現(xiàn)效力于中國(guó)工業(yè)軟件事業(yè)
🚀人生格言： 積跬步至千里，積小流成江海
🥇推薦學(xué)習(xí)：🍍前端面試寶典 🍉Vue2 🍋Vue3 🍓Vue2/3項(xiàng)目實(shí)戰(zhàn) 🥝Node.js🍒Three.js🍖數(shù)據(jù)結(jié)構(gòu)與算法體系教程🌕個(gè)人推廣：每篇文章最下方都有加入方式，旨在交流學(xué)習(xí)&資源分享，快加入進(jìn)來(lái)吧
| 內(nèi)容 | 參考鏈接 |
|---|---|
| WebGL專欄 | WebGL 入門 |
| Three.js（一） | 創(chuàng)建場(chǎng)景、渲染三維對(duì)象、添加燈光、添加陰影、添加霧化 |
文章目錄
- 前言
- 一、scene 場(chǎng)景
- 二、幾何體位置、旋轉(zhuǎn)、縮放
- 三、正射投影相機(jī)
- 四、透視投影相機(jī)
- 總結(jié)
前言
大家好，這里是前端雜貨鋪。
上篇文章我們學(xué)習(xí)了 創(chuàng)建場(chǎng)景、渲染三維對(duì)象、添加燈光、添加陰影、添加霧化，接下來(lái)繼續(xù)我們 three.js 的學(xué)習(xí)！
在學(xué)習(xí)的過(guò)程中，如若需要深入了解或擴(kuò)展某些知識(shí)，可以自行查閱 => three.js官方文檔
一、scene 場(chǎng)景
在上篇文章中，我們已經(jīng)使用過(guò)它，scene 場(chǎng)景能夠讓我們?cè)谑裁吹胤?、擺放什么東西來(lái)交給 three.js 來(lái)渲染，這是我們放置物體、燈光和攝像機(jī)的地方。
接下來(lái)，我們熟悉幾個(gè) scene 的常用 方法和屬性。
| 方法名 | 用途 |
|---|---|
| add() | 向場(chǎng)景中添加對(duì)象 |
| getObjectByName() | 通過(guò)命名獲取對(duì)象 |
| remove() | 從場(chǎng)景中移除對(duì)象 |
| 屬性名 | 用途 |
|---|---|
| children | 返回場(chǎng)景中所有對(duì)象的列表 |
| fog | 設(shè)置場(chǎng)景中的霧化效果 |
| overrideMaterial | 強(qiáng)制場(chǎng)景中所有對(duì)象使用相同材質(zhì) |
下面代碼的場(chǎng)景中，我們添加了兩個(gè)物體：立方體和球體。
我們使用 getObjectByName() 方法實(shí)現(xiàn)獲取球體并放大球體為原來(lái)的兩倍。使用 remove 方法移除了球體。
我們使用 chidren 屬性查看場(chǎng)景中的對(duì)象列表（由于我們刪除了球體，所有只有立方體和聚光燈）。使用 fog 屬性在場(chǎng)景中添加霧化效果。使用 overrideMaterial 強(qiáng)制場(chǎng)景中所有對(duì)象使用同一材質(zhì)。
<!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><script src="../lib/three/three.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 創(chuàng)建場(chǎng)景const scene = new THREE.Scene();// 創(chuàng)建相機(jī) 視野角度FOV、長(zhǎng)寬比、近截面、遠(yuǎn)截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 設(shè)置相機(jī)位置camera.position.set(0, 0, 20);// 創(chuàng)建渲染器const renderer = new THREE.WebGLRenderer();// 設(shè)置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方體const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 創(chuàng)建立方體材質(zhì)const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: false});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到場(chǎng)景scene.add(cube);// 添加球體const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);// 創(chuàng)建球體材質(zhì)const sphereMatrial = new THREE.MeshBasicMaterial({color: 0x00ff00,wireframe: true})const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);// 給球體命名sphere.name = 'sphere';// 添加到場(chǎng)景scene.add(sphere);// 通過(guò)命名放大球體為原來(lái)的兩倍scene.getObjectByName("sphere").scale.set(2, 2, 2);// 添加燈光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 10);scene.add(spotLight);// 查看場(chǎng)景中所有對(duì)象列表console.log(scene.children);// 設(shè)置場(chǎng)景中的霧化效果scene.fog = new THREE.Fog(0xffffff, 1, 50);// 移除立方體scene.remove(sphere);// 強(qiáng)制場(chǎng)景中所有對(duì)象使用相同材質(zhì)scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000});const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;sphere.rotation.x += 0.01;sphere.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>
二、幾何體位置、旋轉(zhuǎn)、縮放
position 控制物體的位置、rotation 控制物體的旋轉(zhuǎn)、scale 控制物體的縮放。
下面的代碼，我們使用 單個(gè)賦值 和 方法賦值 的方式來(lái)操作幾何體。
<!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><script src="../lib/three/three.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 創(chuàng)建場(chǎng)景const scene = new THREE.Scene();// 創(chuàng)建相機(jī) 視野角度FOV、長(zhǎng)寬比、近截面、遠(yuǎn)截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 設(shè)置相機(jī)位置camera.position.set(0, 0, 20);// 創(chuàng)建渲染器const renderer = new THREE.WebGLRenderer();// 設(shè)置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方體const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 創(chuàng)建立方體材質(zhì)const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: false});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 單個(gè)賦值 效果同下// // 位置 x => 3// cube.position.x = 3;// // 旋轉(zhuǎn) 45 度// cube.rotation.x = 0.125 * Math.PI;// cube.rotation.y = 0.125 * Math.PI;// cube.rotation.z = 0.125 * Math.PI;// // x 放大 2 倍// cube.scale.x = 2;// 通過(guò)方法賦值cube.position.set(3, 0, 0);cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);cube.scale.set(2, 1, 1);// 添加到場(chǎng)景scene.add(cube);// 渲染renderer.render(scene, camera);</script>
</body></html>
三、正射投影相機(jī)
正射投影相機(jī) new THREE.OrthographicCamera（渲染的圖片中物體的大小都保持不變），它接收六個(gè)參數(shù)：
- left：左邊界
- right：右邊界
- top：上邊界
- bottom：下邊界
- near：近面
- far：遠(yuǎn)面
<!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><script src="../lib/three/three.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 創(chuàng)建場(chǎng)景const scene = new THREE.Scene();// 正射投影相機(jī)const camera = new THREE.OrthographicCamera(-10, 10, 10, -10, 1, 1000)// 設(shè)置相機(jī)位置camera.position.set(0, 0, 20);// 創(chuàng)建渲染器const renderer = new THREE.WebGLRenderer();// 設(shè)置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方體const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 創(chuàng)建立方體材質(zhì)const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: false});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);// 添加到場(chǎng)景scene.add(cube);// 渲染renderer.render(scene, camera);</script>
</body></html>
四、透視投影相機(jī)
正射投影相機(jī) new THREE.PerspectiveCamera （用來(lái)模擬人眼所看到的景象，近大遠(yuǎn)小），它接收四個(gè)參數(shù)：
- fov：視角
- aspect：寬高比
- near：近面
- far：遠(yuǎn)面
<!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><script src="../lib/three/three.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 創(chuàng)建場(chǎng)景const scene = new THREE.Scene();// 透視投影相機(jī) 視野角度FOV、長(zhǎng)寬比、近截面、遠(yuǎn)截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 設(shè)置相機(jī)位置camera.position.set(0, 0, 20);// 創(chuàng)建渲染器const renderer = new THREE.WebGLRenderer();// 設(shè)置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方體const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 創(chuàng)建立方體材質(zhì)const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: false});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);// 添加到場(chǎng)景scene.add(cube);// 渲染renderer.render(scene, camera);</script>
</body></html>
總結(jié)
本篇文章我們熟悉了scene場(chǎng)景的一些方法和屬性的使用，認(rèn)識(shí)了如何對(duì)幾何體進(jìn)行位置、選擇和縮放的操作，并簡(jiǎn)單了解了正射投影相機(jī)和透視投影相機(jī)。
更多內(nèi)容擴(kuò)展請(qǐng)大家自行查閱 => three.js官方文檔，真心推薦讀一讀！！
好啦，本篇文章到這里就要和大家說(shuō)再見(jiàn)啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！
參考資料：
- Three.js 官方文檔
- WebGL+Three.js 入門與實(shí)戰(zhàn)【作者：慕課網(wǎng)_yancy】
