threejs：试图将 objloader 传递给 var

Question

我正在尝试将 objLoader 命令的结果传递给 var 以便在动画中使用它。因此，当我将 console.log 放入 objLoader 函数中时，我得到了对象。但是当我把 console.log 放在函数之外时，我得到了 undefined.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body {height: 100%}
        body {margin: 0}
        #cnv {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="cnv">
    </canvas>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
    <script src='https://unpkg.com/three@0.128.0/examples/js/loaders/OBJLoader.js'></script>
    <script type="text/javascript">
            var scene = new THREE.Scene(),
            sun = new THREE.DirectionalLight(0xffffff, 1),
            camera = new THREE.PerspectiveCamera(30, 1, 0.1, 10),
            renderer = new THREE.WebGLRenderer({canvas:cnv}),
            boxGeom = new THREE.BoxGeometry(.5, .5, .5),
            mtrlStdr = new THREE.MeshStandardMaterial(),
            box0 = new THREE.Mesh(boxGeom, mtrlStdr),
            minLoader = new THREE.OBJLoader(),
            minObj,
            canvasResize = function () {
                var canvas = renderer.domElement,
                width = canvas.clientWidth,
                height = canvas.clientHeight;
                if (canvas.width !== width || canvas.height !== height) {
                    renderer.setSize(width, height, false);
                    camera.aspect = width / height;
                    camera.updateProjectionMatrix();
                }
            };
            sun.position.set(-5, 10, 6);
            sun.target.position.set(0, 0, 0);
            scene.add(sun,sun.target,box0,camera);
            minLoader.load('models/min.obj', function (obj) {
                scene.add(obj);
                minObj=obj;
            console.log(minObj);
            });
            camera.position.z = 6;
            renderer.render(scene, camera);
            function animate(time) {
                time *= 0.001;
                box0.rotation.x = time * 0.5;
                box0.rotation.y = time * 1;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
            requestAnimationFrame(animate);
            window.addEventListener('load', canvasResize, false);
            window.addEventListener('resize', canvasResize, false);
    </script>
</body>
</html>

谁能帮帮我？

obj 文件位于：https://banner-testing.neocities.org/models/min.obj

干杯

迈克尔

所以在 Mugen 的回答之后，我稍微更改了代码的结尾，现在它可以工作了。呜呜呜！感谢无限。

这是代码（只有我更改的位）

function loadObjs () {
                minLoader.load(
                    'models/min.obj',
                    function (obj) {
                        scene.add(obj);
                        minObj=obj;
                        requestAnimationFrame(animate);
                    }
                );
            };
            function animate(time) {
                time *= 0.001;
                minObj.rotation.x = time * 0.5;
                minObj.rotation.y = time * 1;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            };
            function winit () {
                canvasResize();
                loadObjs ();
            };
            window.addEventListener('load', winit, false);
            window.addEventListener('resize', canvasResize, false);

Answer 1

But when I put the console.log outside the function I get undefined.

发生这种情况是因为 OBJ 资产是异步加载的。这意味着如果您在加载过程完成之前访问 minObj，则会发生运行时错误，因为变量仍然是 undefined.

一个简单的解决方案是在访问之前执行检查 minObj:

if ( minObj !== undefined ) console.log( minObj );

但是，最好在 onLoad() 回调中启动动画，这样可以保证 minObj 具有有效值。

threejs：试图将 objloader 传递给 var

threejs : trying to pass objloader to a var

svg

resize

three.js

gsap