微信跳一跳用的 three.js 3D 引擎是修改过用来适应微信小游戏的环境,分享一处需要修改的地方

2018-01-02 18:56:58 +08:00
 gzlock

直接使用原版 three.js 文件虽然可以在微信开发者工具中正常运行,但是在微信中预览的时候,只有黑屏。 在微信中无法看到报错的位置,因为连微信小游戏辅助开发环境中的 console 的 log 内容也是空的。

然后我结合微信小游戏文档的提示:不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。

和压缩过的跳一跳的 game.js 进行对比

发现 three.js

document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );

而跳一跳改成了

document.createElement('canvas')

将 three.js 全文 7 处都修改后,微信预览依然黑屏😂😂😂

这说明还有其它地方需要修改,但个人能力有限,所以建了个QQ 群 117844722,希望大家可以一起合力修改出适用于微信小游戏的 three.js 然后在 github 公开

8312 次点击
所在节点    分享发现
9 条回复
noahziheng
2018-01-02 19:47:40 +08:00
先支持一下,的确会有用
gzlock
2018-01-02 19:59:38 +08:00
我都把群设置成随意进入了,结果还是没人进群
存在感好低。。。哎
smilekung
2018-01-03 10:16:33 +08:00
需要手动创建一个 document 对象吧
```
var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === 'canvas') {
return wx.createCanvas()
}
else if (tagName === 'image') {
return wx.createImage()
}
}
}
```
smilekung
2018-01-03 10:22:27 +08:00
gzlock
2018-01-03 11:40:22 +08:00
@smilekung 当然有看文档,而且也引入了 wx-adapter,adapter 已经构建好 document 和 window 对象了吧,不再需要自己来
czywind
2018-01-04 13:23:28 +08:00
回复不了是什么原因
czywind
2018-01-04 13:24:47 +08:00
另外不建议直接改 three.js 的
document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
后续 three.js 更新又要改一次比较麻烦。
var context = canvas.getContext('webgl');
var renderer = new THREE.WebGLRenderer(context);
new THREE.WebGLRenderer 方法传入上下文参数,一般使用这样的方式创建 renderer 是不会调用到
document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
czywind
2018-01-04 13:25:38 +08:00
gzlock
2018-01-05 13:25:30 +08:00
@czywind three 的 imageloader 里也是用 createElementNS 来创建 img dom
除非去修改腾讯的 adapter,扩展一个 createElementNS 方法,就可以避免修改 three

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/419471

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX