webgl调试

起初使用threejs 在小程序里面调试,明明是按着官方的文档来,但是会发现开发者工具上面会提示getContext,经过一翻摸索,发现webgl调试只能在手机端调试。
总结:webgl 调试在微信开发者工具中不支持调试,只能在手机上预览,调试起来起来很慢。每次调试都要不停的按编译,然后手机上等个几十秒,开发效率来说贼慢。

threejs api 部分

api 部分是探索最久的,一部分自己不熟悉threejs,也不熟悉;游戏开发这部分,二来开发中有很bug要不停找原因,找方法,相对来说比较慢。
起初兼容threejs ,threejs 中有一些document和window对象的方法,后来找了个weapp-adapter 来兼容,但是慢慢看 weapp-adapter 是官方对于微信小游戏的兼容,
小程序中少来大量api。后来用小游戏使用来threejs 写了个demo,但是小游戏中又不能滚动之类的window属性。。。就又回小程序这块。
关于threejs 部分,看了,使用addEventListener 这个api的都要注释掉(因为没有dom和window对象,也没有监听的方法),特别是加载贴图和手势库需要修改源码。

加载贴图等时候会调用document.createElementNS(用来创建贴图)。
贴图可以用canvas.createImage 方法代替,要修改源码. 实例化的时候传入canvas参数。




虽然没有error,但是会提示WEBGL_depth_texture ANGLE_instanced_arrays OES_texture_float_linear ...等,这些小程序不支持

至于手势库最难,小程序canvas控制都放组件里面,就算获得canvas对象,打印出来也只是canvas视图(VirtualDOM)的属性,想要给视图绑定方法只能在视图层里面注册(不能在逻辑层里面注册)。
因而可能要自己写一套符合canvas 和 threejs 的手势库(如图1)。注册好的方法还要注入threejs里面~~



初始化的时候小程序视图层(View)和逻辑层(App Service)是分开的,视图层和逻辑层的交互通过jsbridge 通信如下图。

自己实现3D场景

自己事项3D场景的话,要自己写一个类似OrbitControls的threejs的插件,目前小程序上还木有类似的插件,基本没得搞。

总结

基于微信开发车配小程序,如果是基于threejs,能找到一个合适的手势库和贴图方法,有可能能实现。

小程序中使用threejs的更多相关文章

  1. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  2. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  3. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

  4. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  5. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  6. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  7. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  8. 微信小程序中实现微信支付

    最近在做微信小程序,今天刚好做到小程序里的微信支付这块,踩过不少坑,特此写个博客记录下,希望能帮到其它人吧. 我总结了一下,小程序中的微信支付和之前其它的公众号里的微信支付有两个区别,第一就是小程序必 ...

  9. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

随机推荐

  1. 【python之路21】用户登陆程序函数

    一.用户登陆函数实例 1.注意:以后写函数时必须在函数第一行后按回车加入“”““”“””两对三引号后回车,此时会自动列出参数值,注释函数的作用.参数的用法和返回值 #!usr/bin/env pyth ...

  2. pycharm多行批量缩进和反向缩进快捷键

    在 VS, PYCHARM 中只要 拉选块之后,按下tab键,整个块就会缩进 按下 shift + tab 就会反向缩进

  3. LeetCode Top 100 Liked Questions in Golang(updating...)

    leetcode go语言版本,主要为了熟悉下语言 1. Two Sum 双指针版本, O(NlogN) func twoSum(nums []int, target int) []int { val ...

  4. 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素(215)

    这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...

  5. kibana一直弹出来报错?

    1,这个我们需要授权 2.授予安全

  6. 洛谷2254 BZOJ1499 瑰丽华尔兹题解

    洛谷链接 BZ链接 一个很容易想到的做法就是用f[i][j][t]表示t时刻在i,j处的可以滑动的最大值 f[i][j][t]=max(f[i][j][t-1],f[*i][*j][t-1]),这样大 ...

  7. vuxdemo1

    //main.js import Vue from 'vue' import router from './router' import store from './store' import axi ...

  8. Python发送邮件(带附件的)

    有时候做自动化测试任务,任务完成后,需要将结果自动发送一封邮件,这里用到smtplib模块,直接导入就行,这里以163邮箱为例,需要用到授权码,我用类写一下: 如果是发送qq邮箱,要将smtp 改成s ...

  9. springboot对shiro进行mock单元测试

    环境:junit-5.Spring5.0.x.Spring Boot 2.0.x 以下是用来权限测试的接口: @ApiOperation("[可接入]分页查询管理员") @ApiR ...

  10. Oracle安装 卸载 和常见问题

    Oracle的安装   全局数据库名:orcl  口令:orcl 或者以第三方工具SQLplus为例 系统用户:sys 和 system  练习账户:scott (密码:tiger) 登录账户为:sy ...