publish生成的代码没办法把自己写的事件嵌入进去
所以我想自己写事件代码可以运用上去 这样UI和事件耦合度更低
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: sans-serif;
font-size: 11px;
background-color: #000;
margin: 0px;
}
canvas {
display: block;
}
</style>
</head>
<body ontouchstart="">
<script type="module">
import * as THREE from './js/three.module.js';
import { APP } from './js/app.js';
window.THREE = THREE; // Used by APP Scripts.
var loader = new THREE.FileLoader();
loader.load( 'app.json', function ( text ) {
var player = new APP.Player();
player.load( JSON.parse( text ) );
player.setSize( window.innerWidth, window.innerHeight );
player.renderer.setAnimationLoop( animate );
var object = player.scene.getObjectByProperty( 'uuid', '6C336C16-71D6-4C62-821B-BA95011E2DF6' );
function animate() {
player.renderer.render( player.scene, player.camera );
}
console.log(player.scene);
console.log(player.camera);
document.body.appendChild( player.dom );
window.addEventListener( 'resize', function () {
player.setSize( window.innerWidth, window.innerHeight );
} );
} );
</script>
</body>
</html>
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;
var dom = document.createElement( 'div' );
dom.appendChild( renderer.domElement );
this.dom = dom;
this.width = 500;
this.height = 500;
this.load = function ( json ) {
var project = json.project;
if ( project.vr !== undefined ) renderer.xr.enabled = project.vr;
if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
if ( project.toneMapping !== undefined ) renderer.toneMapping = project.toneMapping;
if ( project.toneMappingExposure !== undefined ) renderer.toneMappingExposure = project.toneMappingExposure;
if ( project.physicallyCorrectLights !== undefined ) renderer.physicallyCorrectLights = project.physicallyCorrectLights;
this.setScene( loader.parse( json.scene ) );
this.setCamera( loader.parse( json.camera ) );
this.scene=scene
this.camera=camera
this.renderer=renderer
};
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 );
}
};
var time, prevTime;
}
};
export { APP };