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