wechat-miniprogram / threejs-miniprogram Goto Github PK

View Code? Open in Web Editor NEW

684.0 17.0 222.0 1.09 MB

WeChat MiniProgram adapted version of Three.js

License: MIT License

JavaScript 100.00%

threejs-miniprogram's Introduction

threejs-miniprogram

Three.js 小程序 WebGL 的适配版本。

使用

可参考 example 目录下的示例项目或参照以下流程：

通过 npm 安装
```
npm install --save threejs-miniprogram
```

安装完成之后在微信开发者工具中点击构建 npm。

导入小程序适配版本的 Three.js

import {createScopedThreejs} from 'threejs-miniprogram'

Page({
  onReady() {
    wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        // 创建一个与 canvas 绑定的 three.js
        const THREE = createScopedThreejs(canvas)
        // 传递并使用 THREE 变量
      })
  }
})

说明

本项目当前使用的 Three.js 版本号为 0.108.0，如要更新 threejs 版本可发 PR 修改或 fork 后自行修改。
该适配版本的 THREE 不在全局环境中，如使用 Three.js 的其他配套类库，需要自行传入 THREE 到类库中。
如在使用过程中发现有适配问题，可通过 issue 反馈或发 PR 修复。

threejs-miniprogram's People

Contributors

Stargazers

Watchers

Forkers

limingzhou haihuo0910 wjf2016 geshu lqz holyshitkillingmachine lacerba aikugui ouyangzechen awong1900 legendaryzealot willjoe1987 sercl xiaqianqian yake175git0826 dumtux cofuture qweeq12q mgdestiny 616222774 reganhe act50 kjhtrtg calljs lqloveball bbspider sun670268063 ergosphere ywhniubi spiderman-mj xinyuloving aiplayer yuanchunfa bareena feayn jxh123456 ttzztztz fangao01 cnywt jcyuan rebider apearlriverwater epoching galenchou javxi sobiny martinadamsdev masixian gfluffy siking4032 weiyufangchen yangminglong z980 planee turbock gitddx imondo hyf001314 it-cat fe-yjp oppenfuture msfyh finalboss349 beckyisme bxhzzc littlebra wangtt185 edgeai88 dingling001 chinazzlm geyiyi zm7513 jerecui togoog songstar0904 asange vlily sway007 jonham hittle yuedou xjt13417680505 yangger6 lixiangping1314520 vicebeak mapleshaw xzq2325 zaixialmr rmitig dejir apgyapgy fullstackuu wanghao1991 skyseaee xiaofeng930415 tracypang limit7 patoles zhangkaidi ethanzhong

threejs-miniprogram's Issues

threejs-miniprogram真机调试报错

开发者工具： Stable 1.05.2103190（默认设置）
代码： threejs-miniprogram/example
问题：无法真机调试，开发者工具内正常
开发者工具警告： threejs-miniprogram/index.js 文件体积超过500KB，已跳过压缩以及ES6转ES5得处理
真机调试报错：Cannot set property 'ontouchstart' of undefined

于是新建个项目，直接复制 threejs-miniprogram/index.js，只渲染一个球，没有触摸事件，还是同样的报错

后来尝试新建项目用npm安装threejs-miniprogram，npm构建时报错未找到npm包入口文件，构建失败，全删重装了几次也一样

Is there a fbx loader?

rt.

which uses inflate

真机调试无法渲染报错

手机预览正常，使用真机调试模式无法渲染，会报一个错误

remote-helper.js:1 eval script evaluate_id #11 failed TypeError: Cannot set property 'ontouchstart' of undefined
    at WAService.js:1:679251
    at Array.forEach (<anonymous>)
    at WAService.js:1:679222
    at WAService.js:1:679683
    at WAService.js:1:423621
    at Object.m (WAService.js:1:1905)
    at Object.value [as subscribeHandler] (C:\Users\ysh9818\AppData\Roaming\Tencent\微信开发者工具\package.nw\js\unpack\remote-helper.js:68:2165)
    at [VM 12]:1:17
    at Script.runInContext (vm.js:135:20)
    at Object.runInContext (vm.js:298:6)

Regist canvas & Unregist Canvas

目前我看到的接口是：
createScopedThreejs
来绑定一个canvas
能不能做一个动态的绑定，比如在某个页面绑定某个页面的canvas，换个页面就取消上个页面的canvas然后绑定新的canvas。
就是提供两个接口：RegistCanvas还有UnregistCanvas。
这样其实其他的three.js定义的对象不需要删除可以公用。只是最后显示刷新的canvas可以动态改变。

如果实现有问题的话，请问有没有卸载函数，目前只有createScopedThreejs创建。删除内存和卸载呢？

加载有贴图的gltf文件会报错

鼠标事件响应怎么实现？

插件有实现鼠标事件响应吗？还是需要自己手动添加？
我包装好OrbitControls引入到项目里，但没有反应，是不是由于没有引入事件导致的？
有没相应的使用示例？

