easy-three-utils 0.0.1

package/src/core/basic/labelRenderer.ts

@@ -0,0 +1,26 @@
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
+
+export type TLabelRenderer = {
+    position: string;
+    top: string;
+    size: {
+        width: number;
+        height: number;
+    };
+    element: HTMLElement;
+}
+
+const createLabelRenderer = (options: TLabelRenderer) => {
+    const labelRenderer = new CSS2DRenderer();
+    labelRenderer!.domElement.style.position = options.position;
+    labelRenderer!.domElement.style.top = options.top;
+    labelRenderer!.domElement.style.pointerEvents = 'none';
+    labelRenderer.setSize(options.size.width, options.size.height)
+    options.element.appendChild(labelRenderer.domElement)
+
+    return labelRenderer
+}
+
+export {
+    createLabelRenderer
+}

package/src/core/basic/light.ts

@@ -0,0 +1,63 @@
+import * as THREE from 'three'
+
+export type TAmbientLight = {
+    color: string | number;
+    opacity: number;
+}
+
+export type TDirectionalLight = {
+    color: string | number;
+    opacity: number;
+    shadow: {
+        mapSize: number;
+        pos: {
+            x: number;
+            y: number;
+            z: number;
+        }
+        castShadow: boolean;
+        camera: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            near: number;
+            far: number;
+        }
+        showDirectionalLightHelper: boolean;
+        showShadowCameraHelper: boolean;
+    }
+}
+
+const createAmbientLight = (options: TAmbientLight) => {
+    const light = new THREE.AmbientLight(options.color, options.opacity)
+    return light
+}
+
+const createDirectionalLight = (options: TDirectionalLight) => {
+    const light = new THREE.DirectionalLight(options.color, options.opacity)
+    light.shadow.mapSize.set(options.shadow.mapSize, options.shadow.mapSize)
+    light.position.set(options.shadow.pos.x, options.shadow.pos.y, options.shadow.pos.z)
+    light.castShadow = options.shadow.castShadow;
+    light.shadow.camera.top = options.shadow.camera.top;
+    light.shadow.camera.right = options.shadow.camera.right;
+    light.shadow.camera.bottom = options.shadow.camera.bottom;
+    light.shadow.camera.left = options.shadow.camera.left;
+    light.shadow.camera.near = options.shadow.camera.near;
+    light.shadow.camera.far = options.shadow.camera.far;
+    const directionalLightHelper = new THREE.DirectionalLightHelper(light, 10000);
+    const shadowCameraHelper = new THREE.CameraHelper(light.shadow.camera)
+
+    return {
+        light,
+        directionalLightHelper,
+        shadowCameraHelper,
+        showDirectionalLightHelper: options.shadow.showDirectionalLightHelper,
+        showShadowCameraHelper: options.shadow.showShadowCameraHelper
+    }
+}
+
+export {
+    createAmbientLight,
+    createDirectionalLight
+}

package/src/core/basic/renderer.ts

@@ -0,0 +1,37 @@
+import * as THREE from 'three'
+
+export type TRenderer = {
+    element: HTMLElement;
+    antialias: boolean;
+    alpha: boolean;
+    size: {
+        width: number;
+        height: number;
+    },
+    pixelRatio: number;
+    shadowMap: boolean;
+    clear: {
+        color: string;
+        alpha: number;
+    }
+}
+
+const createRenderer = (options: TRenderer) => {
+    const renderer = new THREE.WebGLRenderer({
+        antialias: options.antialias,
+        alpha: options.alpha
+    });
+    renderer.setClearColor(options.clear.color);
+    renderer.setClearAlpha(options.clear.alpha);
+    renderer.setSize(options.size.width, options.size.height);
+    renderer.setPixelRatio(options.pixelRatio);
+    renderer.shadowMap.enabled = options.shadowMap;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
+    options.element.appendChild(renderer.domElement)
+
+    return renderer
+}
+
+export {
+    createRenderer
+}

package/src/core/basic/scene.ts

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

package/src/core/basic/stats.ts

@@ -0,0 +1,16 @@
+import Stats from 'three/examples/jsm/libs/stats.module.js'
+
+export type TStats = {
+    element: HTMLElement;
+}
+
+const createStats = (options: TStats) => {
+    const stats = new Stats();
+    options.element.appendChild(stats.dom)
+
+    return stats
+}
+
+export {
+    createStats
+}

package/src/core/event.ts

