一.環境介紹

倘若你只是使用Three.js庫中所提供的幾何體，且不載入任何紋理貼圖，則網頁是可以從本地的文件系統中打開，并且是能夠直接運行的，只需在文件管理器中雙擊HTML文件，它就可以在瀏覽器中進行顯示。 (此時你將在地址欄中看到類似這樣的URL：file:///yourFile.html);但這些是不能滿足項目需要的，我們在作項目的時候是需要加載模型師給我們做好的模型而不是Three.js庫中所提供的幾何體。我們需要從外部文件里載入幾何體或是紋理貼圖，由于瀏覽器same origin policy(同源策略)的安全限制，從本地文件系統載入外部文件將會失敗，同時拋出安全性異常，這里有兩種方式解決這個問題：

1.1在瀏覽器中改變本地文件的安全策略，這將使你可以通過file:///yourFile.html來直接運行本地文件系統中的文件。(本人不建議使用這種方式，如個您感興趣可以自行百度)

1.2從本地的服務器運行文件，這可以讓你通過http://localhost/yourFile.html來訪問運行在本地服務器上的文件(個人建議下載一個phpstudy工具，使用很簡單 或者自己使用nodejs弄一個服務)。

二. 開始項目

2.1? 準備一個? 模型，threejs支持模型格式挺多的，常見的有glb(gltf)、obj、fbx、json等

2.2 引入threejs 文件? three.min.js、OrbitControls.js(相機控制器)、GLTFLoader.js(模型加載器這里展示的是glb格式模型加載器)如下：

My first three.js app

2.3 準備工作已經好了 現在開始進入代碼階段

2.3.1??我們需要以下幾個對象：場景、相機和渲染器，這樣我們就能透過攝像機渲染出場景。

let scene,camera,renderer,controls，load；

scene = new THREE.Scene();//場景

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//相機

renderer = new THREE.WebGLRenderer();//渲染器

renderer.setSize( window.innerWidth, window.innerHeight );//渲染器尺寸

document.body.appendChild( renderer.domElement );//將渲染器加入body中

controls=new THREE.OrbitControls(camera, renderer.domElement);//相機控制器

2.3.2 引入模型

load=new THREE.GLTFLoader();

load.loader('./model/test.glb,function(gl){

scene.add(gl.scene)//將模型加入到場景中

renderer.render( scene, camera );//渲染

})；

到這里 理論上我們的項目已經完成了。但是我們都是要對模型、相機進行實時操作的。所以我們需要對場景進行實時渲染

function onUpdate() {

requestAnimationFrame( onUpdate );

renderer.render( scene, camera );

}

onUpdate();

至此 一個完成的項目就操作完成，后續我會繼續在此項目給大家分享 模型的一些操作功能 謝謝大家

總結

以上是生活随笔為你收集整理的three.js和php,threejs--初创项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。