easy-three-utils 0.0.1

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "easy-three-utils",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "types": "./index.d.ts",
+  "description": ""
+}

package/src/common/index.ts

@@ -0,0 +1,24 @@
+import { useLoader } from './useLoader'
+import { useMark, EMarkDefaultStyle } from './useMark'
+import { useLine2 } from './useLine2'
+import { useLocationCalculator } from './useLocationCalculator'
+import { Animation } from './useTween'
+
+import type { IPathItem } from './useTween'
+
+export {
+    useLoader,
+
+    useMark,
+    EMarkDefaultStyle,
+
+    useLine2,
+
+    useLocationCalculator,
+
+    Animation
+}
+
+export type {
+    IPathItem
+}

package/src/common/useLine2.ts

@@ -0,0 +1,87 @@
+import * as THREE from 'three'
+import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+const setLineGeometry = (start: THREE.Vector3, end: THREE.Vector3) => {
+    const pointArr = [start.x, start.y, start.z, end.x, end.y, end.z];
+    const geometry = new LineGeometry();
+    geometry.setPositions(pointArr);
+
+    return geometry;
+}
+
+const createLine2 = (config: {
+    name: string;
+    startPos: THREE.Vector3;
+    endPos: THREE.Vector3;
+    color?: number;
+    linewidth?: number;
+}) => {
+    const color = config.color ? config.color : 0xFF9100;
+    const linewidth = config.linewidth ? config.linewidth : 6;
+
+    const geometry = setLineGeometry(config.startPos, config.endPos)
+    const centerPoint = new THREE.Vector3().copy(config.startPos).add(config.endPos).multiplyScalar(0.5)
+    const distance = Number(new THREE.Vector3().copy(config.startPos).distanceTo(config.endPos))
+
+    const material = new LineMaterial({
+        color,
+        linewidth
+    })
+    material.resolution.set(window.innerWidth, window.innerHeight);
+    const line = new Line2(geometry, material);
+    line.name = config.name
+    line.userData.startPos = config.startPos
+    line.userData.endPos = config.endPos
+
+    return {
+        centerPoint,
+        distance,
+        line
+    }
+}
+
+const updateLine2 = (config: {
+    line: Line2;
+    startPos?: THREE.Vector3;
+    endPos?: THREE.Vector3;
+    color?: THREE.Color;
+    linewidth?: number;
+}) => {
+    if (config.color) {
+        config.line.material.color = config.color
+    }
+    if (config.linewidth) {
+        config.line.material.linewidth = config.linewidth
+    }
+    if (config.startPos) {
+        config.line.userData.startPos = config.startPos
+    }
+    if (config.endPos) {
+        config.line.userData.endPos = config.endPos
+    }
+    if (config.startPos || config.endPos) {
+        const geometry = setLineGeometry(config.line.userData.startPos, config.line.userData.endPos)
+        config.line.geometry = geometry
+    }
+
+    const centerPoint = new THREE.Vector3().copy(config.line.userData.startPos).add(config.line.userData.endPos).multiplyScalar(0.5)
+    const distance = Number(new THREE.Vector3().copy(config.line.userData.startPos).distanceTo(config.line.userData.endPos))
+
+    return {
+        centerPoint,
+        distance
+    }
+}
+
+const useLine2 = () => {
+    return {
+        createLine2,
+        updateLine2
+    }
+}
+
+export {
+    useLine2
+}

package/src/common/useLoader.ts

