three-base 1.129.15 → 2.0.1

package/lib/ThreeBase.ts

@@ -1,475 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2021-12-20 13:38:22 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 01:11:17
- */
-
-import { round } from "lodash";
-import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { generateUUID } from "three/src/math/MathUtils";
-import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
-import threeLoader from "./threeLoader";
-import ThreeMouse from "./ThreeMouse";
-import threeUtils from "./threeUtils";
-import Transition from "./Transition";
-import stroke_pass from "./stroke_pass/stroke_pass";
-
-// three.js 的基础对象
-export default class ThreeBase extends EventDispatcher {
-
-    constructor() {
-        super();
-        this.init();
-    }
-
-    // 公用渲染目标1
-    renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-
-    // 渲染目标2
-    renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-
-    // 公用二维向量
-    tempVector2 = new Vector2();
-
-    // 公用的三维向量
-    tempVector3 = new Vector3();
-
-    //渲染器的尺寸
-    size = new Vector2(0, 0);
-
-    // 渲染器对象
-    renderer = (() => {
-        const renderer = new WebGLRenderer({
-            alpha: true,// 透明背景
-            antialias: true, // 阴影抗锯齿
-            precision: "highp", //precision:highp/mediump/lowp着色精度选择
-            logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面完全重合时闪烁
-            preserveDrawingBuffer: false, // 是否保存绘图缓冲
-            stencil: false, // 模版
-        });
-
-        renderer.domElement.id = generateUUID();
-        renderer.localClippingEnabled = true;
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.autoClear = false;
-        threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
-        return renderer;
-    })();
-
-    //透视相机
-    camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
-
-    // 场景对象
-    scene = new Scene();
-
-    ///鼠标事件对象
-    threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
-
-    // 轨道控制器
-    controls = (() => {
-        const controls = new OrbitControls(this.camera, this.renderer.domElement);
-        controls.addEventListener("change", () => {
-            this.needRender = true;
-        });
-        controls.rotateSpeed = 0.2;
-        controls.maxPolarAngle = Math.PI;
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.1;
-        controls.screenSpacePanning = true;
-        return controls;
-    })();
-
-    // 上下文是否被销毁了
-    isRendererContextLost = false;
-
-    // 设置 dom 容器
-    async setContainer(div: HTMLDivElement | null) {
-        if (div) {
-            div.style.overflow = "hidden";
-            div.innerHTML = "";
-            div.append(this.renderer.domElement);
-
-            // 如果上下文被销毁了,  就恢复上下文
-            if (this.isRendererContextLost) {
-                //@ts-ignore
-                this.renderer['forceContextRestore']();
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.renderer.domElement.style.opacity = "1";
-            }
-
-            this.setsize(div.clientWidth, div.clientHeight);
-
-            // 开启时时渲染
-            threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
-            threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
-        }
-    }
-
-    // 修改尺寸
-    setsize(width: number, height: number) {
-        if (this.camera instanceof PerspectiveCamera) {
-            this.camera.aspect = width / height;
-            this.camera.updateProjectionMatrix();
-        }
-
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.renderer.setSize(width, height);
-        this.size.set(width, height);
-        // 渲染场景
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
-    }
-
-    // 控制器的位置缓动的计算的顶点对象
-    controlsPosition = (() => {
-        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
-        controlsPosition.setDuration(1000);
-        controlsPosition.onChange(({ x, y, z }) => {
-            this.camera.position.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsPosition;
-    })();
-
-    // 控制器的 朝向带缓动的计算的顶点对象
-    controlsCenter = (() => {
-        const controlsCenter = new Transition({ x: 0, y: 0, z: 0 });
-        controlsCenter.setDuration(1000);
-        controlsCenter.onChange(({ x, y, z }) => {
-            this.controls.target.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsCenter;
-    })();
-
-    init() {
-        // 非开发模式添加网格辅助线
-        if (threeUtils.isDev) {
-            const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-            gridHelper.position.set(0, -0.001, 0);
-            this.scene.add(gridHelper);
-            const axesHelper = new AxesHelper(10000);
-            this.scene.add(axesHelper);
-        }
-
-        // 资源加载进度有更新时, 需要渲染
-        threeLoader.addEventListener("progress", () => {
-            this.needRender = true;
-        });
-
-    }
-
-    // 重置控制器的位置
-    resetLookAt({ position, center, }: { position?: Vector3, center?: Vector3, }) {
-
-        // 停止控制器的惯性
-        this.controls.enableDamping = false;
-        this.controls.saveState();
-        this.controls.update();
-        this.controls.reset();
-        this.controls.enableDamping = true;
-
-        position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
-        center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
-        this.needRender = true;
-    }
-
-    // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position, center, duration = 1000 }: { position?: Vector3, center?: Vector3, duration?: number }) {
-
-        // 停止控制器的惯性
-        this.controls.enableDamping = false;
-        this.controls.saveState();
-        this.controls.update();
-        this.controls.reset();
-        this.controls.enableDamping = true;
-
-        let currentPosition = this.camera.position.clone();
-        let currentCenter = this.controls.target.clone();
-
-        // 等待动画执行完成
-        await Promise.all([
-            new Promise<void>(async (resolve, reject) => {
-                if (position) {
-                    this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
-                    await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
-                }
-                resolve();
-            }),
-            new Promise<void>(async (resolve, reject) => {
-                if (center) {
-                    this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
-                    await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
-                }
-                resolve();
-            }),
-
-        ]);
-
-    }
-
-    // 获取控制的位置和朝向 保留3位小数
-    getLookAt() {
-        const position = this.camera.position.toArray().map(v => round(v, 3));
-        const center = this.controls.target.toArray().map(v => round(v, 3));
-        return {
-            center: new Vector3(...center),
-            position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
-        }
-    }
-
-    // 三维向量转化成屏幕上的2维向量
-    v3tov2(v3: Vector3) {
-        v3.project(this.camera);
-        const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
-        return v2;
-    }
-
-    // 控制器类型
-    controlType: "OrbitControls" | "MapControls" = "OrbitControls";
-
-    // 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
-    originScreenSpacePanning = false;
-
-    //改变控制器的类型
-    setControlType(controlType: "OrbitControls" | "MapControls") {
-
-        if (controlType === "OrbitControls") {
-            this.controls.screenSpacePanning = this.originScreenSpacePanning;
-            this.controls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
-            this.controls.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
-        } else if (controlType === "MapControls") {
-            this.originScreenSpacePanning = this.controls.screenSpacePanning;
-            // pan orthogonal to world-space direction camera.up
-            this.controls.screenSpacePanning = false;
-            this.controls.mouseButtons.LEFT = MOUSE.PAN;
-            this.controls.mouseButtons.RIGHT = MOUSE.ROTATE;
-            this.controls.touches.ONE = TOUCH.PAN;
-            this.controls.touches.TWO = TOUCH.DOLLY_ROTATE;
-        }
-
-    }
-
-    // 是否自动渲染
-    autoRender = true;
-
-    //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
-    needRender = false;
-
-    // 停止渲染
-    stopRender() {
-        threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
-        this.renderer.forceContextLoss();
-        // 标记上下文被销毁了
-        this.isRendererContextLost = true;
-        this.setsize(100, 100);
-        this.renderer.domElement.style.opacity = "0";
-    }
-
-    // 渲染场景
-    render() {
-
-        // 控制器在移动时鼠标不能操作
-        this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
-
-        // canvas 没有在页面上面的话 就跳过渲染
-        if (!threeUtils.inDocument(this.renderer.domElement)) {
-            this.stopRender();
-            return;
-        }
-
-        //判断尺寸发生改变时重置尺寸
-        const parentNode = this.renderer.domElement.parentNode as HTMLDivElement;
-        if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
-            this.setsize(parentNode.clientWidth, parentNode.clientHeight);
-        }
-
-        // 分发鼠标事件
-        this.threeMouse.dispatchEvent();
-
-        // 在不自动渲染时, needRender=false 就跳过渲染
-        if (!this.autoRender && !this.needRender) {
-            return;
-        }
-        this.needRender = false;
-
-        if (this.controls.enabled) {
-            this.controls.update();
-        }
-
-        this.renderer.clear();
-
-        // 渲染场景
-        this.dispatchEvent({ type: "beforeRender" });
-        this.renderer.render(this.scene, this.camera);
-
-        // 查找需要绘制描边的对象,并且绘制描边
-        this.scene.traverse(obj => {
-            if (obj.userData.stroke_enable) {
-                stroke_pass(this.renderer, this.camera, obj);
-            }
-        });
-
-        this.dispatchEvent({ type: "afterRender" });
-    }
-
-    private renderBindThis = this.render.bind(this);
-
-    // 下载渲染图
-    download(fileName: string = "download") {
-        this.render();
-        const base64 = this.renderer.domElement.toDataURL('image/png');
-        let saveLink = document.createElement("a");
-        saveLink.download = `${fileName}.png`;
-        saveLink.href = base64;
-        document.body.append(saveLink);
-        saveLink.click();
-    }
-
-    private _preMesh = new Mesh();
-    private _preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-
-    //预加载纹理图片
-    async preloadTexture(src: string) {
-        const texture = threeLoader.getTexture(src);
-        while (texture && !texture.image || !(texture.image as HTMLImageElement).complete) {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        }
-
-        // 添加到计划任务中去
-        threeUtils.addWork(() => {
-            const originRenderTarget = this.renderer.getRenderTarget();
-            this.renderer.setRenderTarget(this._preRT);
-            (this._preMesh.material as MeshBasicMaterial).map = texture;
-            this.renderer.render(this._preMesh, this.camera);
-            this.renderer.setRenderTarget(originRenderTarget);
-        });
-    }
-
-    //预加载网格
-    async preloadGeometry(geometry: BufferGeometry) {
-
-        // 添加到计划任务中去
-        threeUtils.addWork(() => {
-            const originRenderTarget = this.renderer.getRenderTarget();
-            this.renderer.setRenderTarget(this._preRT);
-            this._preMesh.geometry = geometry;
-            this.renderer.render(this._preMesh, this.camera);
-            this.renderer.setRenderTarget(originRenderTarget);
-        });
-    }
-
-    // 清理渲染目标
-    clearRendererTargte(rendererTarget: WebGLRenderTarget | null) {
-        const originTarget = this.renderer.getRenderTarget();
-        this.renderer.setRenderTarget(rendererTarget);
-        fullScreenMesh.material = clearShader;
-        fullScreenMesh.render(this.renderer);
-        this.renderer.clearDepth();
-        this.renderer.setRenderTarget(originTarget);
-    }
-
-    // 拷贝纹理到渲染目标
-    copyTextureToRenderTarget(texture: Texture, rendererTarget: WebGLRenderTarget | null, alpha: boolean = false, opactity: number = 1) {
-        const originTarget = this.renderer.getRenderTarget();
-        if (rendererTarget) {
-            this.renderer.getSize(this.tempVector2);
-            rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        }
-        this.renderer.setRenderTarget(rendererTarget);
-        fullScreenMesh.material = coptyShader;
-        coptyShader.uniforms.map.value = texture;
-        coptyShader.uniforms.opacity.value = opactity;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
-        fullScreenMesh.render(this.renderer);
-        this.renderer.setRenderTarget(originTarget);
-    }
-
-    // 把对象绘制到渲染目标中
-    object3dToRendererTarget(obj: Object3D, rendererTarget: WebGLRenderTarget) {
-        this.clearRendererTargte(rendererTarget);
-        const originTarget = this.renderer.getRenderTarget();
-        this.renderer.setRenderTarget(rendererTarget);
-        this.renderer.getSize(this.tempVector2);
-        rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        this.renderer.render(obj, this.camera);
-        this.renderer.setRenderTarget(originTarget);
-    }
-
-    // 给渲染目标的内容加描边
-    rendererTagetAddStroke(rendererTarget: WebGLRenderTarget, strockWidth: number, color: string, opacity: number) {
-        const originTarget = this.renderer.getRenderTarget();
-        this.clearRendererTargte(this.renderTarget2);
-        this.renderer.setRenderTarget(this.renderTarget2);
-        this.renderer.getSize(this.tempVector2);
-        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-
-        fullScreenMesh.material = strokeShader;
-        strokeShader.uniforms.map.value = rendererTarget.texture;
-        strokeShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
-        strokeShader.uniforms.strokeWidth.value = strockWidth;
-        strokeShader.uniforms.strokeColor.value.set(color);
-        strokeShader.uniforms.opacity.value = opacity;
-        fullScreenMesh.render(this.renderer);
-
-        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-
-        this.renderer.setRenderTarget(originTarget);
-    }
-
-    // 渲染对象的描边
-    renderObject3dStroke(obj: Object3D, strockWidth: number, color: string, opacity: number) {
-        this.object3dToRendererTarget(obj, this.renderTarget);
-        this.rendererTagetAddStroke(this.renderTarget, strockWidth, color, opacity);
-        this.copyTextureToRenderTarget(this.renderTarget.texture, null);
-    }
-
-    //给渲染目标加上高斯模糊计算
-    renderTargetgaussBlur(rendererTarget: WebGLRenderTarget, radius: number, opacity: number) {
-        const originTarget = this.renderer.getRenderTarget();
-
-        this.clearRendererTargte(this.renderTarget2);
-        this.renderer.setRenderTarget(this.renderTarget2);
-        this.renderer.getSize(this.tempVector2);
-        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-
-        fullScreenMesh.material = gaussBlurShader;
-        gaussBlurShader.uniforms.map.value = rendererTarget.texture;
-        gaussBlurShader.uniforms.radius.value = radius;
-        gaussBlurShader.uniforms.opacity.value = opacity;
-        gaussBlurShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
-        fullScreenMesh.render(this.renderer);
-
-        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-
-        this.renderer.setRenderTarget(originTarget);
-    }
-
-    // 渲染目标上的纹理添加辉光效果
-    renderTargetAddGlow(renderTarget: WebGLRenderTarget, width: number, color: string) {
-
-        this.rendererTagetAddStroke(renderTarget, 1 * width, color, 0.3);
-        this.rendererTagetAddStroke(renderTarget, 2 * width, color, 0.2);
-        this.rendererTagetAddStroke(renderTarget, 3 * width, color, 0.05);
-
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-    }
-
-    // 渲染 渲染目标
-    renderRendererTarget(renderTarget: WebGLRenderTarget, alpha: boolean = false) {
-        coptyShader.uniforms.map.value = renderTarget.texture;
-        coptyShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = coptyShader;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
-        fullScreenMesh.render(this.renderer);
-    }
-
-}

package/lib/ThreeMouse.d.ts

@@ -1,39 +0,0 @@
-import * as THREE from "three";
-import { Object3D, Scene } from "three";
-import type { Intersection } from "three";
-export interface ThreeMouseEvent extends Intersection {
-    renderer: THREE.Renderer;
-    camera: THREE.Camera;
-    type: string;
-    offsetX: number;
-    offsetY: number;
-    x: number;
-    y: number;
-}
-/**
- *  harp.gl 专用的鼠标拾取模型对象
- */
-export default class ThreeMouse {
-    constructor(renderer: THREE.WebGLRenderer, camera: THREE.Camera, scene: THREE.Scene);
-    _renderer: THREE.WebGLRenderer;
-    _camera: THREE.Camera;
-    _scene: Scene;
-    _mosePosition: THREE.Vector2;
-    _mouseDownPosition: THREE.Vector2;
-    _mesh_on?: Object3D;
-    _mesh_Down?: Object3D;
-    _raycaster: THREE.Raycaster;
-    _frame: number;
-    _mouseInRenderer: boolean;
-    _mousemoveEvent?: MouseEvent;
-    _object3ds: Object3D[];
-    _click_num: number;
-    _getSelected(object3ds: Object3D[]): Intersection | undefined;
-    hasEvent(object?: Object3D, types?: Array<"leftclick" | "rightclick" | "click" | "dbclick" | "mouseenter" | "mouseleave" | "mousemove" | "mousedown" | "mouseup">): boolean;
-    hasCursor(object?: Object3D): boolean;
-    dispatchEvent(): void;
-    _mouseleave: (e: MouseEvent) => void;
-    _mousemove: (e: MouseEvent) => void;
-    _mousedown: (e: MouseEvent) => void;
-    _mouseup: import("lodash").DebouncedFunc<(e: PointerEvent) => Promise<void>>;
-}