三.js异步纹理加载问题答案

【问题标题】：Three.js async texture load problems三.js异步纹理加载问题
【发布时间】：2022-01-25 22:40:54
【问题描述】：

我正在纹理加载器的回调函数中创建几何图形：

new RGBELoader().load('textures/image.hdr', function(hdrmap) {

        //Process Texture
        let envmap = envmaploader.fromCubemap(hdrmap);
        let texture = new THREE.CanvasTexture(new FlakesTexture());
        
        const physical_material = {
            color: 0xAFAFAF,
            normalMap: texture,
            normalScale: new THREE.Vector2(0.15,0.15),
            envMap: envmap.texture
        };
       
       const ring = new THREE.Mesh(new THREE.TorusGeometry(20, 1, 64, 256), 
                    new THREE.MeshPhysicalMaterial(physical_material));
       scene.add(ring);
 });

问题：

function animate() {
        const frame = requestAnimationFrame(animate);
        TWEEN.update();

        //Problem:
        ring.rotation.x += 0.005;
        ring.rotation.y += 0.005;

        renderer.render(scene, camera);
    }

animation() 函数是在回调函数之外定义的，并使用运行时不可用的“ring”...

我该如何解决？我是否需要将所有内容都放在 .load 回调函数中，如果需要：函数呢？？？

感谢大家的帮助:)。

【问题讨论】：

标签： ajax asynchronous three.js

【解决方案1】：

...我的错。

我只是添加了

let ring;

在调用加载程序之前。在加载器内部，我刚刚使用新的几何/网格初始化了“环”：

ring = new THREE.Mesh(new THREE.TorusGeometry(20, 1, 64, 256), new THREE.MeshPhysicalMaterial(physical_material));

对不起:)

【讨论】：