zincjs 2.2.1 → 2.3.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.2.1",
+  "version": "2.3.1-beta.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",
@@ -46,7 +46,11 @@
   },
   "homepage": "http://alan-wu.github.io/ZincJS/",
   "engines": {
-    "node": ">=20"
+    "node": "24.20.0"
+  },
+  "allowScripts": {
+    "gl@8.1.6": true,
+    "msw@2.14.6": true
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.11",
@@ -64,7 +68,7 @@
     "css-element-queries": "^1.2.2",
     "lodash": "^4.17.19",
     "nifti-reader-js": "0.8.0",
-    "three": "^0.130.1",
+    "three": "^0.185.1",
     "three-spritetext": "1.6.2"
   }
 }

package/src/loaders/niftiReader.js

@@ -228,7 +228,7 @@ function getTransformationFromHeader(header, options) {
 }
 
 function createDataTexture(data, width, height, depth, isRGB) {
-  const dataTexture = new THREE.DataTexture2DArray(
+  const dataTexture = new THREE.DataArrayTexture(
     data, width, height, depth);
   dataTexture.anisotropy = 4;
   if (!isRGB) {

package/src/minimap.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { copyVector3sArray } from "./utilities";
 
 /**
  * This provide a full scale minimap. It will always
@@ -66,8 +67,7 @@ const Minimap = function (sceneIn) {
     let v3 = new THREE.Vector3(1, 1, target.z).unproject(targetScene.camera);
     let v4 = new THREE.Vector3(-1, 1, target.z).unproject(targetScene.camera);
     let array = [v1, v2, v3, v3, v4, v1];
-    positionAttributes.copyVector3sArray(array);
-    positionAttributes.needsUpdate = true;
+    copyVector3sArray(positionAttributes, array);
   }
 
   this.updateCamera = () => {

package/src/primitives/augmentShader.js

@@ -2,27 +2,44 @@
 /**
  * Provide additional shaders to render time dependent color.
  */
-const augmentMorphColor = function() {
-    return function(shader) {
-        shader.vertexShader = shader.vertexShader.replace(
-            '#include <color_pars_vertex>',
-            [
-	            'varying vec3 vColor;',
-                'attribute vec3 morphColor0;',
-                'attribute vec3 morphColor1;'
-            ].join( '\n' )
-        );
-        shader.vertexShader = shader.vertexShader.replace(
-            '#include <color_vertex>',
-            [
-                'vColor.xyz = color.xyz;',
-                '#ifdef USE_MORPHTARGETS',
-                'vColor = morphColor0 * morphTargetInfluences[ 0 ];',
-                'vColor += morphColor1 * morphTargetInfluences[ 1 ];',
-                '#endif'
-            ].join( '\n' )
-        );
-    };
+
+const augmentMorphColor = function(shader) {
+  shader.vertexShader = shader.vertexShader.replace(
+      '#include <morphcolor_vertex>',
+      `
+      #if defined( USE_MORPHCOLORS )
+
+      // morphTargetBaseInfluence is set based on BufferGeometry.morphTargetsRelative value:
+      // When morphTargetsRelative is false, this is set to 1 - sum(influences); this results in normal = sum((target - base) * influence)
+      // When morphTargetsRelative is true, this is set to 1; as a result, all morph targets are simply added to the base after weighting
+      vColor *= morphTargetBaseInfluence;
+
+      for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {
+
+        #if defined( USE_COLOR_ALPHA )
+
+          if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ) * morphTargetInfluences[ i ];
+
+        #elif defined( USE_COLOR )
+
+          if ( morphTargetInfluences[ i ] != 0.0 ) {
+            vColor.rgb += getMorph( gl_VertexID, i, 2 ).rgb * morphTargetInfluences[ i ];
+            vColor.a = 1.0;
+          }
+
+        #endif
+
+      }
+
+      #endif
+      `
+  );
 }
 
-export { augmentMorphColor };
+const printShader = function (shader) {
+  console.log(shader.vertexShader);
+  console.log(shader.fragmentShader);
+}
+
+
+export { augmentMorphColor, printShader };

package/src/primitives/geometry.js

@@ -8,53 +8,36 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
   let geometry = toBufferGeometry(geometryIn, options);
 
   let isTransparent = false;
-  if (1.0 > options.opacity)
-      isTransparent = true;
-
+  if (1.0 > options.opacity) {
+    isTransparent = true;
+  }
   let material = undefined;
   if (geometry._video === undefined) {
-    const morphTargets = options.localTimeEnabled || options.localMorphColour;
     if (materialIn) {
       material = materialIn;
-      material.morphTargets = morphTargets;
-      material.morphNormals = options.localTimeEnabled;
     } else {
-      if (geometry instanceof THREE.BufferGeometry && geometry.attributes.color === undefined) {
-        material = new THREE.MeshPhongMaterial({
-          color : options.colour,
-          morphTargets : morphTargets,
-          morphNormals : options.localTimeEnabled,
-          transparent : isTransparent,
-          opacity : options.opacity,
-          side : THREE.DoubleSide
-        });
-      } else {
-        material = new THREE.MeshPhongMaterial({
-          color : options.colour,
-          morphTargets : morphTargets,
-          morphNormals : options.localTimeEnabled,
-          vertexColors : THREE.VertexColors,
-          transparent : isTransparent,
-          opacity : options.opacity,
-          side : THREE.DoubleSide
-        });
-      }
+      material = new THREE.MeshPhongMaterial({
+        color : options.colour,
+        vertexColors : false,
+        transparent : isTransparent,
+        opacity : options.opacity,
+        side : THREE.DoubleSide
+      });
     }
     //material = PhongToToon(material);
     if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
-      material.onBeforeCompile = augmentMorphColor();
+      material.vertexColors = true;
+      material.onBeforeCompile = augmentMorphColor;
     }
   } else {
     let videoTexture = geometry._video.createCanvasVideoTexture();
     material = new THREE.MeshBasicMaterial({
-      morphTargets : options.localTimeEnabled,
       color : new THREE.Color(1, 1, 1),
       transparent : isTransparent,
       opacity : options.opacity,
       map : videoTexture,
       side : THREE.DoubleSide
     });
-    this.videoHandler = geometry._video;
   }
   return new THREE.Mesh(geometry, material);
 }
@@ -92,6 +75,7 @@ const Geometry = function () {
 		if (this.morph && this.morph.geometry && (geometryIn != undefined))
 			return;
 		const mesh = createMeshForGeometry(geometryIn, materialIn, options);
+    this.videoHandler = mesh.geometry._video;
 		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
 	}
 
@@ -160,6 +144,17 @@ const Geometry = function () {
     }
   }
 
+  /**
+   * Check if the geometry is time varying.
+   *
+   * @return {Boolean}
+   */
+  this.isTimeVarying = function() {
+    if (this.timeEnabled || this.morphColour || this.videoHandler)
+      return true;
+    return false;
+  }
+
 
 }
 