@@ -0,0 +1,74 @@
+import * as THREE from 'three'
+
+enum EDefaultEvent {
+    GETRAYPOSONMOUSECLICK = 'getRayPosOnMouseClick',
+    GETRAYPOSONMOUSEMOVE = 'getRayPosOnMouseMove',
+    INSERTANIMATIONS = 'insertAnimations',
+    DEFAULT = 'default'
+}
+
+type TConfigType = {
+    getRayPosOnMouseClick: {
+        cb: (pos: THREE.Vector3, object: THREE.Object3D) => void
+    }
+    getRayPosOnMouseMove: {
+        cb: (pos: THREE.Vector3, object: THREE.Object3D) => void
+    },
+    insertAnimations: {
+        cb: () => void
+    },
+    default: never
+}
+
+const defaultEvent = <T extends EDefaultEvent>(type: T, config: TConfigType[T] & { threeConfiguration: ITHREEConfiguration }) => {
+    const mouseclick = (e: MouseEvent, selected: THREE.Intersection) => {
+        switch (type) {
+            case EDefaultEvent.GETRAYPOSONMOUSECLICK:
+                (config as TConfigType[EDefaultEvent.GETRAYPOSONMOUSECLICK]).cb(selected.point, selected.object)
+                break;
+        }
+    }
+
+    const mousemove = (e: MouseEvent, selected: THREE.Intersection) => {
+        switch (type) {
+            case EDefaultEvent.GETRAYPOSONMOUSEMOVE:
+                (config as TConfigType[EDefaultEvent.GETRAYPOSONMOUSEMOVE]).cb(selected.point, selected.object)
+                break;
+        }
+    }
+
+    const mouseup = (e: MouseEvent, selected: THREE.Intersection) => {
+        switch (type) {
+        }
+    }
+
+    const mousedown = (e: MouseEvent, selected: THREE.Intersection) => {
+        switch (type) {
+        }
+    }
+
+    const animation = () => {
+        switch (type) {
+            case EDefaultEvent.INSERTANIMATIONS:
+                (config as TConfigType[EDefaultEvent.INSERTANIMATIONS]).cb()
+                break;
+        }
+    }
+
+    return {
+        mouseclick,
+        mousemove,
+        mousedown,
+        mouseup,
+        animation
+    }
+}
+
+export {
+    defaultEvent,
+    EDefaultEvent
+}
+
+export type {
+    TConfigType
+}

package/src/core/index.ts

@@ -0,0 +1,11 @@
+import { useThree } from './main'
+
+const { loadThree, enableCustomEvent, EDefaultEvent, enableDefaultEvent, clearThree } = useThree()
+
+export {
+    loadThree,
+    enableCustomEvent,
+    EDefaultEvent,
+    enableDefaultEvent,
+    clearThree
+}

package/src/core/main.ts

