时间戳

首页 > 解决方案 > 三 js Texture Loader 无法加载纹理

google-chrome - 三 js Texture Loader 无法加载纹理

问题描述

我正在尝试使用三个 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天......

谢谢 ！

标签： google-chromevue.jsthree.jstexturesloader

解决方案

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

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();

推荐阅读