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

Posted 2023-02-27

【中文标题】Three.js 从图像文件创建纹理

【英文标题】：Three.js create texture from image file

【发布时间】：2014-09-23 22:00:17

【问题描述】：

我在 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);

但是，我的纹理呈现黑色，图像似乎无法正确呈现。

【问题讨论】：

看看***.com/questions/7919516/using-textures-in-three-js

【参考方案1】：

将图像用作纹理的最简单方法是使用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 可以避免处理回调。

【讨论】：

那么这个答案与给定的评论有何不同？