2015-07-22 77 views
1

我想使用three.js引擎将纹理应用到planeGeometry。 我应该看到一个足球场,我实际上看到黑色。three.js使用纹理贴图从JPG图像即将黑色

如果我用color:0x80ff80取代map:texture参数,我得到一个纯绿色的字段,证明几何体在正确的位置。

该页面包含一个出现在任何脚本之前的文件。我可以显示该图像,证明图像没有问题。

这些文件由http服务器在本地提供。

下面是我用来构建材质和PlaneGeometry的代码。任何想法赞赏。谢谢。

function buildField(fieldLength, fieldWidth, scene) { 
    var image = document.getElementById("fieldTexture"); 
    var texture = new THREE.Texture(image); 
    texture.minFilter = THREE.LinearFilter; 
    var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5); 
    var material = new THREE.MeshBasicMaterial({map:texture, side:THREE.DoubleSide}); 
    var field = new THREE.Mesh(geometry, material); 
    field.rotation.x = -Math.PI/2; 
    scene.add(field); 
} 

回答

2

试试这个,自己three.js所方法通常更好地工作...:

texture = THREE.ImageUtils.loadTexture('field.png'); 
    material = new THREE.MeshBasicMaterial({map: texture}); 
    var field = new THREE.Mesh(geometry, material); 
1

THREE.ImageUtils已经过时。 (source
使用THREE.TextureLoader()。load('field.png')改为