@@ -0,0 +1,184 @@
+import * as THREE from 'three'
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js"
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
+import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js'
+import { TilesRenderer } from '../tileRenderer'
+import { GoogleCloudAuthPlugin } from '../tileRenderer/plugins';
+import { enableDefaultEvent, EDefaultEvent } from '../core'
+
+//todo 1.曝光
+interface IThreeLoaders {
+    GLTFLoader: GLTFLoader | null,
+    DRACOLoader: DRACOLoader | null,
+    OBJLoader: OBJLoader | null,
+    MTLLoader: MTLLoader | null,
+    FBXLoader: FBXLoader | null,
+    TGALoader: TGALoader | null,
+    TextureLoader: THREE.TextureLoader | null
+}
+
+const threeLoaders: IThreeLoaders = {
+    GLTFLoader: null,
+    DRACOLoader: null,
+    OBJLoader: null,
+    MTLLoader: null,
+    FBXLoader: null,
+    TGALoader: null,
+    TextureLoader: null
+}
+
+const useLoader = () => {
+    const useTextureLoader = (url: string, callback?: (texture: THREE.Texture) => void) => {
+        threeLoaders.TextureLoader = new THREE.TextureLoader()
+        const texture = threeLoaders.TextureLoader.load(url, (texture) => {
+            callback && callback(texture)
+        })
+        return texture;
+    }
+
+    const setFBXLoader = () => {
+        threeLoaders.FBXLoader = new FBXLoader()
+        threeLoaders.FBXLoader.setPath("/model")
+    }
+
+    const useFBXLoader = (url: string, callback: (object: THREE.Group & Record<'mixer', THREE.AnimationMixer>) => void, xhrCallback?: (xhr: ProgressEvent<EventTarget>) => void) => {
+        setFBXLoader()
+
+        threeLoaders.FBXLoader!.load(url, (object) => {
+            object.traverse((child) => {
+                if (child instanceof THREE.Mesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                    child.material.fog = true;
+                    child.material.emissive = child.material.color;
+                    child.material.emissiveMap = child.material.map;
+                    child.material.side = 0;
+                    child.material.shadowSide = THREE.BackSide;
+                }
+            });
+            callback(object as THREE.Group & Record<'mixer', THREE.AnimationMixer>)
+        }, (xhr) => {
+            xhrCallback && xhrCallback(xhr)
+        })
+    }
+
+    const setGLTFLoader = () => {
+        threeLoaders.DRACOLoader = new DRACOLoader()
+        threeLoaders.DRACOLoader.setDecoderPath('/draco/gltf/');
+        threeLoaders.DRACOLoader.preload()
+
+        threeLoaders.GLTFLoader = new GLTFLoader()
+        threeLoaders.GLTFLoader.setDRACOLoader(threeLoaders.DRACOLoader)
+    }
+
+    const useGLTFLoader = (url: string, callback: (object: THREE.Group, animations: {
+        mixer: THREE.AnimationMixer | null,
+        actions: THREE.AnimationAction[]
+    }) => void, xhrCallback?: (xhr: ProgressEvent<EventTarget>) => void) => {
+        if (!threeLoaders.GLTFLoader) {
+            setGLTFLoader()
+        }
+
+        if (url.includes('http')) {
+            threeLoaders.GLTFLoader!.setPath('')
+        } else {
+            threeLoaders.GLTFLoader!.setPath('/model')
+        }
+
+        threeLoaders.GLTFLoader!.load(url, (object) => {
+            object.scene.updateMatrixWorld()
+            object.scene.traverse(child => {
+                if (child instanceof THREE.Mesh) {
+                    child.material.fog = true;
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                    child.material.side = 0;
+                    child.material.shadowSide = THREE.BackSide;
+                }
+            })
+            object.scene.animations = object.animations
+
+            const animaion: {
+                mixer: THREE.AnimationMixer | null,
+                actions: THREE.AnimationAction[]
+            } = {
+                mixer: null,
+                actions: []
+            }
+            animaion.mixer = new THREE.AnimationMixer(object.scene)
+            animaion.actions = object.animations.map(item => animaion.mixer!.clipAction(item))
+
+            callback(object.scene, animaion)
+        }, (xhr) => {
+            xhrCallback && xhrCallback(xhr)
+        })
+    }
+
+    const useOfflineGoogleCloudTilesLoader = (config: {
+        url: string;
+        lat: number;
+        lon: number;
+        config: ITHREEConfiguration;
+    }, callback?: (tilesRenderer: TilesRenderer, clearFn: () => void) => void) => {
+        let tilesRenderer: TilesRenderer | null = new TilesRenderer();
+        tilesRenderer.registerPlugin(new GoogleCloudAuthPlugin({ url: config.url }));
+        tilesRenderer.setLatLonToYUp(config.lat * THREE.MathUtils.DEG2RAD, config.lon * THREE.MathUtils.DEG2RAD);
+
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('../draco/gltf/');
+
+        const loader = new GLTFLoader(tilesRenderer.manager);
+        loader.setDRACOLoader(dracoLoader);
+
+        tilesRenderer.manager.addHandler(/\.gltf$/, loader);
+
+        enableDefaultEvent(EDefaultEvent.INSERTANIMATIONS, {
+            cb() {
+                if (tilesRenderer) {
+                    tilesRenderer.update()
+                    tilesRenderer.setResolutionFromRenderer(config.config.camera!, config.config.renderer!);
+                    tilesRenderer.setCamera(config.config.camera!);
+                }
+            }
+        })
+
+        config.config.scene!.add(tilesRenderer.group)
+        tilesRenderer.setResolutionFromRenderer(config.config.camera!, config.config.renderer!);
+        tilesRenderer.setCamera(config.config.camera!);
+
+        const clear = () => {
+            if (tilesRenderer) {
+                config.config.scene!.remove(tilesRenderer.group)
+                tilesRenderer = null
+            }
+        }
+
+        callback && callback(tilesRenderer, clear)
+    }
+
+    //todo 1.多动画封装 2.动画库封装 3.多动画加载时间差 4.同模型克隆
+    const useMixer: (object: THREE.Object3D, animate: THREE.AnimationClip) => { mixer: THREE.AnimationMixer, action: THREE.AnimationAction } = (object: THREE.Object3D, animate: THREE.AnimationClip) => {
+        const mixer = new THREE.AnimationMixer(object)
+        const action = mixer.clipAction(animate);
+
+        return {
+            mixer,
+            action
+        }
+    }
+
+    return {
+        useTextureLoader,
+        useFBXLoader,
+        useGLTFLoader,
+        useOfflineGoogleCloudTilesLoader,
+        useMixer
+    }
+}
+
+export {
+    useLoader
+}

