Question

以下是我用于使用obj将WebGL文件加载到我的网络浏览器中的脚本。我目前正在缩放对象并为其设置动画。我知道所有动画代码都应该进入render( )循环函数，但当我尝试在循环中使用object variable时，我被告知它是undefined。任何人都可以向我解释原因吗？我可以从那里引用我的scene和camera变量。

<script>
                //Variables
                var container, stats;
                var camera, scene, renderer;
                var mouseX = 0, mouseY = 0;
                var windowHalfX = window.innerWidth/2;
                var windowHalfY = window.innerHeight/2;
                init();
                animate();

                //Initialisation
                function init(){
                    container = document.createElement('div');
                    document.body.appendChild(container);
                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
                    camera.position.z = 2;

                    //scene
                    scene = new THREE.Scene();

                    //Light
                    var ambient = new THREE.AmbientLight(0x101030);
                    scene.add(ambient);
                    var directionalLight = new THREE.DirectionalLight(0xffeedd);
                    directionalLight.position.set(1,0,1);
                    scene.add(directionalLight);

                    //Texture
                    var manager = new THREE.LoadingManager();
                    manager.onProgress = function ( item, loaded, total ) {
                        console.log("Loading: " + item, loaded, total );
                    };

                    var texture = new THREE.Texture();
                    var loader = new THREE.ImageLoader(manager);
                    loader.load('skin.jpg', function(image){
                        texture.image = image;
                        texture.needsUpdate = true;
                    });

                    //Model
                    var loader = new THREE.OBJLoader(manager);
                    loader.load('test.obj', function(object){
                        object.traverse(function(child){
                                if(child instanceof THREE.Mesh){
                                    //child.material.map = texture;
                                }
                        }); 

                        //Resize the object...
                        object.position.y = .10;
                        object.position.x += .10;

                        //Scale
                        object.scale.x = 0.5;
                        object.scale.z = 0.5;
                        object.scale.y = 0.5;

                        console.log(object);

                        scene.add(object);
                    });

                    //Renderer
                    renderer = new THREE.WebGLRenderer();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    renderer.setClearColorHex( 0xffffff, 1 );
                    container.appendChild(renderer.domElement);

                    //Event Listeners
                    //document.addEventListener('mousemove', onDocumentMouseMove, false);
                    window.addEventListener('resize', onWindowResize, false);
                }


                //Declaring Event Listeners
                function onWindowResize(){
                    windowHalfX = window.innerWidth/2;
                    windowHalfY = window.innerHeight/2;
                    camera.aspect = window.innerWidth/window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                }

                function onDocumentMouseMove(event){
                    mouseX = (event.clientX - windowHalfX)/2;
                    mouseY = (event.clientY - windowHalfY)/2;
                }
                //Declaring Event Listeners

                //Animation
                function animate(){
                    requestAnimationFrame(animate);
                    render();
                }

                function render(){
                    camera.position.x += (mouseX - camera.position.x) * .05;
                    camera.position.y += (mouseY - camera.position.y) * .05;
                    camera.lookAt(scene.position);
                    renderer.render(scene, camera);
                }
            </script>

问题在于：不能console.log(object)或其他任何内容。

function render(){
                        camera.position.x += (mouseX - camera.position.x) * .05;
                        camera.position.y += (mouseY - camera.position.y) * .05;
                        camera.lookAt(scene.position);

                        renderer.render(scene, camera);
                    }

Answer 1

你可能不熟悉JavaScript，也不了解那里的变量范围。您的：

loader.load('test.obj', function(object){

表示object仅在您声明的函数范围内已知。

一种方法是在开始时创建另一个页面全局变量：

<script>
            //Variables
            var loadedObject = null;

然后在函数中分配给它：

loader.load('test.obj', function(object){
    loadedObject = object;

然后您可以在loadedObject功能中使用render()。在尝试使用之前，请务必检查它是否已定义，因为加载需要时间：

function render() {
    if ( loadedObject ) {
         // do something with it
    }

使用Three.JS无法为OBJ设置动画，即使它已在浏览器中加载

1 个答案: