我很困惑为什么我的rectarea灯不会瞄准,它只是不起作用

时间:2017-05-11 16:44:57

标签: three.js

我已多次尝试瞄准我的矩形区域灯,但它无法正常工作。我能够使用聚光灯和目标,我不明白为什么这会起作用而另一个不会。通常,如在此示例中:threejs.org/examples/?q=obj#webgl_loader_obj2有一个对象plain。当我添加与目标相关的代码(如位置和矩阵)时,平面消失,我的OBJ也消失了。老实说,在与rectarea灯有关的问题上找不到任何东西。如果你看错了,请帮忙。谢谢。

    

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            border: none;
            cursor: default;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
        }
        #info a {
            color: #f00;
            font-weight: bold;
            text-decoration: underline;
            cursor: pointer
        }
        #glFullscreen {
            width: 100%;
            height: 100vh;
            min-width: 640px;
            min-height: 360px;
            position: relative;
            overflow: hidden;
            z-index: 0;
        }
        #example {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #000000;
        }
        #feedback {
            color: darkorange;
        }
        #dat {
            user-select: none;
            position: absolute;
            left: 0;
            top: 0;
            z-Index: 200;
        }
    </style>

</head>

<body>
    <div id="glFullscreen">
        <canvas id="example"></canvas>
    </div>
    <div id="dat">

    </div>
    <div id="info">
        <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader2 direct loader test
        <div id="feedback"></div>
    </div>

    <script src="Detector.js"></script>
    <script src="http://threejs.org/build/three.min.js"></script>
    <script src="TrackballControls.js"></script>
    <script src="MTLLoader.js"></script>
    <script src="dat.gui.min.js"></script>

    <script src="OBJLoader2.js"></script>
    <script>
        'use strict';
        var OBJLoader2Example = (function () {
            function OBJLoader2Example( elementToBindTo ) {
                this.renderer = null;
                this.canvas = elementToBindTo;
                this.aspectRatio = 1;
                this.recalcAspectRatio();
                this.scene = null;
                this.cameraDefaults = {
                    posCamera: new THREE.Vector3( 0.0, 175.0, 500.0 ),
                    posCameraTarget: new THREE.Vector3( 0, 0, 0 ),
                    near: 0.1,
                    far: 10000,
                    fov: 45
                };
                this.camera = null;
                this.cameraTarget = this.cameraDefaults.posCameraTarget;
                this.controls = null;
                this.smoothShading = true;
                this.doubleSide = false;
                this.cube = null;
                this.pivot = null;
            }
            OBJLoader2Example.prototype.initGL = function () {
                this.renderer = new THREE.WebGLRenderer( {
                    canvas: this.canvas,
                    antialias: true,
                    autoClear: true
                } );
                this.renderer.setClearColor( 0x050505 );
                this.scene = new THREE.Scene();
                this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.       cameraDefaults.far );
                this.resetCamera();
                this.controls = new THREE.TrackballControls( this.camera, this.renderer.domElement );
                var ambientLight = new THREE.AmbientLight( 0xffffff );
                var directionalLight1 = new THREE.DirectionalLight( 0xC0C090, .4 );
                var directionalLight2 = new THREE.DirectionalLight( 0xC0C090, .4 );
                var directionalLight3 = new THREE.DirectionalLight( 0xC0C090, .4 );
                var directionalLight4 = new THREE.DirectionalLight( 0xC0C090, .4 );
            directionalLight1.position.set( -100, -50, 100 );
                directionalLight2.position.set( 100, 50, -100 );
            directionalLight3.position.set( -100, -50, -100 );
                directionalLight4.position.set( 100, 50, 100 );
                /*this.scene.add(directionalLight2);
                this.scene.add(directionalLight1);
                this.scene.add(directionalLight3);
                this.scene.add(directionalLight4);*/
                var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
                this.scene.add( helper );
                var geometry = new THREE.BoxGeometry( .5, .5, .5 );
                var material = new THREE.MeshNormalMaterial();
                this.cube = new THREE.Mesh( geometry, material );
                this.pivot = new THREE.Object3D();
                this.pivot.name = 'Pivot';
                this.scene.add( this.pivot );




                var lighta = new THREE.RectAreaLight( 0xffffbb, 82, 1, 2 );
                lighta.position.set(0, 0, 1 );
                this.scene.add( lighta);
                var helper = new THREE.RectAreaLightHelper( lighta );
                //   light.target.position.set( 0, 0, 0 );
                //  lighta.target.matrixWorldNeedsUpdate();
                this.scene.add( helper );
            };

            OBJLoader2Example.prototype.initPostGL = function ( objDef ) {
                var scope = this;
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( objDef.texturePath );
                mtlLoader.setCrossOrigin( 'anonymous' );
                mtlLoader.load( objDef.fileMtl, function( materials ) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader2();
                    objLoader.setSceneGraphBaseNode( scope.pivot );
                    objLoader.setMaterials( materials.materials );
                    objLoader.setPath( objDef.path );
                    objLoader.setDebug( false, false );
                    var onSuccess = function ( object3d ) {
                        console.log( 'Loading complete. Meshes were attached to: ' + object3d.name );
                    };
                    var onProgress = function ( event ) {
                        if ( event.lengthComputable ) {
                            var percentComplete = event.loaded / event.total * 100;
                            var output = 'Download of "' + objDef.fileObj + '": ' + Math.round( percentComplete ) + '%';
                            console.log(output);
                        }
                    };
                    var onError = function ( event ) {
                        console.error( 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src );
                    };
                    objLoader.load( objDef.fileObj, onSuccess, onProgress, onError );
                });
                return true;
            };
            OBJLoader2Example.prototype.resizeDisplayGL = function () {
                this.controls.handleResize();
                this.recalcAspectRatio();
                this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );
                this.updateCamera();
            };
            OBJLoader2Example.prototype.recalcAspectRatio = function () {
                this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
            };
            OBJLoader2Example.prototype.resetCamera = function () {
                this.camera.position.copy( this.cameraDefaults.posCamera );
                this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );
                this.updateCamera();
            };
            OBJLoader2Example.prototype.updateCamera = function () {
                this.camera.aspect = this.aspectRatio;
                this.camera.lookAt( this.cameraTarget );
                this.camera.updateProjectionMatrix();
            };
            OBJLoader2Example.prototype.render = function () {
                if ( ! this.renderer.autoClear ) this.renderer.clear();
                this.controls.update();
                this.cube.rotation.x += 0.05;
                this.cube.rotation.y += 0.05;
                this.renderer.render( this.scene, this.camera );
            };
            OBJLoader2Example.prototype.alterSmoothShading = function () {
                var scope = this;
                scope.smoothShading = ! scope.smoothShading;
                console.log( scope.smoothShading ? 'Enabling SmoothShading' : 'Enabling FlatShading');
                scope.traversalFunction = function ( material ) {
                    material.shading = scope.smoothShading ? THREE.SmoothShading : THREE.FlatShading;
                    material.needsUpdate = true;
                };
                var scopeTraverse = function ( object3d ) {
                    scope.traverseScene( object3d );
                };
                scope.pivot.traverse( scopeTraverse );
            };
            OBJLoader2Example.prototype.alterDouble = function () {
                var scope = this;
                scope.doubleSide = ! scope.doubleSide;
                console.log( scope.doubleSide ? 'Enabling DoubleSide materials' : 'Enabling FrontSide materials');
                scope.traversalFunction  = function ( material ) {
                    material.side = scope.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
                };
                var scopeTraverse = function ( object3d ) {
                    scope.traverseScene( object3d );
                };
                scope.pivot.traverse( scopeTraverse );
            };
            OBJLoader2Example.prototype.traverseScene = function ( object3d ) {
                if ( object3d.material instanceof THREE.MultiMaterial ) {
                    var materials = object3d.material.materials;
                    for ( var name in materials ) {
                        if ( materials.hasOwnProperty( name ) ) this.traversalFunction( materials[ name ] );
                    }
                } else if ( object3d.material ) {
                    this.traversalFunction( object3d.material );
                }
            };
            return OBJLoader2Example;
        })();
        var app = new OBJLoader2Example( document.getElementById( 'example' ) );
        // Init dat.gui and controls
        var OBJLoader2Control = function() {
            this.smoothShading = app.smoothShading;
            this.doubleSide = app.doubleSide;
        };
        var objLoader2Control = new OBJLoader2Control();
        var gui = new dat.GUI( {
            autoPlace: false,
            width: 320
        } );
        var menuDiv = document.getElementById( 'dat' );
        menuDiv.appendChild(gui.domElement);
        var folderQueue = gui.addFolder( 'OBJLoader2 Options' );
        var controlSmooth = folderQueue.add( objLoader2Control, 'smoothShading' ).name( 'Smooth Shading' );
        controlSmooth.onChange( function( value ) {
            console.log( 'Setting smoothShading to: ' + value );
            app.alterSmoothShading();
        });
        var controlDouble = folderQueue.add( objLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
        controlDouble.onChange( function( value ) {
            console.log( 'Setting doubleSide to: ' + value );
            app.alterDouble();
        });
        folderQueue.open();
        // init three.js example application
        var resizeWindow = function () {
            app.resizeDisplayGL();
        };
        var render = function () {
            requestAnimationFrame( render );
            app.render();
        };
        window.addEventListener( 'resize', resizeWindow, false );
        console.log( 'Starting initialisation phase...' );
        app.initGL();
        app.resizeDisplayGL();
        app.initPostGL( {
            fileObj: 'ex.obj',
            fileMtl: 'ex.mtl'

        } );


    //pp.position.set( 0, 0, 0 );
        render();

    </script>
</body>

0 个答案:

没有答案