使用网络图片更新模型贴图
输入“/”快速插入内容
使用网络图片更新模型贴图
使用网络图片更新模型贴图
用户845用户8452024年5月14日修改
脚本文件下载
utils.js
7.41KB
setTexture.js
1.98KB
脚本使用
代码块
import {getTextureByUrl, setTexture} from './setTexture';
await getTextureByUrl('https://ar-scene-source.nosdn.127.net/80556b94382cbee30d317cf623361110.png');
setTexture(this.mainKMD);//this.mainKMD 为要替换贴图的模型
修改shader对应属性
常见问题
1.
贴图上下翻转了
答：方式一，如果是片，可以直接上下翻转模型；
代码块
// 视频播放上下翻转
this.videoPlay.scale.set(
this.videoPlay.scale.x,
-this.videoPlay.scale.y,
this.videoPlay.scale.z,
);
或this.videoPlay.scale.y = -this.videoPlay.scale.y;
方式二，在进行canvas绘制时进行翻转绘制；
代码块
//实现材质的图片，根据url转成imageData
async function giHttpURLtoImgData(url) {
toTexContext2d.clearRect(0, 0, toTexCanvas.width, toTexCanvas.height);
const image = await createImage(toTexCanvas, url);
// 绘制倒立图像
toTexContext2d.scale(1, -1);
toTexContext2d.drawImage(image, 0, -image.width);
toTexContext2d.scale(1, -1);
let imageData = toTexContext2d.getImageData(0, 0, image.width, image.height);
return imageData;
}
方式三，在setTexture的imgdataToDataTexture方法中，进行设置texture.flipY = true
💡
方式三，之所以放在方式三，是因为flipY 属性设置为ture时和底层算法冲突，会造成摄像机画面镜像和在进行贴图更新时画面闪烁一下的现象。如果只在加载关闭前设置一次贴图可以使用方式三。其他请选择前两种方式。
2.
替换贴图后模型看不见了
代码块
// skinnedMesh在特殊视角时会被剔除，加强制取消剔除
const shugan = this.scene.getChildByName('shugan');
shugan.frustumCulled = false;