如何用服務(wù)器發(fā)布網(wǎng)站公司培訓(xùn)課程有哪些
三要素之間關(guān)系：
有了虛擬場(chǎng)景Scene，相機(jī)錄像Camera，在相機(jī)小屏幕上看到的Renderer
Scene當(dāng)前空間 Mesh人在場(chǎng)景 Camera相機(jī)錄像 Renderer顯示器上
首先先描述下Scene：
這個(gè)場(chǎng)景為三要素之一，一切需要展示的東西都需要添加到Scene里面，也就是畫(huà)布，你需要在頁(yè)面展示的東西都需要add到Scene中，
在場(chǎng)景里面我們可以添加 Mesh網(wǎng)格模型、光源等
Mesh網(wǎng)格模型組成需要兩部分 需要幾何體Geometry和對(duì)應(yīng)的材質(zhì)模型Material
1、如何創(chuàng)建Scene、camera 、renderer 三要素并渲染：
<!DOCTYPE html>
<html><head><title>three.js</title><meta charset="utf-8"><style>* {margin: 0;padding: 0;}</style>
</head><body><div id="container"></div><!-- 類似于創(chuàng)建 并設(shè)置別名 --><script type="importmap">{"imports": {"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script><!-- 導(dǎo)入包名 --><script type="module">import * as THREE from 'three';// 創(chuàng)建一個(gè)新的場(chǎng)景對(duì)象const scene = new THREE.Scene();// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、寬高比、近平面和遠(yuǎn)平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 創(chuàng)建一個(gè)WebGL渲染器const renderer = new THREE.WebGLRenderer();// 設(shè)置渲染器的大小，使其充滿整個(gè)窗口renderer.setSize(window.innerWidth, window.innerHeight);// 將渲染器的DOM元素添加到文檔的body中document.body.appendChild(renderer.domElement);</script>
</body></html>
現(xiàn)在建立了場(chǎng)景、相機(jī)和渲染器；但是頁(yè)面還是不能正常渲染的~
Threejs提供了正投影相機(jī)OrthographicCamera (opens new window)和透視投影相機(jī)PerspectiveCamera
OrthographicCamera：適用于：CAD 圖紙、工程圖、UI 設(shè)計(jì)、2D 游戲等場(chǎng)景，這些場(chǎng)景通常需要保持物體的比例和形狀。
PerspectiveCamera：適用于：3D 游戲、虛擬現(xiàn)實(shí)、建筑設(shè)計(jì)等場(chǎng)景，這些場(chǎng)景通常需要模擬真實(shí)世界的視覺(jué)效果。
透視投影相機(jī)PerspectiveCamera：
透視投影相機(jī)的四個(gè)參數(shù)fov, aspect, near, far構(gòu)成一個(gè)四棱臺(tái)3D空間，被稱為視錐體，只有視錐體之內(nèi)的物體，才會(huì)渲染出來(lái)，視錐體范圍之外的物體不會(huì)顯示在Canvas畫(huà)布上。
PerspectiveCamera( fov, aspect, near, far )
第一個(gè)參數(shù)是視野角度（FOV）。視野角度就是無(wú)論在什么時(shí)候，你所能在顯示器上看到的場(chǎng)景的范圍，它的單位是角度(與弧度區(qū)分開(kāi))。默認(rèn)值：50
第二個(gè)參數(shù)是長(zhǎng)寬比（aspect ratio）。 也就是你用一個(gè)物體的寬除以它的高的值。比如說(shuō)，當(dāng)你在一個(gè)寬屏電視上播放老電影時(shí)，可以看到圖像仿佛是被壓扁的。默認(rèn)值：1
最后兩個(gè)參數(shù)是近截面（near）和遠(yuǎn)截面（far）。 當(dāng)物體某些部分比攝像機(jī)的遠(yuǎn)截面遠(yuǎn)或者比近截面近的時(shí)候，該這些部分將不會(huì)被渲染到場(chǎng)景中。或許現(xiàn)在你不用擔(dān)心這個(gè)值的影響，但未來(lái)為了獲得更好的渲染性能，你將可以在你的應(yīng)用程序里去設(shè)置它。near默認(rèn)值：0.1；far默認(rèn)值：2000
創(chuàng)建正方體到場(chǎng)景中
// 創(chuàng)建一個(gè)網(wǎng)格模型const geometry = new THREE.BoxGeometry(1, 1, 1); // 創(chuàng)建一個(gè)立方體幾何體const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 創(chuàng)建一個(gè)材質(zhì)對(duì)象const mesh = new THREE.Mesh(geometry, material); // 創(chuàng)建一個(gè)網(wǎng)格模型對(duì)象scene.add(mesh); // 將網(wǎng)格模型對(duì)象添加到場(chǎng)景中
這個(gè)時(shí)候Scene里面已經(jīng)有了一個(gè)Mesh網(wǎng)格模型，也就是一個(gè)人進(jìn)入到了想要拍攝的場(chǎng)景之中。默認(rèn)在原點(diǎn)坐標(biāo)
我們也可以設(shè)置這個(gè)人站在哪里：
// 創(chuàng)建一個(gè)網(wǎng)格模型const geometry = new THREE.BoxGeometry(1, 1, 1); // 創(chuàng)建一個(gè)立方體幾何體const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 創(chuàng)建一個(gè)材質(zhì)對(duì)象const mesh = new THREE.Mesh(geometry, material); // 創(chuàng)建一個(gè)網(wǎng)格模型對(duì)象mesh.position.set(1,1,1,) // 設(shè)置網(wǎng)格模型對(duì)象的位置scene.add(mesh); // 將網(wǎng)格模型對(duì)象添加到場(chǎng)景中
這個(gè)時(shí)候 我們 場(chǎng)景Scene準(zhǔn)備好了，場(chǎng)景里面要拍攝的人Mesh也準(zhǔn)備好了，相機(jī)camera也準(zhǔn)備好了，這個(gè)時(shí)候我們需要相機(jī)放到一個(gè)可以拍攝到咱們物體的一個(gè)位置position，然后讓相機(jī)看向哪里呢？
相機(jī)對(duì)象Camera具有位置屬性.position，通過(guò)位置屬性.position可以設(shè)置相機(jī)的位置。
// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、寬高比、近平面和遠(yuǎn)平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相機(jī)在Three.js三維坐標(biāo)系中的位置// 根據(jù)需要設(shè)置相機(jī)位置具體值camera.position.set(5, 5, 5);
相機(jī)已經(jīng)放到了xyz都為5的位置，默認(rèn)看向xyz都為000的位置，現(xiàn)在我們想讓它看向人也就是網(wǎng)格模型的位置
// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、寬高比、近平面和遠(yuǎn)平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相機(jī)在Three.js三維坐標(biāo)系中的位置// 根據(jù)需要設(shè)置相機(jī)位置具體值camera.position.set(5, 5, 5); // 設(shè)置相機(jī)方向(指向的場(chǎng)景對(duì)象) camera.lookAt(mesh.position);
這個(gè)時(shí)候 頁(yè)面還是不展示嘻嘻 不慌~
渲染場(chǎng)景
這是因?yàn)槲覀冞€沒(méi)有對(duì)它進(jìn)行真正的渲染。為此，我們需要使用一個(gè)被叫做“渲染循環(huán)”（render loop）或者“動(dòng)畫(huà)循環(huán)”（animate loop）的東西。
/*** 動(dòng)畫(huà)函數(shù)* 該函數(shù)通過(guò)不斷地請(qǐng)求下一幀來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果* 它在每一幀中調(diào)用渲染器來(lái)重新渲染場(chǎng)景和相機(jī)*/function animate() {// 請(qǐng)求下一幀動(dòng)畫(huà)requestAnimationFrame(animate);// 使用當(dāng)前場(chǎng)景和相機(jī)進(jìn)行渲染renderer.render(scene, camera);}// 調(diào)用animate函數(shù)開(kāi)始動(dòng)畫(huà)animate();
這下就相當(dāng)于一直在錄像了~
看下頁(yè)面：
我們添加一個(gè)坐標(biāo)系，這樣就可以更好的看出所在的位置：
輔助觀察坐標(biāo)系同樣的添加到場(chǎng)景中
// 創(chuàng)建輔助觀察坐標(biāo)系const asesHelper = new THREE.AxesHelper(200);scene.add(asesHelper);
three.js坐標(biāo)軸顏色紅R、綠G、藍(lán)B分別對(duì)應(yīng)坐標(biāo)系的x、y、z軸，對(duì)于three.js的3D坐標(biāo)系默認(rèn)y軸朝上
我們可以讓Z軸朝上
// 默認(rèn)是 0 1 0camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;
這個(gè)時(shí)候我們想讓他跟隨鼠標(biāo)移動(dòng)，可拖動(dòng)旋轉(zhuǎn)我們使用
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const controls = new OrbitControls(camera, renderer.domElement) function animate() {controls.update();// 請(qǐng)求下一幀動(dòng)畫(huà)requestAnimationFrame(animate);// 使用當(dāng)前場(chǎng)景和相機(jī)進(jìn)行渲染renderer.render(scene, camera);}
這時(shí)候我們就可以隨意的拖動(dòng)
我們可以設(shè)置這個(gè)人Mesh網(wǎng)格模型翻跟頭，比如我們讓他跟隨z軸渲染，只需要在循環(huán)動(dòng)畫(huà)中增加旋轉(zhuǎn)即可
function animate() {// 跟隨Z軸旋轉(zhuǎn)mesh.rotation.z += 0.01;controls.update();// 請(qǐng)求下一幀動(dòng)畫(huà)requestAnimationFrame(animate);// 使用當(dāng)前場(chǎng)景和相機(jī)進(jìn)行渲染renderer.render(scene, camera);}
好了，到目前位置，做了哪些？
- 創(chuàng)建場(chǎng)景
- 在場(chǎng)景中增加Mesh模型，模型由幾何體和它對(duì)應(yīng)的材質(zhì)組成，設(shè)置了它的定位位置
- 增加camera相機(jī)錄像，它的四個(gè)參數(shù)的含義，位置position，看向何方lookAt
- 渲染器renderer
- 增加輔助坐標(biāo)系，默認(rèn)Y朝上
- 增加控制器
- 增加動(dòng)畫(huà)圍繞z軸旋轉(zhuǎn)