javascript - ThreeJs : loader not loading correctly

Question

我正在尝试使用 Three.JS 将纹理应用于我的球体但是，在加载图像之后。函数内的内容将不会运行。 [那是我的问题]。我确实检查了 chrome 中的网络选项卡，并且正在加载时间图像。

想知道为什么函数没有执行。

我尝试使用下面的这段代码。

import * as THREE from 'three';
var scene, camera, light, renderer, balltex;


load();

function load() {
    var loader;

    loader = new THREE.TextureLoader(new THREE.LoadingManager());

//  # # #  THIS PART HERE IS THE ISSUE # # #
    loader.load('textures/flakes.png', function(obj) {
        console.log("not running here")
        balltex = obj;
        init();
        console.log("init")
        animate();
    });
}

function init() {
    var height = 500, width = 500, bg = '#000000';
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, height/width, 1, 10000);
    camera.position.set(1.5, 1.5, 1.5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);
    light = new THREE.AmbientLight(0xffffff);
    scene.add(light);
    var ballmat = new THREE.MeshBasicMaterial({
        map:    balltex
    });
    var ballgeo = new THREE.SphereGeometry( 0.3, 20, 20 );
    var ball = new THREE.Mesh( ballgeo , ballmat );
    scene.add(ball);
    renderer = new THREE.WebGLRenderer({ antialias: true } );
    renderer.setClearColor(bg);
    renderer.setSize(width, height);
    var d = document.createElement('div');
    console.log("here",d)
    document.body.appendChild(d);
    d.appendChild(renderer.domElement);
    var c = document.getElementsByTagName('canvas')[0];
    c.style.width = width + 'px';
    c.style.height = height + 'px'
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

“我希望该功能能够运行，但由于某种原因它没有运行。”

我没有使用 THREE.JS CDN 进行编辑，但是我在 npm 上使用它。

谢谢，

Answer 1

1. 您在声明函数之前调用了 load()，因此 JavaScript 不知道您在引用什么。
2. 您不需要将 new THREE.LoadingManager() 传递给纹理加载器。
3. 您确定正在加载文件 textures/flakes.png 吗？您在开发人员控制台中收到任何错误吗？如果文件不在该位置，则不会调用回调函数。

// 1. Define function first
function load() {
    var loader = new THREE.TextureLoader();

    // Callback is triggered if loading was successful
    loader.load('textures/flakes.png', function(obj) {
        console.log("Should work now")
        balltex = obj;
        init();
        animate();
    });
}

// 2. Call function after it's been defined
load();