微信小程序利用three.js展示3D模型部分问题

微信小程序+three.js爬坑记录(一)

1、模型格式选择

由于小程序的内存限制比较多,稍不注意就容易溢出,所以经过测试后我选择gltf模型。不用加载贴图,而且这个格式较为通用,最关键的是真的很小。OBJ+PNG怎么转GLTF格式在我上篇帖子内有。

2、显示方式选择

three.js有一个小程序专用插件threex,移植效果还不错,但渲染出来的效果会差一点,有一层灰蒙蒙的感觉。果断选择浏览器渲染。

放个对比图:插件效果网页效果

所以我选择了跳转网页的模式,渲染效果很不错,但你会发现模型有一些变形,这是代码的问题后面会说。

3、IOS端问题发现

小程序端最后还是出现了我最害怕的情况:安卓能正常运行,苹果则不能。上面的玩偶模型只有1MB+可以正常显示,但是真人模型在10MB+,苹果系统就不能正常打开了。一开始以为是面片数太多,最后降到了50000面片数5MB左右还是打不开,就发现有些不对劲,就在网上搜查各种文档都没有解决方案。最后一次无意之中看到一个回复,让把下面这句话注销掉。

 renderer.setPixelRatio(window.devicePixelRatio);

为了防止意外,我把下面也给统统注释掉了。没想到问题真的都解决了。

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);

最后的效果图:在这里插入图片描述

包括最后的15MB+的大模型在IOS端也能够正常显示了
在这里插入图片描述文章来源地址https://www.uudwc.com/A/nPLEW/

原文地址:https://blog.csdn.net/weixin_43842262/article/details/132058679

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年10月16日 13:55
Linux下基本指令 -> ls指令 查看目录结构和文件信息
下一篇 2023年10月16日 14:55