@@ -0,0 +1,389 @@
+import * as THREE from 'three'
+// import { AxesHelper, GridHelper, Line } from 'three'
+// import { TransformControlsGizmo, TransformControlsPlane } from 'three/examples/jsm/controls/TransformControls'
+import {
+    createScene,
+    createCamera,
+    createControl,
+    createRenderer,
+    createLabelRenderer,
+    createStats,
+    createClock,
+    createAmbientLight,
+    createDirectionalLight
+} from './basic'
+import { defaultEvent, EDefaultEvent } from './event'
+
+import type {
+    TControl,
+    TLabelRenderer,
+    TAmbientLight,
+    TDirectionalLight,
+    TRenderer,
+    TCamera
+} from './basic'
+import type { TConfigType } from './event'
+
+interface ILight {
+    ambientLight: TAmbientLight;
+    directionalLight: TDirectionalLight;
+}
+
+interface ITHREEOptions {
+    element: HTMLElement;
+    control: Omit<TControl, 'element' | 'camera'>;
+    labelRenderer: Omit<TLabelRenderer, 'element'>;
+    light: ILight;
+    renderer: Omit<TRenderer, 'element'>;
+    camera: TCamera;
+}
+
+interface ITHREEAction {
+    animation: (() => void) | null;
+    clickHandler: ((e: MouseEvent, selected: THREE.Intersection) => void) | null;
+    movementHandler: ((e: MouseEvent, selected: THREE.Intersection) => void) | null;
+    mousedown: ((e: MouseEvent, selected: THREE.Intersection) => void) | null;
+    mouseup: ((e: MouseEvent, selected: THREE.Intersection) => void) | null;
+}
+
+type TNeedlessParamskeys<T> = {
+    [K in keyof T]: T[K] extends never ? K : never
+}[keyof T]
+
+/**
+ *          todo     
+ *          1.雾气设置
+ *          2.设置是否开启动画
+ *          3.提高帧数（移动时释放部分模型细节，切片加载，着色器）
+ *          4.是否加载hepler
+ *          5.设置帧数（30帧）
+ *          6.图层优化
+ *          7.监视内存
+ *          8.hdr
+ *          9.关闭阴影
+ *          10.lod
+ *          11.修改模型细节
+ *          12.indexDB缓存
+ *          13.resize添加节流
+*/
+const useThree = () => {
+    const threeConfiguration: ITHREEConfiguration = {
+        scene: null,
+        camera: null,
+        control: null,
+        renderer: null,
+        labelRenderer: null,
+        stats: null,
+        clock: null,
+        light: {
+            ambient: null,
+            directional: {
+                light: null,
+                directionalLightHelper: null,
+                shadowCameraHelper: null,
+                showDirectionalLightHelper: false,
+                showShadowCameraHelper: false
+            }
+        }
+    }
+
+    const loadThree = (options: ITHREEOptions, succeededCallback: (config: ITHREEConfiguration) => void) => {
+        threeConfiguration.scene = createScene()
+        threeConfiguration.camera = createCamera(Object.assign({}, options.camera, {
+            lookAt: !options.camera.lookAt ? threeConfiguration.scene.position : options.camera.lookAt
+        }))
+        threeConfiguration.renderer = createRenderer(Object.assign({}, options.renderer, {
+            element: options.element
+        }))
+        threeConfiguration.control = createControl(Object.assign({}, options.control, {
+            camera: threeConfiguration.camera,
+            element: threeConfiguration.renderer.domElement
+        }))
+        threeConfiguration.labelRenderer = createLabelRenderer(Object.assign({}, options.labelRenderer, {
+            element: options.element
+        }))
+        threeConfiguration.stats = createStats({
+            element: options.element
+        })
+        threeConfiguration.clock = createClock()
+        threeConfiguration.light.ambient = createAmbientLight(options.light.ambientLight)
+        threeConfiguration.light.directional = createDirectionalLight(options.light.directionalLight)
+
+        setScene(options)
+        render()
+
+        window.onresize = () => {
+            threeConfiguration.camera!.aspect = window.innerWidth / window.innerHeight
+            threeConfiguration.camera!.updateProjectionMatrix()
+            threeConfiguration.renderer!.setSize(window.innerWidth, window.innerHeight)
+            threeConfiguration.labelRenderer!.setSize(window.innerWidth, window.innerHeight)
+        }
+
+        succeededCallback && succeededCallback(threeConfiguration)
+    }
+
+    //todo 设置参数 光源辅助线
+    const setScene = (options: ITHREEOptions) => {
+        threeConfiguration.scene?.add(threeConfiguration.light.ambient!)
+        threeConfiguration.scene?.add(threeConfiguration.light.directional.light!)
+        // threeConfiguration.scene?.add(threeConfiguration.light.directional.directionalLightHelper!)
+        // if (options.showShadowCameraHelper) {
+
+        // }
+    }
+
+    const threeAction: ITHREEAction = {
+        animation: null,
+        clickHandler: null,
+        movementHandler: null,
+        mousedown: null,
+        mouseup: null
+    }
+
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+            render()
+        } else {
+            cancelAnimationFrame(animationId);
+        }
+    })
+
+    let animationId: number;
+    const render = () => {
+        animationId = requestAnimationFrame(render)
+        animation()
+    }
+
+    const animation = () => {
+        if (!threeConfiguration.renderer) {
+            return
+        }
+        threeConfiguration.renderer!.clear()
+        threeConfiguration.renderer!.clearDepth()
+
+        threeAction.animation && threeAction.animation()
+        threeConfiguration.control!.update();
+        threeConfiguration.stats!.update();
+        threeConfiguration.renderer!.setViewport(0, 0, window.innerWidth, window.innerHeight);
+        threeConfiguration.renderer!.autoClear = false;
+        threeConfiguration.renderer!.render(threeConfiguration.scene!, threeConfiguration.camera!)
+        threeConfiguration.labelRenderer!.render(threeConfiguration.scene!, threeConfiguration.camera!)
+    }
+
+    type TMouseEvent = (e: MouseEvent, selected: THREE.Intersection) => void
+
+    let defaultMouseClickEvent: TMouseEvent = () => { };
+    let defaultMouseMoveEvent: TMouseEvent = () => { };
+    let defaultMouseMoveDownEvent: TMouseEvent = () => { };
+    let defaultMouseMoveUpEvent: TMouseEvent = () => { };
+    let defaultAnimationEvent: () => void = () => { };
+
+    let mouseclickEvents: (TMouseEvent)[] = []
+    let mousemoveEvents: (TMouseEvent)[] = []
+    let mousedownEvents: (TMouseEvent)[] = []
+    let mouseupEvents: (TMouseEvent)[] = []
+    let animationEvents: (() => void)[] = []
+    const enableCustomEvent = (
+        mouseEvent?: {
+            clickEvents?: (TMouseEvent)[],
+            moveEvents?: (TMouseEvent)[],
+            downEvents?: (TMouseEvent)[],
+            upEvents?: (TMouseEvent)[],
+        },
+        animation?: (() => void)[],
+    ) => {
+        if (mouseEvent) {
+            const { clickEvents, moveEvents, downEvents, upEvents } = mouseEvent
+            if (clickEvents) {
+                mouseclickEvents = clickEvents
+            }
+            if (moveEvents) {
+                mousemoveEvents = moveEvents
+            }
+            if (downEvents) {
+                mousedownEvents = downEvents
+            }
+            if (upEvents) {
+                mouseupEvents = upEvents
+            }
+            if (animation) {
+                animationEvents = animation
+            }
+        }
+        registrationEvent()
+        threeAction.animation = () => {
+            for (const event of [...animationEvents, defaultAnimationEvent]) {
+                event()
+            }
+        }
+    }
+
+    const enableDefaultEvent: {
+        (eventName: TNeedlessParamskeys<TConfigType>): void;
+        <T extends EDefaultEvent>(eventName: Exclude<`${EDefaultEvent}`, TNeedlessParamskeys<TConfigType>>, config: TConfigType[T]): void;
+    } = <T extends EDefaultEvent>(eventName: T, config?: TConfigType[T]) => {
+        const event = defaultEvent(eventName, Object.assign({}, { threeConfiguration }, config))
+        defaultMouseClickEvent = event.mouseclick
+        defaultMouseMoveEvent = event.mousemove
+        defaultMouseMoveDownEvent = event.mousedown
+        defaultMouseMoveUpEvent = event.mouseup
+        defaultAnimationEvent = event.animation
+
+        registrationEvent()
+        threeAction.animation = () => {
+            for (const event of [...animationEvents, defaultAnimationEvent]) {
+                event()
+            }
+        }
+    }
+
+    const registrationEvent = () => {
+        window.removeEventListener('click', clickHandler, false);
+        window.removeEventListener('mousemove', moveHandler, false);
+        window.removeEventListener('mousedown', mousedownHandler, false);
+        window.removeEventListener('mouseup', mouseupHandler, false);
+
+        threeAction.clickHandler = addMouseAction([...mouseclickEvents, defaultMouseClickEvent])
+        window.addEventListener('click', clickHandler, false);
+
+        threeAction.movementHandler = addMouseAction([...mousemoveEvents, defaultMouseMoveEvent])
+        window.addEventListener('mousemove', moveHandler, false);
+
+        threeAction.mousedown = addMouseAction([...mousedownEvents, defaultMouseMoveDownEvent])
+        window.addEventListener('mousedown', mousedownHandler, false);
+
+        threeAction.mouseup = addMouseAction([...mouseupEvents, defaultMouseMoveUpEvent])
+        window.addEventListener('mouseup', mouseupHandler, false);
+    }
+
+    const addMouseAction = (cbArr: ((e: MouseEvent, selected: THREE.Intersection) => void)[]) => {
+        return (e: MouseEvent, selected: THREE.Intersection) => {
+            if (selected.object instanceof THREE.LineSegments || selected.object instanceof THREE.Mesh || selected.object instanceof THREE.Points || selected.object instanceof THREE.SkinnedMesh) {
+                for (const cb of cbArr) {
+                    cb(e, selected)
+                }
+            }
+        }
+    }
+
+    const clickHandler = (e: MouseEvent) => {
+        if (!(e.target instanceof HTMLCanvasElement)) {
+            return;
+        }
+        e.stopPropagation()
+        mouseEvent(e, threeAction.clickHandler!)
+    }
+
+    const moveHandler = (e: MouseEvent) => {
+        e.stopPropagation()
+        mouseEvent(e, threeAction.movementHandler!)
+    }
+
+    const mousedownHandler = (e: MouseEvent) => {
+        e.stopPropagation()
+        mouseEvent(e, threeAction.mousedown!)
+    }
+
+    const mouseupHandler = (e: MouseEvent) => {
+        e.stopPropagation()
+        mouseEvent(e, threeAction.mouseup!)
+    }
+
+    const basicType = ['Scene', 'AmbientLight', 'DirectionalLight', 'Line2']
+    const mouseEvent = (e: MouseEvent, handler: (e: MouseEvent, selected: THREE.Intersection) => void) => {
+        const vector = new THREE.Vector3();
+        vector.set(
+            (e.clientX / window.innerWidth) * 2 - 1,
+            -(e.clientY / window.innerHeight) * 2 + 1,
+            0.5
+        );
+        if (!threeConfiguration.camera) {
+            return
+        }
+        vector.unproject(threeConfiguration.camera!);
+        const raycaster = new THREE.Raycaster(threeConfiguration.camera!.position, vector.sub(threeConfiguration.camera!.position).normalize());
+        try {
+            const group: THREE.Object3D[] = []
+            threeConfiguration.scene!.traverse(child => {
+                if (child.userData && child.userData.ray && child.userData.ray.filterable) {
+                    return
+                }
+                if (basicType.includes(child.type)) {
+                    return
+                }
+                if (child.type === 'Group') {
+                    child.traverse(item => {
+                        if (basicType.includes(item.type) || item.type === 'Group') {
+                            return
+                        }
+                        group.push(item)
+                    })
+                } else {
+                    group.push(child)
+                }
+            })
+
+            const intersects = raycaster.intersectObjects(group, true);
+            const targetIntersection = intersects
+            if (targetIntersection.length) {
+                const index = targetIntersection.findIndex(item => item.object.userData.locked)
+                let selected: THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>
+                if (index !== -1) {
+                    selected = targetIntersection[index]
+                } else {
+                    selected = targetIntersection[0]
+                }
+                if (selected && (selected.object instanceof THREE.LineSegments || selected.object instanceof THREE.Mesh || selected.object instanceof THREE.Points || selected.object instanceof THREE.SkinnedMesh)) {
+                    handler(e, selected)
+                }
+            }
+        } catch (error) {
+        }
+    }
+
+    const clearThree = () => {
+        cancelAnimationFrame(animationId);
+        threeConfiguration.scene!.traverse((child: THREE.Object3D) => {
+            if (child instanceof THREE.Mesh) {
+                if (child.material) {
+                    child.material.dispose();
+                }
+                if (child.geometry) {
+                    child.geometry.dispose();
+                }
+            }
+            child.clear()
+        });
+        window.onclick = null
+        window.onresize = null
+        threeConfiguration.renderer!.forceContextLoss();
+        threeConfiguration.renderer!.dispose();
+        threeConfiguration.scene!.clear();
+        threeConfiguration.renderer!.clear()
+        threeConfiguration.labelRenderer = null;
+        threeConfiguration.scene = null;
+        threeConfiguration.camera = null;
+        threeConfiguration.control = null;
+        threeConfiguration.renderer = null;
+        threeConfiguration.stats = null;
+        window.removeEventListener('click', clickHandler, false)
+        window.removeEventListener('mousemove', moveHandler, false)
+        threeAction.animation = null
+        threeAction.clickHandler = null
+        threeAction.movementHandler = null
+        threeAction.mousedown = null
+        threeAction.mouseup = null
+    }
+
+    return {
+        loadThree,
+        enableCustomEvent,
+        EDefaultEvent,
+        enableDefaultEvent,
+        clearThree
+    }
+}
+
+export {
+    useThree
+}

package/src/draco/README.md

@@ -0,0 +1,32 @@
+# Draco 3D Data Compression
+
+Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
+
+[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
+
+## Contents
+
+This folder contains three utilities:
+
+* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
+* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
+* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
+
+Each file is provided in two variations:
+
+* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
+* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
+
+Either variation may be used with `DRACOLoader`:
+
+```js
+var dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('path/to/decoders/');
+dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+```
+
+Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
+
+## License
+
+[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)