threejs edior跟写代码结合

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 };

 

posted @ 2021-02-18 18:22  newmiracle宇宙  阅读(229)  评论(0)  编辑  收藏  举报