package/src/common/useLocationCalculator.ts

@@ -0,0 +1,145 @@
+import * as THREE from 'three'
+
+interface IPercentages {
+    index: number;
+    percentages: number[];
+}
+
+const useLocationCalculator = () => {
+    const getEqualNodes = (points: THREE.Vector3[], parts: number) => {
+        const percentages: IPercentages[] = getPercentage(points, parts)
+
+        const node = points.reduce((pre: THREE.Vector3[], next, index) => {
+            if (index === 0) {
+                return pre
+            } else {
+                const spline = new THREE.LineCurve3(points[index - 1], next);
+                const node = spline.getPoints(9999)
+                for (const item of percentages) {
+                    if (item.index === index) {
+                        pre = pre.concat(item.percentages.map((ele) => {
+                            if (Math.round(ele * 100) === 0) {
+                                return node[Math.round(ele * 100)]
+                            } else {
+                                return node[Math.round(ele * 100) - 1]
+                            }
+                        }))
+                    }
+                }
+                return pre
+            }
+        }, [])
+
+        return {
+            node
+        }
+    }
+
+    const getPercentage = (points: THREE.Vector3[], parts: number) => {
+        const linePercentages = points.reduce((data: {
+            totalLength: number;
+            lengths: number[];
+            percentages: number[];
+        }, next, index) => {
+            if (index === 0) {
+                return data
+            } else {
+                const length = points[index - 1].distanceTo(next)
+                data.lengths.push(length)
+                data.totalLength = data.totalLength + length
+                if (index === points.length - 1) {
+                    for (const [index, item] of data.lengths.entries()) {
+                        if (index === 0) {
+                            data.percentages.push(Math.round(item / data.totalLength * 10000) / 100.00)
+                        } else {
+                            data.percentages.push(Math.round(item / data.totalLength * 10000) / 100.00 + data.percentages[index - 1])
+                        }
+                    }
+                    data.percentages.unshift(0)
+                }
+                return data
+            }
+        }, {
+            totalLength: 0,
+            lengths: [],
+            percentages: []
+        }).percentages
+
+        const equalPercentage = new Array(parts - 1).fill('').reduce((percentages, next, index) => {
+            const percentage = (index + 1) * Math.round(Math.round(1 / (parts - 1) * 10000)) / 100.00
+            if (percentage >= 100) {
+                percentages.push(99.99)
+            } else {
+                percentages.push(percentage)
+            }
+            return percentages
+        }, [])
+
+        const data = linePercentages.reduce((data: {
+            name: number;
+            percentages: number[];
+            index: number;
+        }[], next: number, i: number) => {
+            if (i > 0) {
+                for (const item of equalPercentage) {
+                    const pre = linePercentages[i - 1]
+                    if (item > pre && item < next) {
+                        const percentage = Math.round((item - pre) / (next - pre) * 10000) / 100.00
+                        if (data.length === 0) {
+                            data.push({
+                                name: next,
+                                percentages: [percentage],
+                                index: i
+                            })
+                        } else {
+                            const keys = data.map(ele => {
+                                if (ele.name === next) {
+                                    ele.percentages.push(percentage)
+                                }
+                                return ele.name
+                            })
+                            if (!keys.includes(next)) {
+                                data.push({
+                                    name: next,
+                                    percentages: [percentage],
+                                    index: i
+                                })
+                            }
+                        }
+                    }
+                }
+                if (i === linePercentages.length - 1) {
+                    if (!data.map(ele => ele.index).includes(1)) {
+                        data.unshift({
+                            name: 0,
+                            percentages: [0],
+                            index: 1
+                        })
+                    } else {
+                        for (const item of data) {
+                            if (item.index === 1) {
+                                item.percentages.unshift(0)
+                            }
+                        }
+                    }
+                }
+            }
+            return data
+        }, []).map(item => {
+            return {
+                percentages: item.percentages,
+                index: item.index
+            }
+        })
+
+        return data
+    }
+
+    return {
+        getEqualNodes
+    }
+}
+
+export {
+    useLocationCalculator
+}

