當前位置：首頁 > news >正文

如何用服務器發(fā)布網站公司培訓課程有哪些

news 2025/7/8 3:56:45

如何用服務器發(fā)布網站,公司培訓課程有哪些,網站被惡意關鍵字訪問,wordpress 搜索詞三要素之間關系： 有了虛擬場景Scene，相機錄像Camera，在相機小屏幕上看到的Renderer Scene當前空間 Mesh人在場景 Camera相機錄像 Renderer顯示器上首先先描述下Scene： 這個場景為三要素之一，一切需要展示的東西都需…

三要素之間關系：

有了虛擬場景Scene，相機錄像Camera，在相機小屏幕上看到的Renderer

Scene當前空間 Mesh人在場景 Camera相機錄像 Renderer顯示器上
在這里插入圖片描述
首先先描述下Scene：
這個場景為三要素之一，一切需要展示的東西都需要添加到Scene里面，也就是畫布，你需要在頁面展示的東西都需要add到Scene中，
在場景里面我們可以添加 Mesh網格模型、光源等

Mesh網格模型組成需要兩部分需要幾何體Geometry和對應的材質模型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)建 并設置別名 --><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><!-- 導入包名 --><script type="module">import * as THREE from 'three';// 創(chuàng)建一個新的場景對象const scene = new THREE.Scene();// 創(chuàng)建一個透視相機，參數分別為視野角度、寬高比、近平面和遠平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 創(chuàng)建一個WebGL渲染器const renderer = new THREE.WebGLRenderer();// 設置渲染器的大小，使其充滿整個窗口renderer.setSize(window.innerWidth, window.innerHeight);// 將渲染器的DOM元素添加到文檔的body中document.body.appendChild(renderer.domElement);</script>
</body></html>

現(xiàn)在建立了場景、相機和渲染器；但是頁面還是不能正常渲染的~

Threejs提供了正投影相機OrthographicCamera (opens new window)和透視投影相機PerspectiveCamera

OrthographicCamera：適用于：CAD 圖紙、工程圖、UI 設計、2D 游戲等場景，這些場景通常需要保持物體的比例和形狀。
PerspectiveCamera：適用于：3D 游戲、虛擬現(xiàn)實、建筑設計等場景，這些場景通常需要模擬真實世界的視覺效果。

透視投影相機PerspectiveCamera：

透視投影相機的四個參數fov, aspect, near, far構成一個四棱臺3D空間，被稱為視錐體，只有視錐體之內的物體，才會渲染出來，視錐體范圍之外的物體不會顯示在Canvas畫布上。

PerspectiveCamera( fov, aspect, near, far )

第一個參數是視野角度（FOV）。視野角度就是無論在什么時候，你所能在顯示器上看到的場景的范圍，它的單位是角度(與弧度區(qū)分開)。默認值：50

第二個參數是長寬比（aspect ratio）。也就是你用一個物體的寬除以它的高的值。比如說，當你在一個寬屏電視上播放老電影時，可以看到圖像仿佛是被壓扁的。默認值：1

最后兩個參數是近截面（near）和遠截面（far）。當物體某些部分比攝像機的遠截面遠或者比近截面近的時候，該這些部分將不會被渲染到場景中?；蛟S現(xiàn)在你不用擔心這個值的影響，但未來為了獲得更好的渲染性能，你將可以在你的應用程序里去設置它。near默認值：0.1；far默認值：2000

在這里插入圖片描述

創(chuàng)建正方體到場景中

	  // 創(chuàng)建一個網格模型const geometry = new THREE.BoxGeometry(1, 1, 1);    // 創(chuàng)建一個立方體幾何體const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });      // 創(chuàng)建一個材質對象const mesh = new THREE.Mesh(geometry, material);        // 創(chuàng)建一個網格模型對象scene.add(mesh);            // 將網格模型對象添加到場景中

這個時候Scene里面已經有了一個Mesh網格模型，也就是一個人進入到了想要拍攝的場景之中。默認在原點坐標
我們也可以設置這個人站在哪里：

 // 創(chuàng)建一個網格模型const geometry = new THREE.BoxGeometry(1, 1, 1);    // 創(chuàng)建一個立方體幾何體const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });      // 創(chuàng)建一個材質對象const mesh = new THREE.Mesh(geometry, material);        // 創(chuàng)建一個網格模型對象mesh.position.set(1,1,1,)       // 設置網格模型對象的位置scene.add(mesh);            // 將網格模型對象添加到場景中

這個時候我們場景Scene準備好了，場景里面要拍攝的人Mesh也準備好了，相機camera也準備好了，這個時候我們需要相機放到一個可以拍攝到咱們物體的一個位置position，然后讓相機看向哪里呢？

相機對象Camera具有位置屬性.position，通過位置屬性.position可以設置相機的位置。

   // 創(chuàng)建一個透視相機，參數分別為視野角度、寬高比、近平面和遠平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相機在Three.js三維坐標系中的位置// 根據需要設置相機位置具體值camera.position.set(5, 5, 5);

相機已經放到了xyz都為5的位置，默認看向xyz都為000的位置，現(xiàn)在我們想讓它看向人也就是網格模型的位置

     // 創(chuàng)建一個透視相機，參數分別為視野角度、寬高比、近平面和遠平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相機在Three.js三維坐標系中的位置// 根據需要設置相機位置具體值camera.position.set(5, 5, 5);   // 設置相機方向(指向的場景對象)                            camera.lookAt(mesh.position);

這個時候頁面還是不展示嘻嘻不慌~
渲染場景
這是因為我們還沒有對它進行真正的渲染。為此，我們需要使用一個被叫做“渲染循環(huán)”（render loop）或者“動畫循環(huán)”（animate loop）的東西。

      /*** 動畫函數* 該函數通過不斷地請求下一幀來實現(xiàn)動畫效果* 它在每一幀中調用渲染器來重新渲染場景和相機*/function animate() {// 請求下一幀動畫requestAnimationFrame(animate);// 使用當前場景和相機進行渲染renderer.render(scene, camera);}// 調用animate函數開始動畫animate();

這下就相當于一直在錄像了~
看下頁面：
在這里插入圖片描述
我們添加一個坐標系，這樣就可以更好的看出所在的位置：
輔助觀察坐標系同樣的添加到場景中

     // 創(chuàng)建輔助觀察坐標系const asesHelper = new THREE.AxesHelper(200);scene.add(asesHelper);

three.js坐標軸顏色紅R、綠G、藍B分別對應坐標系的x、y、z軸，對于three.js的3D坐標系默認y軸朝上
在這里插入圖片描述
我們可以讓Z軸朝上

        // 默認是 0 1 0camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;

在這里插入圖片描述

這個時候我們想讓他跟隨鼠標移動，可拖動旋轉我們使用

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const controls = new OrbitControls(camera, renderer.domElement)   function animate() {controls.update();// 請求下一幀動畫requestAnimationFrame(animate);// 使用當前場景和相機進行渲染renderer.render(scene, camera);}

這時候我們就可以隨意的拖動

我們可以設置這個人Mesh網格模型翻跟頭，比如我們讓他跟隨z軸渲染，只需要在循環(huán)動畫中增加旋轉即可

     function animate() {// 跟隨Z軸旋轉mesh.rotation.z += 0.01;controls.update();// 請求下一幀動畫requestAnimationFrame(animate);// 使用當前場景和相機進行渲染renderer.render(scene, camera);}