微信小程序中如何使用threejs？

这个项目可以实现，该项目的目标是将three.js移植到微信小程序。

下载build目录中的three.weapp.min.js到小程序相应目录。或者你可以构建自己的版本 兼容性

基本模型

OrbitControls

TrackballControls

TextureLoader

GLTFLoader gTLF模型, glb模型加载

OBJLoader obj模型加载

STLLoader

Animation system

Raycaster

DDSLoader or MTLLoader 待测试

小程序调用threejs示例代码

下载https://github.com/yannliao/three.js项目中build目录下的three.weapp.min.js到小程序相应目录，如：

wxml

<view style="height: 100%; width: 100%;" bindtouchstart="documentTouchStart" bindtouchmove="documentTouchMove" bindtouchend="documentTouchEnd" >
    <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas>
</view>

js

import * as THREE from '../../libs/three.weapp.min.js'
import { OrbitControls } from '../../jsm/loaders/OrbitControls'

Page({
  data: {},
  onLoad: function () {
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        const canvas = THREE.global.registerCanvas(res[0].node)

        this.setData({ canvasId: canvas._canvasId })

        const camera = new THREE.PerspectiveCamera(70, canvas.width /...

点击查看剩余70%