package/src/primitives/glyphset.js

@@ -295,6 +295,8 @@ const Glyphset = function () {
       }
     }
     this.morph.instanceMatrix.needsUpdate = true;
+    this.boundingBoxUpdateRequired = true;
+    this.morph.computeBoundingSphere();
   };
 
   /**
@@ -372,7 +374,6 @@ const Glyphset = function () {
     }
     updateGlyphsetTransformation(current_positions, current_axis1s, current_axis2s, current_axis3s,
       current_scales);
-    this.boundingBoxUpdateRequired = true;
     if (colors != undefined) {
       if (morphColours) {
         const bottom_colors = colors[bottom_frame.toString()];
@@ -472,7 +473,6 @@ const Glyphset = function () {
       updateGlyphsetHexColors(colors["0"]);
     }
     this.ready = true;
-    this.boundingBoxUpdateRequired = true;
   };
 
   /**

package/src/primitives/label.js

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 import SpriteTextModule from 'three-spritetext';
 const SpriteText = SpriteTextModule.default || SpriteTextModule;
 
@@ -24,8 +25,12 @@ const Label = function (textIn, colourIn) {
   else
     sprite = new SpriteText(text, 0.012);
   sprite.fontFace = "Asap";
+  sprite.fontSize = 90;
   sprite.fontWeight = fontWeight;
-  sprite.material.map.generateMipmaps = false;
+  sprite.material.map.generateMipmaps = true;
+  sprite.material.map.anisotropy = 4;
+  sprite.material.minFilter = THREE.LinearMipmapLinearFilter; // Smooth downscaling
+  sprite.material.magFilter = THREE.LinearFilter;
   sprite.material.sizeAttenuation = false;
   sprite.center.x = -0.05;
   sprite.center.y = 0;

package/src/primitives/lines.js

@@ -31,8 +31,10 @@ const Lines = function () {
 	this.createLineSegment = (geometryIn, materialIn, options) => {
 		if (geometryIn && materialIn) {
 			let geometry = toBufferGeometry(geometryIn, options);
-			if (options.localMorphColour && geometry.morphAttributes[ "color" ])
-				materialIn.onBeforeCompile = augmentMorphColor();
+			if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+        materialIn.vertexColors = true;
+				materialIn.onBeforeCompile = augmentMorphColor;
+      }
       let line = new LineSegments(geometry, materialIn);
       this.setMesh(line, options.localTimeEnabled, options.localMorphColour);
 		}

package/src/primitives/pointset.js

@@ -3,6 +3,7 @@ import { Label } from './label';
 import { Points } from '../three/Points';
 import { ZincObject } from './zincObject';
 import { getCircularTexture, toBufferGeometry } from '../utilities';
+import { augmentMorphColor } from './augmentShader';
 
 /**
  * Provides an object which stores points and provides method which controls its position.
@@ -36,11 +37,15 @@ const Pointset = function () {
   this.createMesh = (geometryIn, materialIn, options) => {
     if (geometryIn && materialIn) {
       let geometry = toBufferGeometry(geometryIn, options);
+      console.log(geometry, options)
+      if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+        materialIn.vertexColors = true;
+        materialIn.onBeforeCompile = augmentMorphColor;
+      }
       const texture = getCircularTexture();
       materialIn.map = texture;
       let point = new Points(geometry, materialIn);
-      this.setMesh(point, options.localTimeEnabled,
-        options.localMorphColour);
+      this.setMesh(point, options.localTimeEnabled, options.localMorphColour);
     }
   }
 

package/src/primitives/zincObject.js

@@ -45,7 +45,6 @@ const ZincObject = function() {
   this.duration = 6000;
   this.clipAction = undefined;
   this.userData = {};
-  this.videoHandler = undefined;
   this.marker = undefined;
   this.markerNumber = undefined;
   this.markerUpdateRequired = true;

package/src/region.js

@@ -816,8 +816,6 @@ let Region = function (parentIn, sceneIn) {
     const zincGeometry = new Geometry();
     const material = new THREE.MeshPhongMaterial({
       color : colour,
-      morphTargets : false,
-      morphNormals : false,
       transparent : true,
       opacity : opacity,
       side : THREE.DoubleSide

package/src/renderer.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+//import { WebGPURenderer } from 'three/webgpu';
 import { ResizeSensor } from 'css-element-queries';
 import { Scene } from './scene';
 /**
@@ -130,7 +131,11 @@ const Renderer = function (containerIn) {
 				container = undefined;
 				canvas = parameters["canvas"];
 			}
-			renderer = new THREE.WebGLRenderer(parameters);
+      //parameters["forceWebGL"] = true;
+			//renderer = new WebGPURenderer(parameters);
+      //await renderer.init();
+
+      renderer = new THREE.WebGLRenderer(parameters);
 			if (container !== undefined) {
 				container.appendChild( renderer.domElement );
 			}

package/src/scene.js

@@ -157,7 +157,7 @@ const Scene = function (containerIn, rendererIn) {
     this.ambient = new THREE.AmbientLight(0xffffff, 0.2);
     scene.add(this.ambient);
 
-    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.7 * Math.PI);
     scene.add(this.directionalLight);
     zincCameraControls = new CameraControls(this.camera, rendererIn.domElement, rendererIn, this);
 
@@ -625,8 +625,6 @@ const Scene = function (containerIn, rendererIn) {
 				  zincCameraControls.update(0);
 			  }
 			  //console.log(videoHandler.video.currentTime / videoHandler.getVideoDuration() * 6000);
-		  } else {
-			  myPlayRate = 0;
 		  }
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {

package/src/sceneLoader.js

@@ -158,7 +158,7 @@ const SceneLoader = function (sceneIn) {
       let localTimeEnabled = 0;
       if (timeEnabled != undefined && timeEnabled[i] != undefined)
         localTimeEnabled = timeEnabled[i] ? true : false;
-      let localMorphColour = 0;
+      let localMorphColour = false;
       if (morphColour != undefined && morphColour[i] != undefined)
         localMorphColour = morphColour[i] ? true : false;
       primitivesLoader.load(filename, meshloader(region, colour, opacity, localTimeEnabled, localMorphColour, undefined, undefined,
@@ -218,7 +218,6 @@ const SceneLoader = function (sceneIn) {
           material.transparent = true;
         }
         material.opacity = materials[0].opacity;
-        material.morphTargets = localTimeEnabled;
         material.vertexColors = materials[0].vertexColors;
       }
       let options = {};
@@ -361,15 +360,19 @@ const SceneLoader = function (sceneIn) {
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
     return (geometry, materials) => {
       const newPointset = new Pointset();
-      let material = new THREE.PointsMaterial({ alphaTest: 0.5, size: 10, sizeAttenuation: false });
+      let material = new THREE.PointsMaterial(
+        {
+          alphaTest: 0.05,
+          size: 10,
+          sizeAttenuation: false,
+        });
       if (materials && materials[0]) {
         if (1.0 > materials[0].opacity) {
           material.transparent = true;
         }
         material.opacity = materials[0].opacity;
         material.color = materials[0].color;
-        material.morphTargets = localTimeEnabled;
-        material.vertexColors = materials[0].vertexColors;
+        material.vertexColors = false;
       }
       let options = {};
       options.localTimeEnabled = localTimeEnabled;
@@ -638,8 +641,9 @@ const SceneLoader = function (sceneIn) {
       newGeometry.setDuration(scene.getDuration());
       if (finishCallback != undefined && (typeof finishCallback == 'function'))
         finishCallback(newGeometry);
-      if (newGeometry.videoHandler)
+      if (newGeometry.videoHandler) {
         scene.setVideoHandler(newGeometry.videoHandler);
+      }
       return newGeometry;
     }
     return undefined;

package/src/texture/textureArray.js

@@ -48,7 +48,7 @@ const TextureArray = function () {
         length += data.length;
       });
 
-      this.impl = new THREE.DataTexture2DArray(fullArray, w, h, d);
+      this.impl = new THREE.DataArrayTexture(fullArray, w, h, d);
       this.size = {
         width: w,
         height: h,

package/src/three/Geometry.js

@@ -13,6 +13,12 @@ import {
 	Vector2,
 	Vector3
 } from 'three';
+import {
+  copyColorsArray,
+  copyVector2sArray,
+  copyVector3sArray,
+  copyVector4sArray
+} from "../utilities";
 
 const _m1 = new Matrix4();
 const _obj = new Object3D();
@@ -585,9 +591,9 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
         this.morphTargets[i].normals = new Array( this.vertices.length );
 
         for ( let v = 0; v < vertexNormals.length; v ++ ) {
-    
+
           this.morphTargets[i].normals[ v ] =  vertexNormals[v].clone();
-    
+
         }
       }
 
@@ -668,25 +674,25 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 				for ( let k = 0, kl = morphTarget2.vertices.length; k < kl; k ++ ) {
 
 					const vertex = morphTarget2.vertices[ k ];
-		
+
 					const vertexCopy = vertex.clone();
-		
+
 					if ( matrix !== undefined ) vertexCopy.applyMatrix4( matrix );
-		
+
 					morphTarget1.vertices.push( vertexCopy );
-		
+
 				}
 
 				if ( morphTarget1.normals && morphTarget2.normals ) {
-					
+
 					for ( let k = 0; k < morphTarget2.normals.length; k = k + 3) {
 
 						_temp.set(morphTarget2.normals2[k], morphTarget2.normals2[k + 1], morphTarget2.normals2[k + 2]);
-			
+
 						if ( matrix !== undefined ) _temp.applyMatrix4( matrix );
-			
+
 						morphTarget1.normals.push(_temp.x, _temp.y, _temp.z);
-			
+
 					}
 
 				}
@@ -705,7 +711,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 				for ( let k = 0, kl = morphColor2.colors; k < kl; k ++ ) {
 
 					morphColor1.colors.push( morphColor2.colors[ k ].clone() );
-		
+
 				}
 
 			}
@@ -1519,33 +1525,33 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		const buffergeometry = new BufferGeometry();
 
 		const positions = new Float32Array( geometry.vertices.length * 3 );
-		buffergeometry.setAttribute( 'position', new BufferAttribute( positions, 3 ).copyVector3sArray( geometry.vertices ) );
+		buffergeometry.setAttribute( 'position', copyVector3sArray(new BufferAttribute( positions, 3 ), geometry.vertices ) );
 
 		if ( geometry.normals.length > 0 ) {
 
 			const normals = new Float32Array( geometry.normals.length * 3 );
-			buffergeometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ).copyVector3sArray( geometry.normals ) );
+			buffergeometry.setAttribute( 'normal', copyVector3sArray(new BufferAttribute( normals, 3 ), geometry.normals ) );
 
 		}
 
 		if ( geometry.colors.length > 0 ) {
 
 			const colors = new Float32Array( geometry.colors.length * 3 );
-			buffergeometry.setAttribute( 'color', new BufferAttribute( colors, 3 ).copyColorsArray( geometry.colors ) );
+			buffergeometry.setAttribute( 'color', copyVector3sArray(new BufferAttribute( colors, 3 ), geometry.colors ) );
 
 		}
 
 		if ( geometry.uvs.length > 0 ) {
 
 			const uvs = new Float32Array( geometry.uvs.length * 2 );
-			buffergeometry.setAttribute( 'uv', new BufferAttribute( uvs, 2 ).copyVector2sArray( geometry.uvs ) );
+			buffergeometry.setAttribute( 'uv', copyVector2sArray(new BufferAttribute( uvs, 2 ), geometry.uvs ) );
 
 		}
 
 		if ( geometry.uvs2.length > 0 ) {
 
 			const uvs2 = new Float32Array( geometry.uvs2.length * 2 );
-			buffergeometry.setAttribute( 'uv2', new BufferAttribute( uvs2, 2 ).copyVector2sArray( geometry.uvs2 ) );
+			buffergeometry.setAttribute( 'uv2', copyVector2sArray(new BufferAttribute( uvs2, 2 ), geometry.uvs2 ) );
 
 		}
 
@@ -1567,7 +1573,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 				const attribute = new Float32BufferAttribute( morphTarget.data.length * 3, 3 );
 				attribute.name = morphTarget.name;
 
-				array.push( attribute.copyVector3sArray( morphTarget.data ) );
+				array.push( copyVector3sArray(attribute, morphTarget.data ) );
 
 			}
 
@@ -1580,14 +1586,16 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		if ( geometry.skinIndices.length > 0 ) {
 
 			const skinIndices = new Float32BufferAttribute( geometry.skinIndices.length * 4, 4 );
-			buffergeometry.setAttribute( 'skinIndex', skinIndices.copyVector4sArray( geometry.skinIndices ) );
+      copyVector4sArray(skinIndices, geometry.skinIndices);
+			buffergeometry.setAttribute( 'skinIndex', skinIndices);
 
 		}
 
 		if ( geometry.skinWeights.length > 0 ) {
 
 			const skinWeights = new Float32BufferAttribute( geometry.skinWeights.length * 4, 4 );
-			buffergeometry.setAttribute( 'skinWeight', skinWeights.copyVector4sArray( geometry.skinWeights ) );
+      copyVector4sArray(skinWeights, geometry.skinWeights);
+			buffergeometry.setAttribute( 'skinWeight', skinWeights );
 
 		}
 
@@ -1616,7 +1624,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		const buffergeometry = new BufferGeometry();
 
 		const positions = new Float32Array( this.vertices.length * 3 );
-		buffergeometry.setAttribute( 'position', new BufferAttribute( positions, 3 ).copyVector3sArray( this.vertices ) );
+		buffergeometry.setAttribute( 'position', copyVector3sArray(new BufferAttribute( positions, 3 ), this.vertices ) );
 
 		if ( this.normals.length > 0 ) {
 			const normals = new Float32Array( this.normals.length );
@@ -1641,7 +1649,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
         colorArray.push(new Color( this.colors[ i ] ));
       }
       const colors = new Float32Array( colorArray.length * 3 );
-			buffergeometry.setAttribute( 'color', new BufferAttribute( colors, 3 ).copyColorsArray( colorArray ) );
+			buffergeometry.setAttribute( 'color', copyColorsArray(new BufferAttribute( colors, 3 ), colorArray ) );
 
     } else {
 
@@ -1650,7 +1658,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
         colorsArray[i] = 1.0;
       }
       buffergeometry.setAttribute( 'color', new BufferAttribute( colorsArray, 3 ) );
-  
+
     }
 
     if (this.faces.length > 0) {
@@ -1664,17 +1672,17 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
         indices.push(this.faces[i].a, this.faces[i].b, this.faces[i].c);
 
         const vertexColors = this.faces[i].vertexColors;
-    
+
           if ( vertexColors.length === 3 ) {
-    
+
             colors.push( vertexColors[ 0 ], vertexColors[ 1 ], vertexColors[ 2 ] );
-    
+
           } else {
-    
+
             const color = this.faces[i].color;
-    
+
             colors.push( color, color, color );
-    
+
         }
 
       }
@@ -1683,7 +1691,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 //        const colorsArray = new Float32Array( colors.length * 3 );
 //        buffergeometry.setAttribute( 'color', new BufferAttribute( colorsArray, 3 ).copyColorsArray( colors ) );
-  
+
 //      }
 
       buffergeometry.setIndex( indices );
@@ -1706,7 +1714,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 				const attribute = new Float32BufferAttribute( morphTarget.vertices.length * 3, 3 );
 				attribute.name = morphTarget.name;
 
-				array.push( attribute.copyVector3sArray( morphTarget.vertices ) );
+				array.push( copyVector3sArray(attribute, morphTarget.vertices ) );
 
         if (morphTarget.normals) {
 
@@ -1714,8 +1722,8 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
           const attribute = new Float32BufferAttribute( morphTarget.normals.length * 3, 3 );
           attribute.name = morphTarget.name;
 
-          normalsArray.push( attribute.copyVector3sArray( morphTarget.normals ) );
-  
+          normalsArray.push( copyVector3sArray(attribute, morphTarget.normals ) );
+
         }
 
 			}
@@ -1795,10 +1803,13 @@ Geometry.createBufferGeometryFromObject = function ( object ) {
 	if ( object.isPoints || object.isLine ) {
 
 		const positions = new Float32BufferAttribute( geometry.vertices.length * 3, 3 );
+    copyVector3sArray(positions, geometry.vertices );
+
 		const colors = new Float32BufferAttribute( geometry.colors.length * 3, 3 );
+    copyColorsArray(colors, geometry.colors);
 
-		buffergeometry.setAttribute( 'position', positions.copyVector3sArray( geometry.vertices ) );
-		buffergeometry.setAttribute( 'color', colors.copyColorsArray( geometry.colors ) );
+		buffergeometry.setAttribute( 'position', positions );
+		buffergeometry.setAttribute( 'color', colors );
 
 		if ( geometry.lineDistances && geometry.lineDistances.length === geometry.vertices.length ) {
 

package/src/three/Loader.js

@@ -308,6 +308,7 @@ Object.assign( Loader.prototype, {
 					case 'opacity':
 					case 'reflectivity':
 					case 'transparent':
+          case 'video':
 					case 'visible':
 					case 'wireframe':
 						json[ name ] = value;