微信小程序版threejs的使用

        首先是使用环境：我是使用的uniapp制作的微信小程序，当然原生的也是可以的，但是测试过很多，发现微信官方的threejs移植版本只能够导入gltf格式的模型，无法导入obj，这就有些尴尬了，为此我找了很多版本的threejs，首先是threejs-miniprogram，也就是官方的，可以直接在uniapp中使用，其实也就是three-platformize的套壳，没有obj的加载器，而且不知道什么原因，我设置gltf模型的材质时总是没有任何效果，所以最后还是选择了three-platformize版本的。

        那么直接上操作吧~

        注意：我的操作均是使用uniapp的方式使用的，直接在微信开发者工具中也是可以使用的，只是导入依赖的方式可能不太一样，我没试过~

        首先是github上的源码位置：

        https://github.com/deepkolos/three-platformize

npm install three-platformize

目录中应该是这样的，package.json中应该是有这个依赖的

然后就是源码了

<template>
	<canvas class="webgl" type="webgl" id="gl" @touchstart="onTX" @touchmove="onTX" @touchend="onTX" style="width: 100vw; height: 100vw;"></canvas>
</template>

<script >
import { $cancelAnimationFrame, $requestAnimationFrame, $window, AmbientLight, DirectionalLight, PerspectiveCamera, PLATFORM, Scene, sRGBEncoding, WebGL1Renderer } from 'three-platformize'
import * as THREE from 'three-platformize'
import { WechatPlatform } from 'three-platformize/src/WechatPlatform'
import {GLTFLoader,GLTF } from 'three-platformize/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three-platformize/examples/jsm/controls/OrbitControls'
import {OBJLoader } from 'three-platformize/examples/jsm/loaders/OBJLoader'

export default {
	data(){
		return {
			canvas:null
		}
	},
	onReady() {
		uni.createSelectorQuery().select('#gl').node().exec((res) => {
			const canvas = this.canvas = res[0].node
			this.platform = new WechatPlatform(canvas)
			PLATFORM.set(this.platform);
			// 场景
			const scene = new THREE.Scene()
			scene.background = new THREE.Color(0xfffff0);
			scene.add(new AmbientLight(0xffffff, 1.0))
			scene.add(new DirectionalLight(0xffffff, 1.0))
			// 视角
			const camera = new PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 100);
			camera.position.set(0, 5, 10);
			// 渲染器
			const renderer = new WebGL1Renderer({ canvas, antialias: true, alpha: true })
			renderer.outputEncoding = sRGBEncoding
			renderer.setSize(canvas.width, canvas.height)
			renderer.setPixelRatio($window.devicePixelRatio)
			// 控制器
			const controls = new OrbitControls(camera, canvas);
			controls.enableDamping = true
			controls.dampingFactor = 0.25;// 动态阻尼系数 就是鼠标拖∂拽旋转灵敏度
			controls.enableZoom = true  // 是否可以缩放
			// 模型加载器
			// this.gltfLoader = new GLTFLoader()
			// this.gltfLoader.loadAsync('你的glb模型的url',res=>{
			// 	console.log('---进度--',res)
			// }).then((gltf) => {
			// 	gltf.parser = null;
			// 	const child = gltf.scene;
			// 	child.scale.set(0.1,0.1,0.1)
			// 	scene.add(child);
			// 	console.log('---在线渲染--',gltf)
			//   })
			
			//obj模型加载
			const loader = new OBJLoader()
			loader.load('obj模型的url', (object) => {
				object.traverse((child) => {
				              child.material = new THREE.MeshLambertMaterial({ 
				                  color:0xA9A9A9,
				                  side:THREE.DoubleSide,
				              });
				          });
				object.scale.set(0.1, 0.1, 0.1); // 变小一点
				object.position.set(0, -10, 0)
				scene.add(object);
			}, () => {
			}, () => {
			});
			
		  // 添加坐标系
		  const axesHelper = new THREE.AxesHelper(10);
			scene.add(axesHelper);
		  const render = () => {
			if (!this.disposing) this.frameId = $requestAnimationFrame(render)
			controls.update()
			renderer.render(scene, camera);
		  }
		  render()
		})
	},
	onUnload() {
		this.disposing = true
			$cancelAnimationFrame(this.frameId)
			PLATFORM.dispose()
	}, 
	methods:{
		onTX(e) {
		    this.platform.dispatchTouchEvent(e)
		  },
	}
}



</script>

<style>
	
</style>

最后的效果就是能够看到一个坐标系，并且可以移动，模型的话就自己去导入吧~