本章講解\editor\js\libs\app.js場景編輯完成之後的執行腳本，執行的過程包括 創建渲染器、加載場景編輯器中的場景、相機、解析各個場景節點、動態創建節點綁定的腳本。
//定義導出對象
var APP = {
//定義執行體
Player: function () {
//創建渲染器
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
//場景節點解析
var loader = new THREE.ObjectLoader();
var camera, scene;
//創建vr按鈕
var vrButton = VRButton.createButton( renderer );
//事件集合
var events = {};
//創建渲染界面的容器
var dom = document.createElement( 'div' );
dom.appendChild( renderer.domElement );
this.dom = dom;
//設置默認分辨率
this.width = 500;
this.height = 500;
//加載場景
this.load = function ( json ) {
//獲取工程json文件
var project = json.project;
//設置渲染器的參數
renderer.shadowMap.enabled = project.shadows === true;
renderer.xr.enabled = project.vr === true;
//解析場景
this.setScene( loader.parse( json.scene ) );
//解析相機
this.setCamera( loader.parse( json.camera ) );
events = {
init: [],
start: [],
stop: [],
keydown: [],
keyup: [],
mousedown: [],
mouseup: [],
mousemove: [],
touchstart: [],
touchend: [],
touchmove: [],
update: []
};
//腳本參數
var scriptWrapParams = 'player,renderer,scene,camera';
//new Function 返回的對象中的成員
var scriptWrapResultObj = {};
for ( var eventKey in events ) {
//遍歷添加的參數
scriptWrapParams += ',' + eventKey;
//遍歷動態創建函數返回的結果
scriptWrapResultObj[ eventKey ] = eventKey;
}
//替換函數中存在的\"非法字符
var scriptWrapResult = JSON.stringify( scriptWrapResultObj ).replace( /\"/g, '' );
//遍歷場景中的所有腳本
for ( var uuid in json.scripts ) {
//獲取每一個腳本綁定的對象
var object = scene.getObjectByProperty( 'uuid', uuid, true );
if ( object === undefined ) {
console.warn( 'APP.Player: Script without object.', uuid );
continue;
}
//獲取對象綁定的所有腳本
var scripts = json.scripts[ uuid ];
//遍歷腳本
for ( var i = 0; i < scripts.length; i ++ ) {
//
var script = scripts[ i ];
//閉包的方式動態創建函數，目前設置的參數是 this, renderer, scene, camera
var functions = ( new Function( scriptWrapParams, script.source + '\nreturn ' + scriptWrapResult + ';' ).bind( object ) )( this, renderer, scene, camera );
//遍歷所有創建的腳本函數
for ( var name in functions ) {
//忽略沒有創建的函數
if ( functions[ name ] === undefined ) continue;
//忽略沒有定義的函數
if ( events[ name ] === undefined ) {
console.warn( 'APP.Player: Event type not supported (', name, ')' );
continue;
}
//腳本放入到事件列表中
events[ name ].push( functions[ name ].bind( object ) );
}
}
}
//調用所有的init函數
dispatch( events.init, arguments );
};
//設置當前相機
this.setCamera = function ( value ) {
camera = value;
camera.aspect = this.width / this.height;
camera.updateProjectionMatrix();
};
//設置當前場景
this.setScene = function ( value ) {
scene = value;
};
//設置窗口大小
this.setSize = function ( width, height ) {
this.width = width;
this.height = height;
if ( camera ) {
//跟新投影矩陣
camera.aspect = this.width / this.height;
camera.updateProjectionMatrix();
}
if ( renderer ) {
//設置視口大小
renderer.setSize( width, height );
}
};
//派發消息
function dispatch( array, event ) {
for ( var i = 0, l = array.length; i < l; i ++ ) {
array[ i ]( event );
}
}
var time, prevTime;
//渲染更新
function animate() {
time = performance.now();
try {
//遍歷執行update函數
dispatch( events.update, { time: time, delta: time - prevTime } );
} catch ( e ) {
//異常
console.error( ( e.message || e ), ( e.stack || "" ) );
}
//渲染場景
renderer.render( scene, camera );
prevTime = time;
}
//開始執行時添加鼠標、鍵盤事件，調用執行開始事件，設置循環
this.play = function () {
if ( renderer.xr.enabled ) dom.append( vrButton );
prevTime = performance.now();
document.addEventListener( 'keydown', onDocumentKeyDown );
document.addEventListener( 'keyup', onDocumentKeyUp );
document.addEventListener( 'mousedown', onDocumentMouseDown );
document.addEventListener( 'mouseup', onDocumentMouseUp );
document.addEventListener( 'mousemove', onDocumentMouseMove );
document.addEventListener( 'touchstart', onDocumentTouchStart );
document.addEventListener( 'touchend', onDocumentTouchEnd );
document.addEventListener( 'touchmove', onDocumentTouchMove );
dispatch( events.start, arguments );
renderer.setAnimationLoop( animate );
};
//停止執行時移除鼠標、鍵盤事件，調用執行停止事件，設置循環
this.stop = function () {
if ( renderer.xr.enabled ) vrButton.remove();
document.removeEventListener( 'keydown', onDocumentKeyDown );
document.removeEventListener( 'keyup', onDocumentKeyUp );
document.removeEventListener( 'mousedown', onDocumentMouseDown );
document.removeEventListener( 'mouseup', onDocumentMouseUp );
document.removeEventListener( 'mousemove', onDocumentMouseMove );
document.removeEventListener( 'touchstart', onDocumentTouchStart );
document.removeEventListener( 'touchend', onDocumentTouchEnd );
document.removeEventListener( 'touchmove', onDocumentTouchMove );
dispatch( events.stop, arguments );
renderer.setAnimationLoop( null );
};
//釋放
this.dispose = function () {
//釋放顯存
renderer.dispose();
//釋放內存
camera = undefined;
scene = undefined;
};
//
//鍵盤按下事件
function onDocumentKeyDown( event ) {
dispatch( events.keydown, event );
}
//鍵盤擡起事件
function onDocumentKeyUp( event ) {
dispatch( events.keyup, event );
}
//鼠標按下事件
function onDocumentMouseDown( event ) {
dispatch( events.mousedown, event );
}
//鼠標擡起事件
function onDocumentMouseUp( event ) {
dispatch( events.mouseup, event );
}
//鼠標移動事件
function onDocumentMouseMove( event ) {
dispatch( events.mousemove, event );
}
//觸摸屏按下
function onDocumentTouchStart( event ) {
dispatch( events.touchstart, event );
}
//觸摸屏擡起
function onDocumentTouchEnd( event ) {
dispatch( events.touchend, event );
}
//觸摸屏移動鼠標
function onDocumentTouchMove( event ) {
dispatch( events.touchmove, event );
}
}
};
export { APP };