example 在 iPhone 大屏手机上显示不了模型

你好，我在 iPhone 大屏手机上跑 example 工程一片空白，显示不了模型。同样的代码在 iPhone8 上面可以显示。能帮忙看下是什么问题吗？现在我定位到的导致出问题的地方是 canvas 的高度。下面是我测试的机型和测试步骤：

测试机型：iPhone6p/iPhone7p/iPhone X
测试步骤：
1，把 index.xml 第一个 canvas style 里面的 height 改成 456 px 就会显示不了(大于455的值都显示不了)，模拟器可以显示。
2，把 index.xml 第一个 canvas style 里面的 height 改成 455 px 就可以显示。

如果你们那边也复现出同样的问题，麻烦告知一声，谢谢🙏

大模型在真机上报错

如题，使用threejs-miniprogram的过程中，展示比较小的模型时在开发者工具和真机上都能正常显示，展示大的模型时，在开发者工具上正常显示，在真机上报错，报错如图所示

CubeTexture 的images 的小程序中对应的HTMLCanvasElement类型如何创建？

真机环境下报错

设备: iphoneX
系统: ios 13.3.1
报错提示：Cannot set property 'ontouchstart' of undefined

使用Threejs时，出现报错

报错信息：<ReferenceError:atob is not defined>
使用的exmaple的例子，将导入的模型修改后，在手机上测试，出现报错，模型也加载不出来
手机型号：Redmi K30

0.0.6版本构建后无法运行

下载最新代码（0.0.6版本），install和build都正常，成功生成dist/index.js，但是在小程序import后调用createScopedThreejs报错：
thirdScriptError
(void 0) is not a function

改成0.0.5版本可以正常运行，查看提交记录在index,js的createScopedThreejs添加了行HTMLCanvasElement = undefined，把该行注释掉0.0.6才可以正常运行

Cannot read property 'dispatchTouchEvent' of undefined

拖拽是怎麽匹配的？

添加获取鼠标位置

/example/test-cases/cubes.js 文件第8行开始

  animate();
  function getmouse(event){
    mouse.x=(event.touches[0].clientX/canvas._width) * 2 - 1;
    mouse.y=-(event.touches[0].clientY/canvas._height) * 2 + 1;
  }
  function init() {
    canvas.addEventListener('touchstart',getmouse);
    canvas.addEventListener('touchmove',getmouse);
    camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 10000);
.....

这样可以获取鼠标位置

在小程序中创建VideoTexture的问题

通过THREE.VideoTexture方法创建视频贴图，应该传入什么值？我试过视频的url、VideoContext都不行，求解！

类似tween.js引用使用

hello,想问下如何引用tween.js控制动画==

<canvas>type无法指定为'2d'

需要在原声组件上, 覆盖
如果type指定为'webgl'的话, <cover-view>组件无法显示
如果type指定为'2d', threejs无法正常渲染.

没有RGBELoader

如题，有没有小程序可以用的RGBELoader，加载hdr

小程序内是不是不支持SpriteMaterial绘制精灵文字啊？

想在场景中做交互点
在开发者工具就可以渲染出来，真机和预览都不行，并且会导致3D模型闪烁

orbit 下兼容 touchmove touches 为空的情况

是否支持VideoTexture

实际运行没有报错，但是效果不对：并没有播放视频，而是使物体消失或透明了。

CubeTexture 的images 只支持 HTMLImageElement or HTMLCanvasElement 两种类型吗？

期望您的解答，在此先表示感谢。

将官网的示例中，canvas的height修改为大于455px时，在iPhone8 Plus 真机预览时无法显示，场景网格也无法显示

将官网的示例中，canvas的height修改为大于455px时，在iPhone8 Plus 真机预览时，机器人模型无法显示，场景网格也无法显示

升级编译高版本three报错

高版本由于async和await的引入，build之后的产物会报错

带贴图的模型加载出问题

TypeError: Cannot read property 'URL' of undefined
at GLTFParser.loadTexture (gltf-loader.js:1973)
at GLTFParser.getDependency (gltf-loader.js:1713)
at GLTFParser.assignTexture (gltf-loader.js:2075)
at GLTFParser.loadMaterial (gltf-loader.js:2283)
at GLTFParser.getDependency (gltf-loader.js:1709)
at GLTFParser.loadMesh (gltf-loader.js:2539)
at GLTFParser.getDependency (gltf-loader.js:1693)
at gltf-loader.js:2931
at GLTFParser.loadNode (gltf-loader.js:2925)
at GLTFParser.getDependency (gltf-loader.js:1689)

有加载FBX文件的demo吗

我这里用户只提供了FBX文件需求能否有可以直接加载FBX文件的demo

微信小程序中如何创建THREE.VideoTexture呢

微信小程序中好像取不到video节点

obj很大十几兆或者五六十兆加载好慢好慢

重新构建 npm 后的版本 canvas.dispatchTouchEvent 等方法丢失

