threejs edior跟写代码结合

2021-02-18 18:34:29 阅读：209 来源： 互联网

标签：threejs 代码 scene project player edior camera renderer var

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

标签：threejs,代码,scene,project,player,edior,camera,renderer,var
来源： https://www.cnblogs.com/newmiracle/p/14413037.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

threejs edior跟写代码结合