图像渲染无法在three.js中使用TextureLoader

Following is my method for adding an image using three.js -

以下是我使用three.js添加图像的方法 -

rendererModule.addImage = function (primitive){
    var self = this;
    var textureLoader = new THREE.TextureLoader();
    console.log("HERE 1");
    textureLoader.load("image/myimage.jpg", function(map){
        console.log("HERE 2");
        map.minFilter = THREE.LinearFilter;
        var mat = new THREE.SpriteMaterial({map:map, color:0xFFFFFF, fog:true});
        var sprite = new THREE.Sprite(mat);
        sprite.name = primitive.id;
        self.setProperties(sprite,primitive);
        sprite.position.z = -15;
        var distance = camera.position.distanceTo(sprite.position);
        var halfHeight = distance * Math.atan( camera.fov/2 * Math.PI / 180 );
        sprite.scale.x = halfHeight * 2;
        sprite.scale.y = halfHeight * 2;
        scene.add(sprite);
        self.renderView();
    });
    console.log("HERE 3");
}

and I am using the method like this -

我正在使用这样的方法 -

workitems.forEach(function(item, index, array){
    if(item['type'] === "planar-item" ) {
        vedit.renderer.addPlane(item);
    } else if(item['type']==="image-item"){
            vedit.renderer.addImage(item);     
    }
});

Though my plane method is working fine but not the image one.....another surprise is that "HERE 1" & "HERE 3" is printing in the console, but not 2. Let me know what I am doing wrong here.

虽然我的飞机方法工作正常,但不是图像...另一个惊喜是“HERE 1”和“HERE 3”在控制台中打印,但不是2.让我知道我在这里做错了什么。

2 个解决方案

#1

The second question has the easier answer: function(map) {...} is a callback for an asynchronous operation, so inline code before and after it is guaranteed to run first (the Javascript engine won't pick up async operations until after the current context finishes) and it's not necessarily the case that it will run at all. Since it's an "onload" in this case, it won't run if the resource is never loaded. You probably want to put an onError callback in there to see what's going on.

第二个问题有更简单的答案:function(map){...}是异步操作的回调,因此保证在它之前和之后的内联代码首先运行(Javascript引擎在之后才会获取异步操作当前的上下文结束了)并不一定是它会运行的情况。因为在这种情况下它是“onload”,所以如果从未加载资源,它将不会运行。你可能想在那里放一个onError回调来看看发生了什么。

As for the first, I can't reliably answer that without an error message, but the most likely cause of course is just that the file doesn't exist (at that path). An easy way to test is to just create an <img src="image/myimage.jpg"/>, programatically or hard-coded, and see if it appears.

至于第一个,我无法在没有错误消息的情况下可靠地回答,但最可能的原因当然是文件不存在(在该路径上)。一种简单的测试方法是创建一个图像渲染无法在three.js中使用TextureLoader ,以编程方式或硬编码方式,看看它是否出现。

#2

In according to other answer the problem is most likely the opening failure of the image; you can easly check in your browser developer tool in the network section.

根据其他答案,问题很可能是图像的开启失败;您可以轻松检查网络部分中的浏览器开发人员工具。

The main causes of this issue can be:

这个问题的主要原因可能是:

Wrong path, if your image path is http://yoursite/imahe/myimage.jpg try to add slash in your load parameter

错误的路径,如果您的图像路径是http://yoursite/imahe/myimage.jpg尝试在您的加载参数中添加斜杠

textureLoader.load("/image/myimage.jpg", ...
Privilege error, you have to check the privilege, the owner of the file and permission (644 can be fine)

权限错误,你必须检查权限,文件的所有者和权限(644可以没问题)

Other problems can be caused bywrong virtualhost, .htaccess or other webserver configuration, but is hard to say what...

虚拟主机,.htaccess或其他网络服务器配置错误可能导致其他问题,但很难说是什么......

Notice that if you try lo load image from other domain (like http://lorempixel.com/image_output/nature-q-c-150-150-8.jpg) you have a cross-domain error and the load fail!

请注意,如果您尝试从其他域加载图像(例如http://lorempixel.com/image_output/nature-q-c-150-150-8.jpg),则会出现跨域错误,并且加载失败!

#1

#2