三.js, OBJLoader ->未捕获的 ReferenceError:未定义对象 [英] Three.js, OBJLoader -> Uncaught ReferenceError: object is not defined

问题描述

我的代码如下.当我取消注释时object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05; 来自 render() 或 animate() 函数 I得到 "未捕获的 ReferenceError: object is not defined " 错误.

My code below. When I uncomment object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05; from render() or animate() function I get "Uncaught ReferenceError: object is not defined " error.

我尝试了任何方法，我的 animate() 函数甚至在加载程序回调中，我尝试将 Three.js 更改为旧版本(当前使用 r59)，希望 var object = event.content; 可能会解决，没有效果.

I tried anything, my animate() function is even in loader callback, I tried changing three.js to older version (currently using r59), hoped var object = event.content; might solve it, no effect.

我想添加单击并移动鼠标以旋转模型"的可用性，当它的立方体时我没有问题.

I want to add "click and move your mouse to rotate model" usability, I have no problems with that when its cube.

但它对我的 *obj 不起作用.

but it just won't work with my *obj.

帮助?=)

        var scene, camera, renderer, loader, ambient, directionalLight;

        var windowHalfX = 300;
        var windowHalfY = 145;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        init();

        function init() {
            container = document.createElement( 'div' );
            document.getElementById("3dbox").appendChild(container);

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 45, 600 / 290, 0.1, 1000 );
            //camera.position.set( -15, 10, 15 );
            renderer = new THREE.WebGLRenderer();

            renderer.setSize( 600, 290 );
            container.appendChild( renderer.domElement );

            // MODEL
            var loader = new THREE.OBJMTLLoader();
            loader.addEventListener( 'load', function ( event ) {
                var object = event.content;
                scene.add( object );
                animate();
            });
            loader.load( '<?php bloginfo('template_directory'); ?>/obj/female02.obj', '<?php bloginfo('template_directory'); ?>/obj/female02.mtl' );

            camera.position.z = 100;
            camera.position.y = 10;

            ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );

            directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
        }

        function render() {
            //object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05;
            renderer.render(scene, camera);
        }

        function animate() {
            //object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05;
            requestAnimationFrame( animate );
            render();
        }

        function onDocumentMouseDown( event ) {

            event.preventDefault();

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mouseout', onDocumentMouseOut, false );

            mouseXOnMouseDown = event.clientX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;

        }

        function onDocumentMouseMove( event ) {

            mouseX = event.clientX - windowHalfX;

            targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

        }

        function onDocumentMouseUp( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentMouseOut( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentTouchStart( event ) {

            if ( event.touches.length === 1 ) {

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

        }

        function onDocumentTouchMove( event ) {

            if ( event.touches.length === 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

            }

        }

推荐答案

这是因为对象"是回调函数中的局部变量.在全球范围内对其进行处理:

It is because "object" is a local variable in your callback function. Decare it globally:

var object;

然后在您的回调中，

object = event.content;

three.js r.59

three.js r.59

这篇关于三.js, OBJLoader ->未捕获的 ReferenceError:未定义对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！