1

我正在尝试在具有不透明度的纹理上应用颜色，但是当我添加一些用于设置颜色的代码时，它显示错误“未捕获的 TypeError：object.traverse 不是函数”。

色标：

objLoader.load( 'demo table/demo table.obj', function ( object ) {

               object.traverse( function ( child ) {
                         if ( child instanceof THREE.Mesh ) {
                              child.material.ambient.setHex(0xFF0000);
                              child.material.color.setHex(0x00FF00);
                             }
                         } );

                object.position.y = 0;
                scene.add( object );                
        } );

上面的代码给了我错误。

完整代码：

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


        <script src="three.js"></script>
        <script src="TrackballControls.js"></script>
        <script src="MTLLoader.js"></script>
        <script src="dat.gui.min.js"></script>
        <script src="LoaderSupport.js"></script>
        <script src="Detector.js"></script>
        <script src="OBJLoader2.js"></script>
        <script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
        <script src="http://threejs.org/examples/js/WebGL.js"></script>
        <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>



    <script>

        'use strict';


        var OBJLoader2Example = function ( elementToBindTo ) {
            this.renderer = null;
            this.canvas = elementToBindTo;
            this.aspectRatio = 1;
            this.recalcAspectRatio();

            this.scene = null;
            this.cameraDefaults = {
                posCamera: new THREE.Vector3( 0.0, 125.0, 500.0 ),
                posCameraTarget: new THREE.Vector3( 50, 0, 50 ),
                near: 0.1,
                far: 10000,
                fov: 15
            };
            this.camera = null;
            this.cameraTarget = this.cameraDefaults.posCameraTarget;

            this.controls = null;
        };

        OBJLoader2Example.prototype = {

            constructor: OBJLoader2Example,

            initGL: function () {
                this.renderer = new THREE.WebGLRenderer( {
                    canvas: this.canvas,
                    antialias: true,
                    autoClear: true
                } );
                this.renderer.setClearColor( 0xefc586 );

                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( 0x6c6c6c );
                var directionalLight1 = new THREE.DirectionalLight( 0xffffff );
                var directionalLight2 = new THREE.DirectionalLight( 0xffffff );

                directionalLight1.position.set( -100, -50, 100 );
                directionalLight2.position.set( 100, 50, -100 );

                this.scene.add( directionalLight1 );
                this.scene.add( directionalLight2 );
                this.scene.add( ambientLight );

            },

            initContent: function () {

                var modelName = 'demo_table';
                this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );

                var scope = this;
                var objLoader = new THREE.OBJLoader2();

                var callbackOnLoad = function ( event ) { 
                    scope.scene.add( event.detail.loaderRootNode );
                    console.log( 'Loading complete: ' + event.detail.modelName );
                    scope._reportProgress( { detail: { text: '' } } );


                };

                var onLoadMtl = function ( materials ) {
                    objLoader.setMaterials( materials );
                    objLoader.setModelName( modelName );
                    objLoader.setLogging( true, true );

                    objLoader.load( 'demo table/demo table.obj', function ( object ) {

               object.traverse( function ( child ) {
                         if ( child instanceof THREE.Mesh ) {
                              child.material.ambient.setHex(0xFF0000);
                              child.material.color.setHex(0x00FF00);
                             }
                         } );

                object.position.y = 0;
                scene.add( object );                
        } );
                };

                objLoader.loadMtl( 'demo table/demo table.mtl', null, onLoadMtl );
            },

            _reportProgress: function( event ) {
                var output = THREE.LoaderSupport.Validator.verifyInput( event.detail.text, '' );
                console.log( 'Progress: ' + output );

            },

            resizeDisplayGL: function () {
                this.controls.handleResize();

                this.recalcAspectRatio();
                this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );

                this.updateCamera();
            },

            recalcAspectRatio: function () {
                this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
            },

            resetCamera: function () {
                this.camera.position.copy( this.cameraDefaults.posCamera );
                this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );

                this.updateCamera();
            },

            updateCamera: function () {
                this.camera.aspect = this.aspectRatio;
                this.camera.lookAt( this.cameraTarget );
                this.camera.updateProjectionMatrix();
            },

            render: function () {
                if ( ! this.renderer.autoClear ) this.renderer.clear();
                this.controls.update();
                this.renderer.render( this.scene, this.camera );
            }

        };

        var app = new OBJLoader2Example( document.getElementById( 'example' ) );

        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.initContent();

        render();

    </script>
</body>

错误 SS： 错误信息

4

0 回答 0