修改三维模块名称，升级threejs版本

src/jlmap3d/jl3ddevice/jl3ddevice.js

@@ -9,7 +9,7 @@ import { Signallightload } from '@/jlmap3d/jl3ddevice/component/signallight.js';
 import StompClient from '@/utils/sock';
 
 var clock = new THREE.Clock();
-export function Jl3d(dom,group,token) {
+export function Jl3ddevice(dom,group,token) {
 	var scope = this;
 
 	this.dom = dom;

src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js

@@ -0,0 +1,14 @@
+
+export function Jdqcontrol(){
+  let scope = this;
+
+  this.jdqinit = function(){
+
+  }
+
+  this.jdqraycast = function(){
+    
+  }
+
+
+}

src/jlmap3d/jl3ddevicetrain/component/moveanimate.js

@@ -0,0 +1,54 @@
+
+export function Moveanimate(){
+  let scope = this;
+
+  this.animatelist = [];
+
+  this.enable = false;
+
+  this.initanimate = function(modelobject,points,type){
+    let curve =  new THREE.CatmullRomCurve3(points);
+    let animate = {
+      name:modelobject.name,
+      curve:curve,
+      progress:0,
+      directchange:false,
+      connectmodel:modelobject,
+      enable:true,
+      status:"start",
+      speed:,
+    };
+    scope.animatelist.push(animate);
+  }
+
+  this.animateupdate = function(){
+    if(scope.enable){
+      for(let i=0,leni=scope.amimatelist.length;i<leni;i++){
+        if(scope.animatelist[i].enable){
+            // console.log(camerarail.progress);
+            if(scope.animatelist[i].progress>=0.99){
+              scope.animatelist[i].enable = false;
+              scope.animatelist[i].status = "end";
+            }else{
+              let point = scope.animatelist[i].curve.getPointAt(scope.animatelist[i].progress);
+
+              scope.animatelist[i].connectmodel.position.x = point.x;
+              scope.animatelist[i].connectmodel.position.y = point.y;
+              scope.animatelist[i].connectmodel.position.z = point.z;
+              if(scope.animatelist[i].directchange){
+                let tangent = scope.animatelist[i].curve.getPointAt(scope.animatelist[i].progress+0.001);
+                // scope.animatelist[i]
+                tangent = null;
+              }
+              scope.animatelist[i].progress += 0.003;
+              point = null;
+
+            }
+
+        }
+      }
+    }
+  }
+
+
+}

src/jlmap3d/jl3ddevicetrain/config.js

@@ -0,0 +1,13 @@
+var Staticmodel = {
+	Jdq: {
+		id: "1",
+		name: "继电器",
+		deviceType: "jdq",
+		type: "training",
+		picUrl: "",
+		assetUrl: "../../static/model/jdq/jdq.FBX"
+	}
+
+}
+
+export { Staticmodel }

src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js

@@ -0,0 +1,136 @@
+import { Staticmodel } from '@/jlmap3d/jl3ddevicetrain/config.js';
+//loader
+import { FBXLoader } from '@/jlmap3d/main/loaders/FBXLoader';
+import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
+
+import { ModelManager } from '@/jlmap3d/jl3ddevicetrain/loader.js';
+// import { Signallightload } from '@/jlmap3d/jl3ddevice/component/signallight.js';
+
+// import StompClient from '@/utils/sock';
+import {Stats} from '@/jlmap3d/main/lib/stats.min.js';
+
+var clock = new THREE.Clock();
+export function Jl3ddevice(dom,group,token) {
+	var scope = this;
+
+	this.dom = dom;
+	this.nowcode = null;
+	this.animateswitch = false;
+	this.mixers = [];
+	this.showmodel = null;
+	//初始化webgl渲染
+	let renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true  });
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize(dom.offsetWidth, dom.offsetHeight);
+	renderer.shadowMap.enabled = true;
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+	renderer.setClearColor( 0x000000, 0 );
+	this.dom.appendChild(renderer.domElement);
+
+	//定义相机
+
+	let camera = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 5000);
+	camera.position.set(0, 20, 2500);
+	camera.aspect = dom.offsetWidth / dom.offsetHeight;
+	camera.updateProjectionMatrix();
+
+	this.controls = new THREE.OrbitControls(camera, dom);
+	// this.controls.maxPolarAngle = Math.PI / 2;
+	// this.controls.minPolarangle = Math.PI / 5;
+	this.controls.maxDistance = 4800;
+	this.controls.update();
+	//定义场景(渲染容器)
+	let scene = new THREE.Scene();
+	scene.background = new THREE.Color(0xa0a0a0);
+
+	// var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+	// mesh.rotation.x = - Math.PI / 2;
+	// mesh.receiveShadow = true;
+	// scene.add( mesh );
+	//
+	// var grid = new THREE.GridHelper( 5000, 100, 0x000000, 0x000000 );
+	// grid.material.opacity = 0.2;
+	// grid.material.transparent = true;
+	// scene.add( grid );
+
+
+
+	//定义全局光
+	let ambientLight = new THREE.AmbientLight(0xffffff, 1.3);
+	scene.add(ambientLight);
+
+	var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+	light.position.set( 0, 200, 0 );
+	scene.add( light );
+	//
+	// var spotLight = new THREE.SpotLight(0xffffff);
+	// spotLight.position.set(0, 3000, 0);
+	// spotLight.castShadow = true;
+	// spotLight.shadow.mapSize.width = 1024;
+	// spotLight.shadow.mapSize.height = 1024;
+	// scene.add(spotLight);
+
+
+
+	this.selectmodel = null;
+	//
+	// let teststomp = new StompClient();
+	// let topic = '/user/topic/simulation/assistant/'+group;
+	// let header = {'X-Token': token};
+	// try {
+	// 	// console.log("teststomp");
+	// 	teststomp.subscribe(topic, callback, header);
+	// } catch (error) {
+	// 	console.error('websocket订阅失败');
+	// }
+	//
+	// function callback(Response) {
+	// 	let data = JSON.parse(Response.body);
+	// 	if(scope.nowcode != data.body.code){
+	// 		scope.selectmodel(data);
+	// 	}else{
+	// 		scope.updateaction(data);
+	// 	}
+	//
+	// }
+
+	let stats = new Stats();
+	dom.appendChild( stats.dom );
+
+	window.onresize = function () {
+		camera.aspect = scope.dom.offsetWidth / scope.dom.offsetHeight;
+		camera.updateProjectionMatrix();
+		renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
+	}
+
+	this.anime = null;
+
+	this.modelmanager = new ModelManager();
+	this.modelmanager.loadpromise(Staticmodel, scope.mixers).then(function (data) {
+		let object = scope.modelmanager.jdq.mesh;
+		for(let i=0,leni=object.children.length;i<leni;i++){
+			if(object.children[i].name == "waizhao"){
+				for(let j=0,lenj=object.children[i].children.length;j<lenj;j++){
+					if(object.children[i].children[j].name == "waizhao"){
+						object.children[i].children[j].material.depthTest = false;
+					}
+				}
+				// object.children[i].position.y = 1000;
+			}
+		}
+		object.position.y = -500;
+		scene.add(object);
+		animate();
+	})
+
+	//循环渲染函数
+	function animate() {
+
+		scope.anime = requestAnimationFrame(animate);
+		renderer.render(scene, camera);
+		// scope.controls.update();
+	  stats.update();
+	}
+
+
+}

