V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2518 天前的主题，其中的信息可能已经有所发展或是发生改变。

直接使用原版 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 公开

第 1 条附言 · 2018-01-04 03:32:04 +08:00

来自群友 毒药的药 分享

将此行代码（各个Three.js的版本对应行数不同，所以无法提供具体行数，请善用文本搜索功能）

var version = parseFloat( /^WebGL\ ([0-9])/.exec( gl.getParameter( gl.VERSION ) )[ 1 ] );

改为

var version = 1.

即可在真机微信预览不读取外部纹理文件的3D场景。

TODO

Three.js的ImageLoader需要适配微信小游戏

欢迎进 QQ群 117844722 交流或提交各种有效的修改

任何有效的修改都会记录到GitHub项目 https://github.com/threewx/three.js

three

微信

修改

API

9 条回复 • 2018-01-05 13:25:30 +08:00

noahziheng

2018-01-02 19:47:40 +08:00 via Android

先支持一下，的确会有用

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

可以看看微信自己介绍 https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/base/adapter.html?t=201812

gzlock

2018-01-03 11:40:22 +08:00 via Android

@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

自己写的一篇： http://blog.csdn.net/czy_csd/article/details/78956852

gzlock

2018-01-05 13:25:30 +08:00 via Android

@czywind three 的 imageloader 里也是用 createElementNS 来创建 img dom
除非去修改腾讯的 adapter，扩展一个 createElementNS 方法，就可以避免修改 three

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

TODO