Question

以下是使用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");
}

我正在使用这样的方法 -

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

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

Answer 1

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

首先，如果没有错误消息，我无法可靠地回答，但最可能的原因当然是文件不存在（在该路径上）。一种简单的测试方法是只创建<img src="image/myimage.jpg"/>，以编程方式或硬编码方式查看是否出现。

Answer 2

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

此问题的主要原因可能是：

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

textureLoader.load（“/ image / myimage.jpg”，...
权限错误，您必须检查权限，文件所有者和权限（644可以没问题）

其他问题可能是由虚拟主机，.htaccess或其他网络服务器配置引起的，但很难说是什么......

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

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

2 个答案: