three-base 1.0.13 → 1.0.15

package/index.ts

@@ -14,6 +14,9 @@ export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
 export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
 export type { Keyframe } from "./lib/KeyFrameAnimation";
 
+//实例模型组对象
+export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
+
 //点光源
 export { default as PointLight } from "./lib/PointLight";
 

package/lib/InstancedGroupMesh.ts

@@ -0,0 +1,71 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-02-21 09:55:52 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-21 10:12:33
+ */
+
+import * as THREE from 'three'
+
+// 模型组转成 实例对象
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh = true
+
+    count: number = 0
+
+    meshCollect: Record<string, THREE.Mesh[]> = {}
+
+    instanceCollect: Record<string, THREE.InstancedMesh> = {}
+
+    static matrix = new THREE.Matrix4()
+
+    constructor(group: THREE.Group, count: number) {
+        super()
+
+        this.count = count
+
+        const { meshCollect, instanceCollect } = this
+
+        // collect all mesh counts, in case there are more than one copy of the same mesh in this group
+        group.traverse((obj) => {
+            if (obj.type !== 'Mesh') return
+            const mesh = obj as THREE.Mesh
+
+            // this is important
+            mesh.updateMatrix()
+
+            // same geometry and same material consider as the same mesh
+            const uuid = mesh.geometry.uuid + '/' + (mesh.material as THREE.Material).uuid
+
+            if (meshCollect[uuid]) {
+                meshCollect[uuid].push(mesh)
+            } else {
+                meshCollect[uuid] = [mesh]
+            }
+        })
+
+        // create all instances
+        Object.keys(meshCollect).forEach(uuid => {
+            const meshes = meshCollect[uuid]
+            const mesh = meshes[0]
+
+            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
+            instanceCollect[uuid] = instancedMesh
+            this.add(instancedMesh)
+        })
+    }
+
+    setMatrixAt(index: number, matrix: THREE.Matrix4) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid]
+            const collect = this.meshCollect[uuid]
+            collect.forEach((mesh: THREE.Mesh, i: number) => {
+                InstancedGroupMesh.matrix.copy(mesh.matrix)
+                InstancedGroupMesh.matrix.premultiply(matrix)
+
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            })
+        })
+    }
+}

package/lib/KeyFrameAnimation.ts

@@ -20,6 +20,7 @@ export type Keyframe = {
 
 
 export type KeyframeAnimationProps = {
+    speedScale?: number; // 速度调整
     object3d: Object3D; // 需要移动的对象
     keyframes: Array<Keyframe>,
 }
@@ -30,6 +31,9 @@ export default class KeyframeAnimation extends Object3D {
     constructor(props: KeyframeAnimationProps) {
         super();
 
+        // 速度调整
+        this.speedScale = props.speedScale || 1;
+
         // 设置关键帧对象数组
         this.setKeyframes(props.keyframes);
 
@@ -39,6 +43,9 @@ export default class KeyframeAnimation extends Object3D {
 
     }
 
+    // 速度调整
+    speedScale = 1;
+
     // 需要需要移动的对象
     object3d: Object3D;
 

package/lib/threeLoader.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader } from "three";
+import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -60,9 +60,26 @@ class ThreeLoader extends EventDispatcher {
         let texture = this.textureMap.get(src);
 
         if (!texture) {
-            texture = this.textureLoader.load(src, tex => {
-                tex.image.crossOrigin = "anonymous";
-            });
+            if (/\.mp4$/.test(src)) {
+                const videoDom = document.createElement("video");
+                videoDom.autoplay = true;
+                videoDom.loop = true;
+                videoDom.muted = true;
+                videoDom.preload = "auto";
+                videoDom.playsInline = true;
+                videoDom.src = src;
+                document.addEventListener("pointerup", () => {
+                    videoDom.pause();
+                    videoDom.play();
+                });
+                texture = new VideoTexture(videoDom);
+            } else {
+
+                texture = this.textureLoader.load(src, tex => {
+                    tex.image.crossOrigin = "anonymous";
+                });
+            }
+
             this.textureMap.set(src, texture);
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "description": "three 3d three-base",
     "keywords": [
         "three",