uniapp中使用TweenMax和three.js ,renderjs实现模型根据实时数据移动，

1.首先我们需要引入three.js和TweenMax

uniapp引入three.js，我们需要先下载three.js的压缩包，可以创建一个空文件夹用。

npm i three

先下载依赖，然后把three.js的依赖包单独拿出来放入uniapp的项目的static文件夹。在需要的页面导入需要的js文件就行。

 

我们可以在examples中找到已经封装好的例子。我们只要引入就可以直接用。

导入TweenMax是一样的，下载压缩包，解压中后。导入相应的文件即可。

2.加载完文件后，我们就可以开始正式加载模型了

  首先的就是初始化画布用来加载模型，在这里我们需要获取dom元素。我们都知道uniapp是不能使用document.getElement来获取dom元素的。那就比较麻烦了。但是uniapp给我们解决的方法。就是用render.js。这样我们就可以用document来获取dom元素了。

<script module='three' lang="renderjs">

</script>

   解决了uniapp获取dom元素之后，就是我们都熟悉的，加入灯光，渲染器，控制器，相机等等。

<script module='three' lang="renderjs">
  const THREE = require('static/three/build/three.min.js')
	 // import * as THREE from 'static/three/build/three.min.js'
	import {
	    BoxHelper,
	    Color,
	    Object3D,
	    Scene,
	    Vector2,
		
	    Vector3,
	    Box3,
	    Sphere,
	    Quaternion
	} from 'static/three/build/three.min.js'
	import {GLTFLoader} from 'static/three/examples/jsm/loaders/GLTFLoader.js';
	import { OrbitControls } from 'static/three/examples/jsm/controls/OrbitControls';
	import {TweenMax} from'static/greensock-js/src/esm/TweenMax.js';

    let scene = null,
	camera=null,
	renderer=null,
	mesh=null,
	raycaster= new THREE.Raycaster(),
	roof=null,
	monitor_objs=[],
	canvas=null

    export default{ 
       methods:{
          //初始化
          initScene(){
             scene = new THREE.Scene();
				    // const {canvas} = await this.getCanvas()
				const canvas=document.getElementById('webgl')
				let  innerHeight=canvas.clientHeight
				let innerWidth=canvas.clientWidth
				// let offset = canvas.getBoundingClientRect()
				
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(innerWidth, innerHeight);
				renderer.shadowMap.enabled = true; // 启用阴影
				canvas.appendChild(renderer.domElement)
				
				
				camera=new THREE.PerspectiveCamera(45,innerWidth/innerHeight,0.1,10000)
				
				let orbitControls = new OrbitControls(camera, renderer.domElement);
				orbitControls.enableZoom = true;
				orbitControls.enableRotate = true;
				//limit zoom
				orbitControls.minDistance = 10
				orbitControls.maxDistance = 120
				//limit rotate
				orbitControls.minPolarAngle = 0
				orbitControls.maxPolarAngle = 1.5
				
				camera.position.set(-1.6324612341147984, 13.620388254461451, 18.900222630136035)
				orbitControls.target.set(-1.4225334351563348, -0.8600237699763099, -2.5668909337641628)
				
				
				raycaster.intersectHidden = false;
				let boxHelper = new BoxHelper(new Object3D(), new Color(0x00ffff))
				scene.add(boxHelper)
				
				const light = new THREE.DirectionalLight(0xcfcfcf, 2);
				light.position.set(100, 100, -30);
				light.castShadow = true; // 启用阴影
				light.shadow.mapSize.width = 2048;
				light.shadow.mapSize.height = 2048;
				light.shadow.camera.near = 5;
				light.shadow.camera.far = 500;
				light.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
				light.shadow.camera.right = 50; //最右边
				light.shadow.camera.top = 50; //最上边
				light.shadow.camera.bottom = -50; //最下面
				scene.add(light);
				
				scene.add(new THREE.AmbientLight(0xffffff));
				
				
				const loader = new GLTFLoader();
				loader.setPath('static/glb/')
				loader.load('DM_2.2.glb', function (gltf) {
					const model = gltf.scene;
					model.traverse(function (child) {
						if (child.isMesh) {
							child.receiveShadow = true;//启用接收阴影
						}
					});
					scene.add(model);
				}, undefined, function (error) {
					console.error(error);
				});
                orbitControls.update()
          }
          animate(){
				requestAnimationFrame(()=>{
					this.animate()
				});
				this.render()
		  },

          render(){
             renderer.render(scene,camera)
          }

       },
       mounted(){
          this.initScene()
		  this.animate()
       }

   }
</script>

3.到这一步，我们就可以获取数据来让模型移动了。

  在我们使用render.js时，我们用props获取父组件的值时，是拿不到的。兄弟们可以自己试试。这里我们就得用其他的方法了。

uniapp官网给了例子，感兴趣的可以去看看，我这边就直接介绍了。

首先我们得重新写个script，我们在这里是可以正常的接受父组件的值。后面我就直接代码展示了。

<template>
     //监听prop传的数据，onUpdateChange函数用来响应
	<view id='canvas' :prop='GonWeiTask' :change:prop='three.onUpdateChange'></view>
</template>

<script >
	export default{
		props:['GonWeiTask'],
	}
</script>

<script module='three' lang='renderjs'>
   export default{
       data(){
           return{

           }
       },
       methods:{
          onUpdateChange(newval,oldval,ownerInstance,instance){     
              console.log(newval) //这样我们就可拿到我们需要的值了。
          }
       }
    }
</script>

好了,我们在拿到数据之后，就离成功又进一步。

4.TweenMax的用法。

基本用法

TweenMax.to(obj.rotation,10,{ //obj传入的是个对象，比如我们要对模型进行旋转，这时，我们把模型名传入，以及需要移动的属性，给个完成时间。
    y:function(){
         return (0-XBDjiaoDu)*Math.PI/180  // XBDjiaoDu  后台请求的数据
      }
)

这样我们就可以改善模型移动的流畅度。要是想了解更深的用法，可以去官网看看。感谢兄弟们的点赞O(∩_∩)O哈哈~O(∩_∩)O哈哈~