一.環(huán)境介紹

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

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

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

二. 開始項目

2.1? 準(zhǔn)備一個? 模型，threejs支持模型格式挺多的，常見的有g(shù)lb(gltf)、obj、fbx、json等

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

My first three.js app

2.3 準(zhǔn)備工作已經(jīng)好了 現(xiàn)在開始進(jìn)入代碼階段

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

let scene,camera,renderer,controls，load；

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

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

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

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

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

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

2.3.2 引入模型

load=new THREE.GLTFLoader();

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

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

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

})；

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

function onUpdate() {

requestAnimationFrame( onUpdate );

renderer.render( scene, camera );

}

onUpdate();

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。