MP-EasyAR-3DModels-Animations
For Instance*微信公众平台**微信开发者工具**EasyAR**项目实践**下载文件到本地**扫描识别**加载模型及其动画*微信开发者工具&&EasyAR-MP TokenType
For Instance
微信公众平台
URL：https://mp./
注册微信小程序账号，建议保存APPID和原始ID
APPID：使用微信开发者工具创建小程序项目时使用
原始ID：小程序账号冻结申诉等其他用途
移动端微信搜索"小程序助手"可帮助查看微信号关联的小程序及原始ID
微信开发者工具
URL：https://developers./miniprogram/dev/devtools/download.html
EasyAR
URL：/
阅读官方文档时切勿忽略第三部分说明
EasyAR官方文档：/EasyAR%20WebAR/miniProgram.html#
来自EasyAR官方提供的云识别图库试用权限，在此表示感谢！！！
按需选择，注意提示。
创建图库后，查看密匙：小程序AR Token
自行上传识别图，查看图片信息
识别图ID：识别成功时的返回值(var targetID = res.data.result.target.targetId)，可用于支持多图片识别
可识别度：可识别度越高越好，大量的特征点提供灵敏识别
项目实践
下载文件到本地
OnDownLoadImage: function () {wx.showLoading({title: 'Loading...',})wx.downloadFile({url: this.data.imageURL,success(res){wx.showToast({title: '请允许保存',})wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(){wx.hideToast({success(){wx.showToast({title: '保存成功',icon: 'none'})}})},fail(){wx.hideLoading({success(){wx.showModal({title: '温馨提示',content: '请手动打开相册权限',success(res){if(res.confirm){wx.openSetting()}}})}})}})},fail(err){wx.hideLoading({success(res){wx.showToast({title: '获取失败',icon: 'none'})}})console.info(err)}})}
扫描识别
PhotoRequest: function (imageBase64) {let that = thiswx.showLoading({title: '识别中...',})wx.request({url: 'https://cn1-:8443/search',data: {image: imageBase64},header: {'Authorization': '小程序AR Token',// 默认值//'Authorization': 'jfI9YqnhofaI1mqA80TpQ5QCAp5b8McpOYVjkBpBmLQaN/w/SRRv0UYFK8pp3IasKHkAif/+piSxsz1VJoCscw==','content-type': 'application/json'},method: 'POST',success(res) {that.setData({isReuqest: false})if (res.data.statusCode == 0) {that.listener.stop()that.data.status = falsethat.data.scanStatus = 'none'var signID = res.data.result.target.targetIdif(signID == "识别图ID"){console.info("Sign03:----" + signID)wx.hideLoading({success(){wx.showToast({title: '识别成功',})},})setTimeout(() => {wx.hideToast()wx.hideLoading()wx.navigateTo({url: '../index/index',})}, 1000);}}},fail(err) {console.log(err)}})},TransformPhotoBufferToBase64: function (frame) {this.setData({isReuqest: true})let photoBuffer = upng.encode([frame.data], frame.width, frame.height, 16, 0)let dataBase64 = wx.arrayBufferToBase64(photoBuffer)this.PhotoRequest(dataBase64)console.info("ToPhotoRequest")},OnRecognitionBtn: function () {if (this.data.status){return}this.data.status = trueconst cameraCT = wx.createCameraContext()this.listener = cameraCT.onCameraFrame((frame) => {if(!this.data.isReuqest) {this.TransformPhotoBufferToBase64(frame)console.info("ToTransform")}})this.listener.start({success: () => {console.log('Listener_T')},fail: (err) => {console.log('Listener_F')console.log(err)}})}
加载模型及其动画
import {registerGLTFLoader } from '../../Utility/gltf-loader'import {createScopedThreejs } from '../../Utility/three'var mainCameravar mainScenevar mainRenderervar modelvar requestAnimationFrameonLoad: function () {let that = thiswx.showToast({title: '------正在加载------\r\n这可能需要一些时间',icon: 'none'}, 5000)var selectorQuery = wx.createSelectorQuery()selectorQuery.select('#webgl').node().exec((res) => {var mainCanvas = res[0].nodemainCanvas.getContext('webgl', {alpha: true})if (mainCanvas != undefined) {mainCanvas.width = mainCanvas._width;mainCanvas.height = mainCanvas._height;requestAnimationFrame = mainCanvas.requestAnimationFrame;that.Init(mainCanvas)}})},//#endregion//#region InitInit: function (canvas) {let that = thisconst THREE = createScopedThreejs(canvas)registerGLTFLoader(THREE)mainCamera = new THREE.PerspectiveCamera(60, canvas.width / canvas.height, 1, 1000)mainCamera.position.set(0, 10, 10)mainCamera.lookAt(new THREE.Vector3(0, 2, 0))mainScene = new THREE.Scene()var light_Sphere = new THREE.HemisphereLight(0xffffff, 0xffffff)light_Sphere.position.set(0, 5, 0)mainScene.add(light_Sphere)var light_Direction = new THREE.DirectionalLight(0xffffff)light_Direction.position.set(0, 5, 2)mainScene.add(light_Direction)var loader = new THREE.GLTFLoader()var animationMixervar clock = new THREE.Clock()///examples/models/gltf/RobotExpressive/RobotExpressive.glbloader.load('https://www.***.cn/models/Horse.glb',function (object) {model = object.scenemodel.scale.set(0.02, 0.02, 0.02)animationMixer = new THREE.AnimationMixer(model)for (var i=0; i<object.animations.length; i++){animationMixer.clipAction(object.animations[i]).play()}mainScene.add(model)},undefined,function (e) {console.error(e)})mainRenderer = new THREE.WebGLRenderer({antialias: true })mainRenderer.setSize(canvas.width, canvas.height)var Animate = function(){requestAnimationFrame(Animate)var deltaTime = clock.getDelta()if (animationMixer) {animationMixer.update(deltaTime);}mainRenderer.render(mainScene, mainCamera)}Animate()}
