我正在使用此函数在圆柱体上添加纹理。
function createElementMaterial() {
THREE.ImageUtils.crossOrigin = '';
var t = THREE.ImageUtils.loadTexture( IMG_MACHINE );
t.wrapS = THREE.RepeatWrapping;
t.wrapT = THREE.RepeatWrapping;
t.offset.x = 90/(2*Math.PI);
var m = new THREE.MeshBasicMaterial();
m.map = t;
return m;
}
它正在工作并添加了纹理,但在控制台中它设置了一条警告消息。
THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.
然后关注this来自 threejs.org 的文档.我把函数改成了这个。
function createElementMaterial() {
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
IMG_MACHINE,
// Function when resource is loaded
function ( texture ) {
// do something with the texture
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.offset.x = 90/(2*Math.PI);
var material = new THREE.MeshBasicMaterial( {
map: texture
} );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
}
最佳答案
你必须从你的函数中返回一个 Material 。你可以这样做:
function createElementMaterial() {
var material = new THREE.MeshBasicMaterial(); // create a material
var loader = new THREE.TextureLoader().load(
// resource URL
IMG_MACHINE,
// Function when resource is loaded
function ( texture ) {
// do something with the texture
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.offset.x = 90/(2*Math.PI);
material.map = texture; // set the material's map when when the texture is loaded
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
return material; // return the material
}
关于javascript - 使用 THREE.TextureLoader 而不是弃用的 THREE.ImageUtils.loadTexture 时出现纹理问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41377034/