package/src/common/useMark.ts

@@ -0,0 +1,42 @@
+import * as THREE from 'three'
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+
+enum EMarkDefaultStyle {
+    NORMAL = 'three_mark',
+    ACTIVE = 'three_mark_active'
+}
+
+const useMark = () => {
+    const createMark = (pos: THREE.Vector3, className: string) => {
+        const div = document.createElement('div');
+        div.style.pointerEvents = 'auto'
+        div.classList.add(className)
+        const mark = new CSS2DObject(div)
+        mark.userData = {
+            ray: {
+                filterable: true
+            }
+        }
+        mark.position.set(pos.x, pos.y, pos.z)
+        return {
+            mark
+        }
+    }
+
+    const updateMarkStyle = (marks: CSS2DObject[], className: string) => {
+        marks.forEach(mark => {
+            mark.element.classList.remove(...mark.element.classList)
+            mark.element.classList.add(className)
+        })
+    }
+
+    return {
+        createMark,
+        updateMarkStyle
+    }
+}
+
+export {
+    useMark,
+    EMarkDefaultStyle
+}

package/src/common/useTween.ts

@@ -0,0 +1,86 @@
+import * as THREE from 'three'
+import * as TWEEN from '@tweenjs/tween.js'
+
+export interface IPathItem {
+    startPos: THREE.Vector3;
+    endPos: THREE.Vector3;
+    delay: number;
+    speed: number;
+}
+
+type TTweenType = 'start' | 'pause' | 'stop' | 'resume'
+
+class Animation {
+    tweenActionList: TWEEN.Tween<THREE.Vector3>[] = []
+    currentMesh: THREE.Object3D | null = null
+    currentIndex: number = 0
+    complete: boolean = false
+    x: number = 0
+    y: number = 0
+    z: number = 0
+
+    createTween = (pre: THREE.Vector3, next: THREE.Vector3, delay: number, speed: number, index: number, loop: boolean) => {
+        let currentDelay = 0
+        if (index === 0) {
+            currentDelay = delay * 1000
+        }
+
+        const time = new THREE.Vector3(pre.x, pre.y, pre.z).distanceTo(new THREE.Vector3(next.x, next.y, next.z)) / (speed * 0.001)
+        const tween = new TWEEN.Tween(pre).to(next, time).easing(TWEEN.Easing.Linear.None).delay(currentDelay).onUpdate((e) => {
+            this.currentIndex = index
+            if (this.x) {
+                this.currentMesh!.position.set(this.x, this.y, this.z)
+            }
+            this.currentMesh!.lookAt(e.x, e.y, e.z)
+            this.x = e.x
+            this.y = e.y
+            this.z = e.z
+        }).onComplete((e) => {
+            if (index === this.tweenActionList.length - 1) {
+                if (!loop) {
+                    this.complete = true
+                }
+                this.currentMesh!.position.set(e.x, e.y, e.z)
+                this.currentIndex = 0
+                this.x = 0
+                this.y = 0
+                this.z = 0
+            }
+        })
+        return tween;
+    }
+
+    setTweenList = (path: IPathItem[], loop: boolean) => {
+        this.tweenActionList = []
+        path.forEach((item, i) => {
+            const startVector3 = new THREE.Vector3(item.startPos.x, item.startPos.y, item.startPos.z)
+            const endVector3 = new THREE.Vector3(item.endPos.x, item.endPos.y, item.endPos.z)
+            const tweenAction = this.createTween(startVector3, endVector3, item.delay, item.speed, i, loop)
+            if (i > 0) {
+                this.tweenActionList[i - 1].chain(tweenAction)
+            }
+            this.tweenActionList.push(tweenAction)
+        })
+        if (this.tweenActionList.length > 1 && loop) {
+            this.tweenActionList[this.tweenActionList.length - 1].chain(this.tweenActionList[0])
+        }
+        if (path.length === 1 && loop) {
+            this.tweenActionList[this.tweenActionList.length - 1].repeat(Infinity)
+        }
+    }
+
+    handleAnimation = (mesh: THREE.Object3D, type: TTweenType) => {
+        if (!this.tweenActionList.length) return
+        if (type === 'start') {
+            this.complete = false
+        } else if (type === 'stop') {
+            this.complete = true
+        }
+        this.currentMesh = mesh
+        this.tweenActionList[this.currentIndex][type]()
+    }
+}
+
+export {
+    Animation
+}

