问题描述
限时送ChatGPT账号..我使用这个函数在圆柱体上添加纹理.
function createElementMaterial() {三.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;返回 m;}
它正在工作并添加纹理,但在控制台中它设置了一条警告消息.
<块引用>THREE.ImageUtils.loadTexture 已被弃用.用THREE.TextureLoader() 代替.
然后按照
解决方案你必须从你的函数中返回一个材料.你可以这样做:
function createElementMaterial() {var material = new THREE.MeshBasicMaterial();//创建材质var loader = new THREE.TextureLoader().load(//资源地址IMG_MACHINE,//资源加载时的函数功能(纹理){//对纹理做一些事情texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;texture.offset.x = 90/(2*Math.PI);material.map = 纹理;//加载纹理时设置材质的贴图},//下载过程中调用的函数函数 ( xhr ) {console.log( (xhr.loaded/xhr.total * 100) + '%loaded' );},//下载错误时调用的函数函数 ( xhr ) {console.log('发生错误');});退回材料;//返回材料}
I was using this function to add Texture on a Cylinder.
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;
}
which is working and adds Texture, but in console it sets a warning message.
THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.
Then following this documentation from threejs. I changed the function to this.
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' );
}
);
}
With this code I am not being able to get that texture wrapping cylinder. Here's the before and after image. TIA.
解决方案You have to return a material from your function. You can do it like this:
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
}
这篇关于在不推荐使用的 THREE.ImageUtils.loadTexture 上使用 THREE.TextureLoader 时的纹理问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论