本章讲解\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 };