三 js Texture Loader 无法加载纹理

Question

我正在尝试使用三个 js 加载图像（我想要与此项目相同的结果：https://github.com/brunoimbrizi/interactive-particles）。 但是当我运行项目时，代码不想加载图像并直接显示错误。 这是我的代码：

init(src) {
        const loader = new THREE.TextureLoader();

        loader.load('images/sample-01.png',
            (texture) => {
                console.log('YOOOO');
                this.texture = texture;
                this.texture.minFilter = THREE.LinearFilter;
                this.texture.magFilter = THREE.LinearFilter;
                this.texture.format = THREE.RGBFormat;

                this.width = texture.image.width;
                this.height = texture.image.height;

                this.initPoints(true);
                this.initHitArea();
                this.initTouch();
                this.resize();
                this.show();
            },
            function (err) {
                console.log('LOADING');
            },

            // onError callback
            function (err) {
                console.error('An error happened.', err);
            });
    }

我确信图像路径是正确的，所以很遗憾我对这个问题有所了解。 这是错误：

我在 Vue js 上运行这个项目，使用 npm run dev 所以我在服务器上。

我希望有人能够帮助我，我正在为此工作 3 天......

谢谢！

Answer 1

尝试在不调用任何外围方法的情况下分配加载的纹理。像这样简单的事情：

const loader = new THREE.TextureLoader();
const texMap = loader.load('images/sample-01.png');

new MeshBasicMaterial({map: texMap});

我很确定如果图像 URL 正确，并且上面的简单测试有效，那么问题来自以下额外方法之一：

this.initPoints(true);
this.initHitArea();
this.initTouch();
this.resize();
this.show();