three-base 0.0.1 → 1.0.2

package/lib/FPScontrol.ts

@@ -0,0 +1,209 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-04 23:01:36 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-06 13:32:08
+ */
+
+import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Capsule } from "three/examples/jsm/math/Capsule";
+import { Octree } from "three/examples/jsm/math/Octree";
+import { clamp, degToRad } from "three/src/math/MathUtils";
+
+
+/**
+ * 第一人称控制器
+ *
+ * @export
+ * @class FPScontrol
+ * @extends {EventDispatcher}
+ */
+export default class FPScontrol extends EventDispatcher {
+
+    canvas!: HTMLCanvasElement
+
+    constructor(camera: Camera, canvas: HTMLCanvasElement) {
+        super();
+
+        // 相机对象
+        this.camera = camera;
+
+        this.camera.rotation.order = 'YXZ';
+
+        this.canvas = canvas;
+
+        this.init(canvas);
+    }
+
+    // 是否启用
+    enable = false;
+
+    GRAVITY = 30; // 重力
+    STEPS_PER_FRAME = 5; // 速度
+
+    camera!: Camera;
+
+    // 世界八叉树对象
+    worldOctree = new Octree();
+
+    // 用户自己的碰撞体积
+    playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
+
+    // 时钟对象
+    clock = new Clock();
+
+    playerVelocity = new Vector3();
+    playerDirection = new Vector3();
+
+    playerOnFloor = false;
+    mouseTime = 0;
+    isMousedown = false;
+    keyStates: { [key: string]: boolean } = {};
+
+
+    init(canvas: HTMLCanvasElement) {
+        this.playerCollider.end.set(0, 1, 0);
+        document.addEventListener('keydown', this.keydown);
+        document.addEventListener('keyup', this.keyup);
+        canvas.addEventListener('pointerdown', this.mousedown);
+        document.addEventListener('pointerup', this.mouseup);
+        document.body.addEventListener('pointermove', this.mousemove);
+        this.enable = true;
+    }
+
+
+    keydown = (event: KeyboardEvent) => {
+        this.keyStates[event.code] = true;
+    }
+
+    keyup = (event: KeyboardEvent) => {
+        this.keyStates[event.code] = false;
+    }
+
+    mousedown = () => {
+        this.isMousedown = true;
+        this.mouseTime = performance.now();
+    }
+
+    mouseup = () => {
+        this.isMousedown = false;
+    }
+
+    mousemove = (event: MouseEvent) => {
+        if (this.enable && this.isMousedown) {
+            this.camera.rotation.y -= event.movementX / 500;
+            this.camera.rotation.x -= event.movementY / 500;
+
+        }
+    }
+
+    // 设置 八叉树 节点
+    fromGraphNode(object3d: Object3D) {
+        this.worldOctree.fromGraphNode(object3d);
+    }
+
+    // 获取前进的向量
+    getForwardVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        return this.playerDirection;
+    }
+
+    // 获取 后退的向量
+    getSideVector = () => {
+        this.camera.getWorldDirection(this.playerDirection);
+        this.playerDirection.y = 0;
+        this.playerDirection.normalize();
+        this.playerDirection.cross(this.camera.up);
+        return this.playerDirection;
+    }
+
+    // 玩家移动控制器
+    controls = (deltaTime: number) => {
+        const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
+        if (this.keyStates['KeyW']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
+        }
+        if (this.keyStates['KeyS']) {
+            this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyA']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
+        }
+        if (this.keyStates['KeyD']) {
+            this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
+        }
+
+        if (this.playerOnFloor) {
+            if (this.keyStates['Space']) {
+                this.playerVelocity.y = 15;
+            }
+        }
+
+    }
+
+    // 更新玩家的位置
+    updatePlayer = (deltaTime: number) => {
+        let damping = Math.exp(-4 * deltaTime) - 1;
+        if (!this.playerOnFloor) {
+            this.playerVelocity.y -= this.GRAVITY * deltaTime;
+            damping *= 0.1;
+        }
+        this.playerVelocity.addScaledVector(this.playerVelocity, damping);
+        const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
+        this.playerCollider.translate(deltaPosition);
+        this.playerCollisions();
+        this.camera.position.copy(this.playerCollider.end);
+        this.camera.position.y += 1;
+        this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
+    }
+
+    // 玩家的碰撞检测
+    playerCollisions() {
+        const result = this.worldOctree.capsuleIntersect(this.playerCollider);
+        this.playerOnFloor = false;
+        if (result) {
+            this.playerOnFloor = result.normal.y > 0;
+            if (!this.playerOnFloor) {
+                this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
+
+            }
+            this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
+        }
+    }
+    // 更新控制器的位置
+    teleportPlayerIfOob = () => {
+        if (this.camera.position.y <= -10) {
+            this.playerCollider.start.set(0, 0.35, 0);
+            this.playerCollider.end.set(0, 1, 10);
+            this.playerCollider.radius = 0.35;
+            this.camera.position.copy(this.playerCollider.end);
+            // this.camera.position.set(0, 3, 0);
+        }
+    }
+
+    // 更新
+    update() {
+        if (this.enable) {
+            const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
+            for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
+                this.controls(deltaTime);
+                this.updatePlayer(deltaTime);
+                this.teleportPlayerIfOob();
+            }
+        }
+    }
+
+    // 销毁事件
+    disposer() {
+        this.enable = false;
+        document.removeEventListener('keydown', this.keydown);
+        document.removeEventListener('keyup', this.keyup);
+        this.canvas.removeEventListener('pointerdown', this.mousedown);
+        document.removeEventListener('pointerup', this.mouseup);
+        document.body.removeEventListener('pointermove', this.mousemove);
+    }
+
+
+}