src/jlmap3d/jl3ddevicetrain/loader.js

@@ -0,0 +1,60 @@
+
+
+export function ModelManager(){
+  let scope = this;
+
+  this.jdq = {
+    code:null,
+    locateType:"01",
+    mesh:null,
+    action:null
+  };
+
+
+
+  this.loadpromise = function (data,mixers){
+    let initlist = [];
+    initlist.push(fbxpromise(data.Jdq,mixers,scope.jdq));
+
+    return new Promise(function(resolve, reject){
+
+      Promise.all(initlist).then((result) => {
+        resolve("success");             //['成功了', 'success']
+      }).catch((error) => {
+        //console.log(error);
+      });
+
+    });
+  }
+
+}
+
+function fbxpromise(asset,mixers,model){
+  return new Promise(function(resolve, reject){
+    var loader = new THREE.FBXLoader();
+    loader.load( asset.assetUrl, function ( object ) {
+      let mixer = new THREE.AnimationMixer( object );
+      object.traverse( function ( child ) {
+      	if ( child.isMesh ) {
+      		child.castShadow = true;
+      		child.receiveShadow = true;
+      	}
+      } );
+
+      model.mesh = object;
+      if(object.animations.length>0){
+
+        model.action = mixer.clipAction( object.animations[ 0 ] );
+        model.action.setLoop(THREE.LoopOnce);
+        model.action.clampWhenFinished = true;
+        mixers.push(mixer);
+        //model.action.play();
+      }
+
+
+
+      resolve(asset.deviceType);
+    } );
+
+  });
+}

