V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gzlock
V2EX  ›  分享发现

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

  •  
  •   gzlock · 2018-01-02 18:56:58 +08:00 · 8181 次点击
    这是一个创建于 2278 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    9 条回复    2018-01-05 13:25:30 +08:00
    noahziheng
        1
    noahziheng  
       2018-01-02 19:47:40 +08:00 via Android
    先支持一下,的确会有用
    gzlock
        2
    gzlock  
    OP
       2018-01-02 19:59:38 +08:00
    我都把群设置成随意进入了,结果还是没人进群
    存在感好低。。。哎
    smilekung
        3
    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
        4
    smilekung  
       2018-01-03 10:22:27 +08:00
    gzlock
        5
    gzlock  
    OP
       2018-01-03 11:40:22 +08:00 via Android
    @smilekung 当然有看文档,而且也引入了 wx-adapter,adapter 已经构建好 document 和 window 对象了吧,不再需要自己来
    czywind
        6
    czywind  
       2018-01-04 13:23:28 +08:00
    回复不了是什么原因
    czywind
        7
    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
        8
    czywind  
       2018-01-04 13:25:38 +08:00
    gzlock
        9
    gzlock  
    OP
       2018-01-05 13:25:30 +08:00 via Android
    @czywind three 的 imageloader 里也是用 createElementNS 来创建 img dom
    除非去修改腾讯的 adapter,扩展一个 createElementNS 方法,就可以避免修改 three
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2749 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:35 · PVG 20:35 · LAX 05:35 · JFK 08:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.