package/lib/PointLight.ts

@@ -0,0 +1,78 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-18 16:02:55 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-23 21:02:45
+ */
+
+import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
+import threeSpritetext from "three-spritetext";
+import threeUtils from "./threeUtils";
+
+
+/**
+ * 点光源
+ * @export
+ * @class PointLight
+ * @extends {THREEPointLight}
+ */
+export default class PointLight extends THREEPointLight {
+
+    constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
+        super(color, intensity, distance, decay);
+
+        if (threeUtils.isDev) {
+            if (this.label) {
+                this.label.borderColor = color;
+                this.label.color = color;
+                this.label.scale.multiplyScalar(0.03);
+            }
+
+        }
+
+    }
+
+    sphere = threeUtils.isDev && (() => {
+        // 点光源辅助小球
+        const sphere = new SphereGeometry(0.1, 10, 10);
+        const materils = new MeshBasicMaterial({
+            color: this.color,
+            wireframe: true
+        });
+        const mesh = new Mesh(sphere, materils);
+
+        mesh.userData = {
+            cursor: "pointer"
+        };
+
+        mesh.addEventListener("mouseenter", () => {
+            if (this.label) {
+                this.label.visible = true;
+            }
+        });
+
+        mesh.addEventListener("mouseleave", () => {
+            if (this.label) {
+                this.label.visible = false;
+            }
+        });
+
+        this.add(mesh);
+    })();
+
+    label = threeUtils.isDev && (() => {
+        const label = new threeSpritetext("点光源");
+        label.renderOrder = Infinity;
+        label.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        label.padding = 4;
+        label.borderRadius = 4;
+        label.borderWidth = 1;
+        label.position.set(0, 0.5, 0);
+        label.visible = false;
+        label.material.depthTest = false;
+        label.scale.multiplyScalar(0.001);
+        this.add(label);
+        return label;
+    })();
+
+}

package/lib/ThreeBasic.ts

@@ -0,0 +1,399 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2021-12-20 13:38:22 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-08-23 10:00:35
+ */
+
+import elementResizeEvent from "element-resize-event";
+import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, 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";
+
+// three.js 的基础对象
+export default class ThreeBasic 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 = 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) {
+            const canvas = div.getElementsByTagName("canvas");
+            for (let c of canvas) c.remove();
+            div.append(this.renderer.domElement);
+
+            elementResizeEvent(div, () => {
+                let rect = window.getComputedStyle(div);
+                let width = parseInt(rect.width);
+                let height = parseInt(rect.height);
+                this.resize(width, height);
+            });
+
+
+            // 如果上下文被销毁了,  就恢复上下文
+            if (this.isRendererContextLost) {
+                this.renderer.forceContextRestore();
+            }
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let rect = window.getComputedStyle(div);
+            let width = parseInt(rect.width);
+            let height = parseInt(rect.height);
+            this.resize(width, height);
+
+            // 开启时时渲染
+            threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
+        }
+    }
+
+    // 修改尺寸
+    resize(width: number, height: number) {
+        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.01, 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, }) {
+        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 }) {
+
+        let currentPosition = this.camera.position.clone();
+        let currentCenter = this.controls.target.clone();
+
+        if (position) {
+            this.controlsPosition
+                .setDuration(duration)
+                .reset({
+                    x: currentPosition.x,
+                    y: currentPosition.y,
+                    z: currentPosition.z
+                })
+                .set({
+                    x: position.x,
+                    y: position.y,
+                    z: position.z
+                });
+        }
+
+        if (center) {
+            this.controlsCenter
+                .setDuration(duration)
+                .reset({
+                    x: currentCenter.x,
+                    y: currentCenter.y,
+                    z: currentCenter.z
+                }).set({
+                    x: center.x,
+                    y: center.y,
+                    z: center.z
+                });
+        }
+
+        // 等待动画执行完成
+        while (!this.controlsCenter.isDone() || !this.controlsPosition.isDone()) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+
+    }
+
+    // 获取控制的位置和朝向 保留3位小数
+    getLookAt() {
+        return {
+            position: new Vector3().copy(this.camera.position).multiplyScalar(1000).ceil().divideScalar(1000),
+            center: new Vector3().copy(this.controls.target).multiplyScalar(1000).ceil().divideScalar(1000)
+        }
+    }
+
+    // 三维向量转化成屏幕上的2维向量
+    v3tov2(v3: Vector3) {
+        v3.project(this.camera);
+        v3.x = ((v3.x + 1) * this.size.x * 0.5);
+        v3.y = ((-v3.y + 1) * this.size.y * 0.5);
+        v3.z = 0;
+    }
+
+    // 寻找最顶层的父元素
+    findRoot(dom: ParentNode): ParentNode | undefined {
+        if (dom.parentNode) {
+            return this.findRoot(dom.parentNode);
+        } else {
+            return dom;
+        }
+    }
+
+    // 是否自动渲染
+    autoRender = true;
+
+    //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
+    needRender = false;
+
+    // 渲染场景
+    render() {
+
+        // 控制器在移动时鼠标不能操作
+        this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
+
+        // canvas 没有在页面上面的话 就跳过渲染
+        if (this.findRoot(this.renderer.domElement) !== document) {
+            threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
+            this.renderer.forceContextLoss();
+            // 标记上下文被销毁了
+            this.isRendererContextLost = true;
+            this.resize(100, 100);
+            return;
+        }
+
+        // 分发鼠标事件
+        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.dispatchEvent({ type: "afterRender" });
+    }
+
+    renderBindThis = this.render.bind(this);
+
+    // 清理渲染目标
+    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);
+    }
+
+}