zoukankan html css js c++ java

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

如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。)
作者：newmiracle
出处：https://www.cnblogs.com/newmiracle/

查看全文

相关阅读:
linux学习之路第八天（linux文件权限详解）
linux学习之路第八天(组管理和权限管理）
python 多线程示例
 python scapy 网卡发包
 python scapy 网卡抓包
 python 返回数组的索引
 MPLS 网络中的 MTU
mysql 导入导出sql文件
 linux 修改MTU值
 ovs 源mac，目的src 互换

原文地址：https://www.cnblogs.com/newmiracle/p/14413037.html