Three.js从图像文件创建纹理

时间:2014-07-31 19:46:51

标签: javascript three.js textures

我在使用Three.js中的图像文件创建纹理时遇到了一些麻烦。我有一个函数来创建一个如下所示的网格:

    var image = document.createElement('img');
    image.src = imageFile;
    var texture = new THREE.Texture(image);
    var mat = new THREE.MeshPhongMaterial();
    mat.map = texture;

    var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), mat);
    var plane = mesh;
    plane.position.x = 0;
    scene.add(plane);

然而,我的纹理呈现黑色,图像似乎无法正确呈现。

1 个答案:

答案 0 :(得分:2)

将图像用作纹理的最简单方法是使用THREE.ImageUtils.loadTexture(url, mapping, onLoad, onError)加载它,这是一个示例:

var mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( 1, 1, 1, 1 ),
    new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('/my-image.jpg') })
);

THREE.Texture构造函数接受图像作为其第一个参数,我认为您遇到的问题是因为您没有等待图像完成加载。使用ImageUtils可以避免必须处理回调。