src/jlmap3d/main/loaders/FBXLoader.js

@@ -1,4 +1,3 @@
-
 /**
  * @author Kyle-Larson https://github.com/Kyle-Larson
  * @author Takahiro https://github.com/takahirox
@@ -28,21 +27,19 @@ THREE.FBXLoader = ( function () {
 
 	function FBXLoader( manager ) {
 
-		this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+		THREE.Loader.call( this, manager );
 
 	}
 
-	FBXLoader.prototype = {
+	FBXLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
 
 		constructor: FBXLoader,
 
-		crossOrigin: 'anonymous',
-
 		load: function ( url, onLoad, onProgress, onError ) {
 
 			var self = this;
 
-			var path = ( self.path === undefined ) ? THREE.LoaderUtils.extractUrlBase( url ) : self.path;
+			var path = ( self.path === '' ) ? THREE.LoaderUtils.extractUrlBase( url ) : self.path;
 
 			var loader = new THREE.FileLoader( this.manager );
 			loader.setPath( self.path );
@@ -70,27 +67,6 @@ THREE.FBXLoader = ( function () {
 
 		},
 
-		setPath: function ( value ) {
-
-			this.path = value;
-			return this;
-
-		},
-
-		setResourcePath: function ( value ) {
-
-			this.resourcePath = value;
-			return this;
-
-		},
-
-		setCrossOrigin: function ( value ) {
-
-			this.crossOrigin = value;
-			return this;
-
-		},
-
 		parse: function ( FBXBuffer, path ) {
 
 			if ( isFbxFormatBinary( FBXBuffer ) ) {
@@ -117,18 +93,21 @@ THREE.FBXLoader = ( function () {
 
 			}
 
-			var textureLoader = new THREE.TextureLoader( this.manager ).setPath( this.resourcePath || path ).setCrossOrigin( 'anonymous' );
+			// console.log( fbxTree );
 
-			return new FBXTreeParser( textureLoader ).parse( fbxTree );
+			var textureLoader = new THREE.TextureLoader( this.manager ).setPath( this.resourcePath || path ).setCrossOrigin( this.crossOrigin );
+
+			return new FBXTreeParser( textureLoader, this.manager ).parse( fbxTree );
 
 		}
 
-	};
+	} );
 
 	// Parse the FBXTree object returned by the BinaryParser or TextParser and return a THREE.Group
-	function FBXTreeParser( textureLoader ) {
+	function FBXTreeParser( textureLoader, manager ) {
 
 		this.textureLoader = textureLoader;
+		this.manager = manager;
 
 	}
 
@@ -287,27 +266,15 @@ THREE.FBXLoader = ( function () {
 
 				case 'tga':
 
-					if ( typeof THREE.TGALoader !== 'function' ) {
+					if ( this.manager.getHandler( '.tga' ) === null ) {
 
-						console.warn( 'FBXLoader: THREE.TGALoader is required to load TGA textures' );
-						return;
-
-					} else {
-
-						if ( THREE.Loader.Handlers.get( '.tga' ) === null ) {
-
-							var tgaLoader = new THREE.TGALoader();
-							tgaLoader.setPath( this.textureLoader.path );
-
-							THREE.Loader.Handlers.add( /\.tga$/i, tgaLoader );
-
-						}
-
-						type = 'image/tga';
-						break;
+						console.warn( 'FBXLoader: TGA loader not found, skipping ', fileName );
 
 					}
 
+					type = 'image/tga';
+					break;
+
 				default:
 
 					console.warn( 'FBXLoader: Image type "' + extension + '" is not supported.' );
@@ -412,11 +379,11 @@ THREE.FBXLoader = ( function () {
 
 			if ( extension === 'tga' ) {
 
-				var loader = THREE.Loader.Handlers.get( '.tga' );
+				var loader = this.manager.getHandler( '.tga' );
 
 				if ( loader === null ) {
 
-					console.warn( 'FBXLoader: TGALoader not found, creating empty placeholder texture for', fileName );
+					console.warn( 'FBXLoader: TGA loader not found, creating placeholder texture for', textureNode.RelativeFilename );
 					texture = new THREE.Texture();
 
 				} else {
@@ -427,7 +394,7 @@ THREE.FBXLoader = ( function () {
 
 			} else if ( extension === 'psd' ) {
 
-				console.warn( 'FBXLoader: PSD textures are not supported, creating empty placeholder texture for', fileName );
+				console.warn( 'FBXLoader: PSD textures are not supported, creating placeholder texture for', textureNode.RelativeFilename );
 				texture = new THREE.Texture();
 
 			} else {
@@ -549,9 +516,9 @@ THREE.FBXLoader = ( function () {
 
 			}
 
-			if ( materialNode.EmissiveFactor ) {
-
-        if(materialNode.Opacity.value<1 && materialNode.Opacity.value>0.9){
+		if ( materialNode.EmissiveFactor ) {
+			parameters.emissiveIntensity = parseFloat( materialNode.EmissiveFactor.value );
+        		if(materialNode.Opacity.value<1 && materialNode.Opacity.value>0.9){
 					parameters.side = THREE.DoubleSide;
 					parameters.transparent = true;
 					// parameters.alphaTest = 0.7;
@@ -564,8 +531,8 @@ THREE.FBXLoader = ( function () {
 			}
 
 			if ( materialNode.Opacity ) {
-        if(materialNode.Opacity.value<1 && materialNode.Opacity.value>0.9){
-          parameters.side = THREE.DoubleSide;
+        		if(materialNode.Opacity.value<1 && materialNode.Opacity.value>0.9){
+          			parameters.side = THREE.DoubleSide;
 					parameters.transparent = true;
 					// parameters.alphaTest = 0.7;
 					parameters.opacity = 1;
@@ -621,6 +588,7 @@ THREE.FBXLoader = ( function () {
 					case 'DiffuseColor':
 					case 'Maya|TEX_color_map':
 						parameters.map = self.getTexture( textureMap, child.ID );
+						parameters.map.encoding = THREE.sRGBEncoding;
 						break;
 
 					case 'DisplacementColor':
@@ -629,6 +597,7 @@ THREE.FBXLoader = ( function () {
 
 					case 'EmissiveColor':
 						parameters.emissiveMap = self.getTexture( textureMap, child.ID );
+						parameters.emissiveMap.encoding = THREE.sRGBEncoding;
 						break;
 
 					case 'NormalMap':
@@ -639,16 +608,18 @@ THREE.FBXLoader = ( function () {
 					case 'ReflectionColor':
 						parameters.envMap = self.getTexture( textureMap, child.ID );
 						parameters.envMap.mapping = THREE.EquirectangularReflectionMapping;
+						parameters.envMap.encoding = THREE.sRGBEncoding;
 						break;
 
 					case 'SpecularColor':
 						parameters.specularMap = self.getTexture( textureMap, child.ID );
+						parameters.specularMap.encoding = THREE.sRGBEncoding;
 						break;
 
 					case 'TransparentColor':
 						parameters.alphaMap = self.getTexture( textureMap, child.ID );
 						parameters.transparent = true;
-            parameters.alphaTest = 0.1;
+						parameters.alphaTest = 0.1;	
 						break;
 
 					case 'AmbientColor':
@@ -926,7 +897,8 @@ THREE.FBXLoader = ( function () {
 
 					}
 
-					model.name = THREE.PropertyBinding.sanitizeNodeName( node.attrName );
+					model.name = node.attrName ? THREE.PropertyBinding.sanitizeNodeName( node.attrName ) : '';
+
 					model.ID = id;
 
 				}
@@ -960,7 +932,8 @@ THREE.FBXLoader = ( function () {
 							bone.matrixWorld.copy( rawBone.transformLink );
 
 							// set name and id here - otherwise in cases where "subBone" is created it will not have a name / id
-							bone.name = THREE.PropertyBinding.sanitizeNodeName( name );
+
+							bone.name = name ? THREE.PropertyBinding.sanitizeNodeName( name ) : '';
 							bone.ID = id;
 
 							skeleton.bones[ i ] = bone;
@@ -1567,11 +1540,12 @@ THREE.FBXLoader = ( function () {
 
 		},
 
+
 		// Parse single node mesh geometry in FBXTree.Objects.Geometry
 		parseMeshGeometry: function ( relationships, geoNode, deformers ) {
 
 			var skeletons = deformers.skeletons;
-			var morphTargets = deformers.morphTargets;
+			var morphTargets = [];
 
 			var modelNodes = relationships.parents.map( function ( parent ) {
 
@@ -1590,13 +1564,15 @@ THREE.FBXLoader = ( function () {
 
 			}, null );
 
-			var morphTarget = relationships.children.reduce( function ( morphTarget, child ) {
+			relationships.children.forEach( function ( child ) {
 
-				if ( morphTargets[ child.ID ] !== undefined ) morphTarget = morphTargets[ child.ID ];
+				if ( deformers.morphTargets[ child.ID ] !== undefined ) {
 
-				return morphTarget;
+					morphTargets.push( deformers.morphTargets[ child.ID ] );
 
-			}, null );
+				}
+
+			} );
 
 			// Assume one model and get the preRotation from that
 			// if there is more than one model associated with the geometry this may cause problems
@@ -1613,12 +1589,12 @@ THREE.FBXLoader = ( function () {
 
 			var transform = generateTransform( transformData );
 
-			return this.genGeometry( geoNode, skeleton, morphTarget, transform );
+			return this.genGeometry( geoNode, skeleton, morphTargets, transform );
 
 		},
 
 		// Generate a THREE.BufferGeometry from a node in FBXTree.Objects.Geometry
-		genGeometry: function ( geoNode, skeleton, morphTarget, preTransform ) {
+		genGeometry: function ( geoNode, skeleton, morphTargets, preTransform ) {
 
 			var geo = new THREE.BufferGeometry();
 			if ( geoNode.attrName ) geo.name = geoNode.attrName;
@@ -1630,19 +1606,19 @@ THREE.FBXLoader = ( function () {
 
 			preTransform.applyToBufferAttribute( positionAttribute );
 
-			geo.addAttribute( 'position', positionAttribute );
+			geo.setAttribute( 'position', positionAttribute );
 
 			if ( buffers.colors.length > 0 ) {
 
-				geo.addAttribute( 'color', new THREE.Float32BufferAttribute( buffers.colors, 3 ) );
+				geo.setAttribute( 'color', new THREE.Float32BufferAttribute( buffers.colors, 3 ) );
 
 			}
 
 			if ( skeleton ) {
 
-				geo.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( buffers.weightsIndices, 4 ) );
+				geo.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( buffers.weightsIndices, 4 ) );
 
-				geo.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( buffers.vertexWeights, 4 ) );
+				geo.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( buffers.vertexWeights, 4 ) );
 
 				// used later to bind the skeleton to the model
 				geo.FBX_Deformer = skeleton;
@@ -1656,7 +1632,7 @@ THREE.FBXLoader = ( function () {
 				var normalMatrix = new THREE.Matrix3().getNormalMatrix( preTransform );
 				normalMatrix.applyToBufferAttribute( normalAttribute );
 
-				geo.addAttribute( 'normal', normalAttribute );
+				geo.setAttribute( 'normal', normalAttribute );
 
 			}
 
@@ -1672,7 +1648,7 @@ THREE.FBXLoader = ( function () {
 
 				}
 
-				geo.addAttribute( name, new THREE.Float32BufferAttribute( buffers.uvs[ i ], 2 ) );
+				geo.setAttribute( name, new THREE.Float32BufferAttribute( buffers.uvs[ i ], 2 ) );
 
 			} );
 
@@ -1719,7 +1695,7 @@ THREE.FBXLoader = ( function () {
 
 			}
 
-			this.addMorphTargets( geo, geoNode, morphTarget, preTransform );
+			this.addMorphTargets( geo, geoNode, morphTargets, preTransform );
 
 			return geo;
 
@@ -2092,23 +2068,29 @@ THREE.FBXLoader = ( function () {
 
 		},
 
-		addMorphTargets: function ( parentGeo, parentGeoNode, morphTarget, preTransform ) {
+		addMorphTargets: function ( parentGeo, parentGeoNode, morphTargets, preTransform ) {
 
-			if ( morphTarget === null ) return;
+			if ( morphTargets.length === 0 ) return;
+
+			parentGeo.morphTargetsRelative = true;
 
 			parentGeo.morphAttributes.position = [];
 			// parentGeo.morphAttributes.normal = []; // not implemented
 
 			var self = this;
-			morphTarget.rawTargets.forEach( function ( rawTarget ) {
+			morphTargets.forEach( function ( morphTarget ) {
 
-				var morphGeoNode = fbxTree.Objects.Geometry[ rawTarget.geoID ];
+				morphTarget.rawTargets.forEach( function ( rawTarget ) {
 
-				if ( morphGeoNode !== undefined ) {
+					var morphGeoNode = fbxTree.Objects.Geometry[ rawTarget.geoID ];
 
-					self.genMorphGeometry( parentGeo, parentGeoNode, morphGeoNode, preTransform, rawTarget.name );
+					if ( morphGeoNode !== undefined ) {
 
-				}
+						self.genMorphGeometry( parentGeo, parentGeoNode, morphGeoNode, preTransform, rawTarget.name );
+
+					}
+
+				} );
 
 			} );
 
@@ -2120,33 +2102,29 @@ THREE.FBXLoader = ( function () {
 		// Normal and position attributes only have data for the vertices that are affected by the morph
 		genMorphGeometry: function ( parentGeo, parentGeoNode, morphGeoNode, preTransform, name ) {
 
-			var morphGeo = new THREE.BufferGeometry();
-			if ( morphGeoNode.attrName ) morphGeo.name = morphGeoNode.attrName;
-
 			var vertexIndices = ( parentGeoNode.PolygonVertexIndex !== undefined ) ? parentGeoNode.PolygonVertexIndex.a : [];
 
-			// make a copy of the parent's vertex positions
-			var vertexPositions = ( parentGeoNode.Vertices !== undefined ) ? parentGeoNode.Vertices.a.slice() : [];
-
-			var morphPositions = ( morphGeoNode.Vertices !== undefined ) ? morphGeoNode.Vertices.a : [];
+			var morphPositionsSparse = ( morphGeoNode.Vertices !== undefined ) ? morphGeoNode.Vertices.a : [];
 			var indices = ( morphGeoNode.Indexes !== undefined ) ? morphGeoNode.Indexes.a : [];
 
+			var length = parentGeo.attributes.position.count * 3;
+			var morphPositions = new Float32Array( length );
+
 			for ( var i = 0; i < indices.length; i ++ ) {
 
 				var morphIndex = indices[ i ] * 3;
 
-				// FBX format uses blend shapes rather than morph targets. This can be converted
-				// by additively combining the blend shape positions with the original geometry's positions
-				vertexPositions[ morphIndex ] += morphPositions[ i * 3 ];
-				vertexPositions[ morphIndex + 1 ] += morphPositions[ i * 3 + 1 ];
-				vertexPositions[ morphIndex + 2 ] += morphPositions[ i * 3 + 2 ];
+				morphPositions[ morphIndex ] = morphPositionsSparse[ i * 3 ];
+				morphPositions[ morphIndex + 1 ] = morphPositionsSparse[ i * 3 + 1 ];
+				morphPositions[ morphIndex + 2 ] = morphPositionsSparse[ i * 3 + 2 ];
 
 			}
 
 			// TODO: add morph normal support
 			var morphGeoInfo = {
 				vertexIndices: vertexIndices,
-				vertexPositions: vertexPositions,
+				vertexPositions: morphPositions,
+
 			};
 
 			var morphBuffers = this.genBuffers( morphGeoInfo );
@@ -2340,7 +2318,7 @@ THREE.FBXLoader = ( function () {
 			} );
 
 			var geometry = new THREE.BufferGeometry();
-			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
 			return geometry;
 
@@ -2528,7 +2506,7 @@ THREE.FBXLoader = ( function () {
 
 										var node = {
 
-											modelName: THREE.PropertyBinding.sanitizeNodeName( rawModel.attrName ),
+											modelName: rawModel.attrName ? THREE.PropertyBinding.sanitizeNodeName( rawModel.attrName ) : '',
 											ID: rawModel.id,
 											initialPosition: [ 0, 0, 0 ],
 											initialRotation: [ 0, 0, 0 ],
@@ -2583,7 +2561,7 @@ THREE.FBXLoader = ( function () {
 
 									var node = {
 
-										modelName: THREE.PropertyBinding.sanitizeNodeName( rawModel.attrName ),
+										modelName: rawModel.attrName ? THREE.PropertyBinding.sanitizeNodeName( rawModel.attrName ) : '',
 										morphName: fbxTree.Objects.Deformer[ deformerID ].attrName,
 
 									};
@@ -3283,7 +3261,7 @@ THREE.FBXLoader = ( function () {
 
 			var version = reader.getUint32();
 
-			//console.log( 'THREE.FBXLoader: FBX binary version: ' + version );
+			console.log( 'THREE.FBXLoader: FBX binary version: ' + version );
 
 			var allNodes = new FBXTree();
 

src/router/index.js

@@ -11,7 +11,8 @@ const Login = () => import('@/views/login/index');
 const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
 const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
 const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation');
-const Jlmap3dModel = () => import('@/views/jlmap3d/device/devicemodel');
+const Jlmap3dModel = () => import('@/views/jlmap3d/device/jl3ddevice');
+const Jlmap3dTrain = () => import('@/views/jlmap3d/devicetrain/jl3ddevicetrain');
 const Display = () => import('@/views/display/index');
 const DesignDisplay = () => import('@/views/display/designIndex');
 
@@ -292,6 +293,11 @@ export const constantRoutes = [
         component: Jlmap3dModel,
         hidden: true
     },
+    {
+        path: '/jlmap3d/devicetrain',
+        component: Jlmap3dTrain,
+        hidden: true
+    },
     {
         path: '/401',
         component: Error401,

src/views/display/index.vue

@@ -44,7 +44,7 @@
 
     <!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
 
-    <Jl3d-Model v-if="deviceShow" ref="Jl3dModel" :panel-show="deviceShow" @showdevice="showdevice" />
+    <Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
     <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
 
     <scheduling v-if="isShowScheduling" ref="scheduling" :group="group" />
@@ -77,7 +77,7 @@ import Vue from 'vue';
 // 三维
 // import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
 import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
-import Jl3dModel from '@/views/jlmap3d/device/devicemodel';
+import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
 import { getToken } from '@/utils/auth';
 export default {
     name: 'DisplayDraft',
@@ -94,7 +94,7 @@ export default {
         MenuSystemTime,
         // Jl3dSimulation,
         Jl3dDrive,
-        Jl3dModel,
+        Jl3dDevice,
         Scheduling
     },
     props: {
@@ -550,8 +550,6 @@ export default {
             this.deviceShow = false;
           }
 
-          // this.$refs.Jl3dModel.init(this.group,getToken());
-
         },
         showScheduling() {
             this.$refs.scheduling.doShow();

src/views/jlmap3d/device/jl3ddevice.vue

@@ -5,7 +5,7 @@
 </template>
 <script>
 	import Vue from 'vue';
-	import { Jl3d } from '@/jlmap3d/jl3ddevice/jl3d.js';
+	import { Jl3ddevice } from '@/jlmap3d/jl3ddevice/jl3ddevice.js';
 
 
 	export default {
@@ -63,7 +63,7 @@
 			init: function (group,header) {
 				// let mapdata = this.$store.state.socket.device;
 				let dom = document.getElementById('jl3d');
-				this.jl3d = new Jl3d(dom,group,header);
+				this.jl3d = new Jl3ddevice(dom,group,header);
 			},
 		}
 	}

src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue

@@ -0,0 +1,93 @@
+<template>
+		<div id="jl3d" class="jl3ddraw">
+
+    </div>
+</template>
+<script>
+	import Vue from 'vue';
+	import { Jl3ddevice } from '@/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js';
+
+
+	export default {
+		name: 'devicetrain',
+		components: {
+
+		},
+		data() {
+			return {
+				jl3d: null,
+			}
+		},
+		watch: {
+			// '$store.state.socket.device.code': {
+			// 	handler: function (newVal, oldVal) {
+			// 		if (newVal != oldVal) {
+			// 			this.jl3d.selectmodel(this.$store.state.socket.device);
+      //
+			// 		}
+			// 	}
+			// },
+			// '$store.state.socket.device': {
+			// 	deep: true,
+			// 	handler: function (newVal, oldVal) {
+			// 		if (newVal.code == oldVal.code) {
+			// 			this.jl3d.updateaction(newVal);
+			// 		} else {
+      //
+			// 		}
+      //
+			// 	}
+			// },
+			// '$store.state.socket.simulationOverCount': function () {
+			// 	this.unsubscribe();
+			// }
+		},
+		computed: {
+			code() {
+				return this.$route.query.code;
+			}
+		},
+		mounted() {
+			let code = this.$route.query.code;
+			let group = this.$route.query.group;
+			let header = this.$route.query.token;
+			// if (group) {
+      //   this.init(group,header);
+			// 	// this.subscribe(code,group,header);
+			// }
+      this.init(group,header);
+		},
+		beforeDestroy() {
+		},
+		methods: {
+			init: function (group,header) {
+				// let mapdata = this.$store.state.socket.device;
+				let dom = document.getElementById('jl3d');
+				this.jl3d = new Jl3ddevice(dom,group,header);
+			},
+		}
+	}
+</script>
+<style scoped>
+	/* #jl3d {
+		width: 937px;
+		height: 937px;
+	} */
+
+	.jl3ddraw {
+    position: absolute;
+		float: right;
+    top:0;
+		/* left: 0; */
+		width: 100%;
+		height: 100%;
+		z-index: 1500;
+	}
+
+	#canvastexture {
+		position: absolute;
+		float: left;
+		left: 0;
+		z-index: -12;
+	}
+</style>