Javascript Three.js从图像文件创建纹理
从Three.js中的图像文件创建纹理时遇到一些问题。我有一个创建网格的函数,如下所示:Javascript Three.js从图像文件创建纹理,javascript,three.js,textures,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
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);
但是,我的纹理呈现黑色,图像似乎无法正确渲染。将图像用作纹理的最简单方法是使用
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
可以避免处理回调。看看这个答案与给定的注释有何不同?