1.背景
想用小程序做模型渲染,但是webviewer出现不兼容问题,所以改为原生webgl渲染。
2.安装
项目文件夹内,如果没有package.json则新建,格式如下:
{
"name": "abc",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "eamon",
"license": "",
"dependencies": {
}
}
“详情”=〉“本地设置”=〉勾选“使用npm模块”
控制台/终端打开项目文件夹,通过npm安装:
npm install --save threejs-miniprogram
菜单“工具”=>“构建npm”完成安装。
3.导入小程序适配版本的 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 修复。
4.前端wxml页面
<canvas
type="webgl"
id="webgl"
style="width: 100%; height: 100vh;"
></canvas>
5.配套类库
未完待续。。。