package/src/core/basic/camera.ts

@@ -0,0 +1,28 @@
+import * as THREE from 'three'
+
+export type TCamera = {
+    fov: number;
+    aspect: number;
+    near: number;
+    far: number;
+    pos: {
+        x: number;
+        y: number;
+        z: number;
+    },
+    up: number;
+    lookAt?: THREE.Vector3;
+}
+
+const createCamera = (options: TCamera) => {
+    const camera = new THREE.PerspectiveCamera(options.fov, options.aspect, options.near, options.far)
+    camera.position.set(options.pos.x, options.pos.y, options.pos.z)
+    camera.up.y = options.up;
+    camera.lookAt(options.lookAt!)
+
+    return camera
+}
+
+export {
+    createCamera
+}

package/src/core/basic/clock.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three'
+
+const createClock = () => {
+    const clock = new THREE.Clock()
+
+    return clock
+}
+
+export {
+    createClock
+}

package/src/core/basic/control.ts

@@ -0,0 +1,32 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+
+export type TControl = {
+    camera: THREE.PerspectiveCamera;
+    element: HTMLElement;
+    pos: {
+        x: number;
+        y: number;
+        z: number;
+    },
+    minDistance: number;
+    maxDistance: number;
+    minPolarAngle?: number;
+    maxPolarAngle?: number;
+}
+
+const createControl = (options: TControl) => {
+    const control = new OrbitControls(options.camera!, options.element)
+    control.target.set(options.pos.x, options.pos.y, options.pos.z)
+    control.minDistance = options.minDistance
+    control.maxDistance = options.maxDistance
+    control.enableDamping = true
+    control.maxPolarAngle = options.maxPolarAngle ? options.maxPolarAngle : 3 * Math.PI / 8
+    control.minPolarAngle = options.minPolarAngle ? options.minPolarAngle : 0
+
+    return control
+}
+
+export {
+    createControl
+}

package/src/core/basic/index.ts

@@ -0,0 +1,35 @@
+import { createScene } from './scene'
+import { createCamera } from './camera'
+import { createControl } from './control'
+import { createLabelRenderer } from './labelRenderer'
+import { createRenderer } from './renderer'
+import { createStats } from './stats'
+import { createClock } from './clock'
+import { createAmbientLight, createDirectionalLight } from './light'
+
+import type { TControl } from './control'
+import type { TLabelRenderer } from './labelRenderer'
+import type { TAmbientLight, TDirectionalLight } from './light'
+import type { TRenderer } from './renderer'
+import type { TCamera } from './camera'
+
+export {
+    createScene,
+    createCamera,
+    createControl,
+    createLabelRenderer,
+    createRenderer,
+    createStats,
+    createClock,
+    createAmbientLight,
+    createDirectionalLight
+}
+
+export type {
+    TControl,
+    TLabelRenderer,
+    TAmbientLight,
+    TDirectionalLight,
+    TRenderer,
+    TCamera
+}