如上图:

左边的为重新构建 npm 后报的错, 0.0.3 - 0.0.5 都一样, 0.0.6 直接构建 npm 失败(同 #38 ).
右边为当前仓库版本 0.0.3 且未执行 npm install 与构建 npm 动作的.

期待结果:

0.0.6 等任意版本可构建 npm 成功, 且应加上 canvas.dispatchTouchEvent 等方法.

关于gltf模型加载贴图的问题

如果gltf模型有带贴图的话，那么会显示gltf里面加载模型贴图问题
url未定义，blob无法使用，本人小白，初来小程序，希望大神帮忙解决

GLTFLoader无法加载外部glb模型

request和download域名也加了。无法加载模型，居然报错也没有，try catch也加上也没有任何信息输出。
换用qq域名的一个demo模型，一切顺利。

感觉是域名的问题？但是为什么什么反馈都不给，报错也没有，什么都没有

怎么给小程序里面添加orbitcontrols

canvas高度设置为460px或更大时，不能显示

具体来说是在苹果手机上显示白屏，安卓手机显示黑屏，log无异常信息

当高度改为450px以下显示就正常

加载模型的进度条不能使用

ios 下无法渲染，提示不支持浮点纹理渲染，OES_texture_float_linear

在IOS小程序里，提示无法支持OES_texture_float_linear这个扩展，无法渲染出来。怎么处理？

请问，three在小程序中如何实现3d拖拽

Error: THREE.GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported. Use LegacyGLTFLoader instead.

克隆示例代码后运行报错，看似是glTF版本问题，有人碰到过吗？

Error: THREE.GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported. Use LegacyGLTFLoader instead.
    at GLTFLoader.parse (VM34 gltf-loader.js:163)
    at Object.onLoad (VM34 gltf-loader.js:86)
    at a.<anonymous> (VM40 index.js:2)
    at a.e.<computed> [as onload] (VM40 index.js:1)
    at a._ (VM40 index.js:1)
    at l (VM40 index.js:1)
    at Function.o.<computed> (VM27 WAService.js:1)
    at VM27 WAService.js:1
    at E (VM27 WAService.js:1)
    at i.<anonymous> (VM27 WAService.js:1)

there is no texture bound to the unit x

gltf模型加载，遇到这个问题，导致模型是黑色

gltf-loader.js加载纹理有问题

如图，小程序没有window啊，这里加载会报Cannot read property 'URL' of undefined的错误，导致纹理加载不了

模拟器可以，真机显示不出来～～～

npm包 0.0.6 缺少dist目录

使用 threejs-miniprogram，反复进入AR功能的页面会导致微信闪退或者报内存不足，自动退出小程序

反复进入AR功能的页面会导致微信闪退或者报内存不足，自动退出小程序，有哥们遇到过这个问题吗?求解，貌似官方的VisionKit的demo也存在这个问题

example在最新的开发者工具中无法运行

微信社区提问：https://developers.weixin.qq.com/community/develop/doc/000aa6f2b84ac8d0288b59a1851400?jumpto=comment&commentid=0006c01da6c5b0278a8bd5980560

工具类库介绍 https://developers.weixin.qq.com/miniprogram/dev/extended/utils/threejs.html

工具类库的示例代码： https://github.com/wechat-miniprogram/threejs-miniprogram/tree/master/example

微信开发者工具版本：1.03.2012121

报错截图

多级页面,在安卓机型上,多次来回进入退出会导致崩溃

代码说明

代码片段共2个页面,有首页(index/index)和测试页(three/index).

问题安卓机型

mate 20 pro, oppo r11, pixel 3, 等

复现路径

从首页进入测试页,再从测试页返回首页,如此反复多次(有些3次,有些7,8次,还有10多次),会出现小程序闪退.

目前代码片段里已经加入内存释放功能,但是依然每次进入都会内存增加多,释放少,导致越来越多.即使加入内存警告,大部分情况下,没有警告,就直接闪退.

代码片段
https://developers.weixin.qq.com/s/Ps7EDJm87ygO

v0.0.6 npm包不能build npm

npm install [email protected] 下载下来的包缺失dist 目录

example中canvas尺寸设置错误

threejs-miniprogram/example/test-cases/model.js

Line 45 in 5c4964e

renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);

经实验，在pixelRatio大于1时，renderer.setPixelRatio会改变canvas尺寸，之后再调用renderer.setSize(canvas.width, canvas.height)会导致canvas尺寸再次变大。具体表现之一为视角旋转变慢。
交换两行，先setSize后setPixelRatio可以解决

var texture = new THREE.TextureLoader().load(
  'https://zugou.vip/aa.jpg',
  function(texture) {
    console.log('加载成功')
  },
  undefined,
  function(err) {
    console.log('加载失败')
  }
);`

因为通过npm下载过来的是build后的代码所以不好查看原因。但是感觉问题出在textureloader中使用的imageloader出现了问题。