three#Object3D TypeScript Examples

export default function useRaycaster(options: RaycasterConfigInterface): RaycasterInterface {
  const {
    camera,
    resetPosition = new Vector3(0, 0, 0),
  } = options

  const raycaster = new Raycaster()
  const position = resetPosition.clone()
  const plane = new Plane(new Vector3(0, 0, 1), 0)

  const updatePosition = (coords: Vector2) => {
    raycaster.setFromCamera(coords, camera)
    camera.getWorldDirection(plane.normal)
    raycaster.ray.intersectPlane(plane, position)
  }

  const intersect = (coords: Vector2, objects: Object3D[], recursive = false) => {
    raycaster.setFromCamera(coords, camera)
    return raycaster.intersectObjects(objects, recursive)
  }

  return {
    position,
    updatePosition,
    intersect,
  }
}

public checkPopups(): void {
        this._justClosedPopups.length = 0;

        if (this._popupStack.length > 0) {
            let mc: DisplayObject | Object3D = Stage.touchTarget;
            let handled = false;
            while (mc) {
                let gobj = GObject.cast(mc);
                if (gobj) {
                    let k = this._popupStack.indexOf(gobj);
                    if (k != -1) {
                        for (let i = this._popupStack.length - 1; i > k; i--) {
                            let last = this._popupStack.length - 1;
                            let popup: GObject = this._popupStack[last];

                            this.closePopup(popup);
                            this._justClosedPopups.push(popup);
                            this._popupStack.splice(last, 1);
                        }
                        handled = true;
                        break;
                    }
                }
                mc = mc.parent;
            }

            if (!handled) {
                for (let i = this._popupStack.length - 1; i >= 0; i--) {
                    let popup = this._popupStack[i];
                    this.closePopup(popup);
                    this._justClosedPopups.push(popup);
                    this._popupStack.splice(i, 1);
                }
            }
        }
    }

public static cast(obj: any): GObject {
        let dobj: any;
        if (obj instanceof Object3D) {
            dobj = obj["$owner"];
            if (!dobj)
                return null;
        }
        else
            dobj = obj;

        return dobj['$owner'];
    }

export function broadcastEvent(p: Object3D, type: string, data?: any): void {
    p = p || Stage.scene;

    let ev = EventPool.borrow();
    ev._type = type;
    ev.data = data;
    let arr = ev._callChain;

    p.traverseVisible(obj => {
        let dobj = obj["$owner"];
        if (dobj)
            arr.push(dobj);
    });

    arr.forEach(obj => {
        let col = obj._listeners[type];
        if (col) {
            if (col.captures.length > 0)
                obj._dispatch(col, ev, true);

            if (col.callbacks.length > 0)
                obj._dispatch(col, ev, false);
        }
    });

    arr.length = 0;
    EventPool.returns(ev);
}

public constructor(owner: Object3D) {
        this._color = 0xFFFFFF;
        this._contentRect = new Rect();
        this._material = new NMaterial();
        this._geometry = new BufferGeometry();

        let o = <any>owner;
        o.geometry = this._geometry;
        o.material = this._material;
        o.isMesh = true;
        o.drawMode = TrianglesDrawMode;
        delete o.isGroup;
    }

export function traverseHitTest(p: Object3D, context: HitTestContext, mask?: any): DisplayObject {
    let count = p.children.length;
    for (let i = count - 1; i >= 0; --i) // front to back!
    {
        let child: Object3D = p.children[i];
        if (!child.visible)
            continue;

        let dobj = child["$owner"];
        if (dobj) {
            if (dobj == mask || dobj._touchDisabled)
                continue;

            if (!context.forTouch || dobj._touchable) {
                let target = dobj.hitTest(context);
                if (target)
                    return target;
            }
        }

        if (child.children.length > 0) {
            let target = traverseHitTest(child, context);
            if (target)
                return target;
        }
    }
}

export function traverseUpdate(p: Object3D, clippingPlanes: any, alpha: number): void {
    let children = p.children;
    let cnt = children.length;

    let dobj = p["$owner"];
    if (dobj) {
        if (dobj._clipRect)
            clippingPlanes = dobj._clipPlanes;
        alpha *= dobj.alpha;
    }

    for (let i = 0; i < cnt; i++) {
        let child: Object3D = children[i];
        dobj = child["$owner"];
        if (dobj)
            dobj.update(clippingPlanes, alpha);

        if (child.children.length > 0)
            traverseUpdate(child, clippingPlanes, alpha);
    }
}

public constructor() {
        super();

        this._obj3D = new Object3D();
        this._obj3D["isGroup"] = true;
        this._obj3D["$owner"] = this;
        this._obj3D.layers.set(UILayer);

        this._pos = this._obj3D.position;
        this._rot = this._obj3D.rotation;
        this._pivot = new Vector2();
        this._pivotOffset = new Vector3();
        this._contentRect = new Rect();
        this._alpha = 1;
        this._touchable = true;
    }

private transformRectPoint(x: number, y: number, targetSpace: Object3D) {
        s_v3.set(x, y, 0);
        this.localToWorld(s_v3);
        if (targetSpace)
            targetSpace.worldToLocal(s_v3);

        if (s_v4.x > s_v3.x) s_v4.x = s_v3.x;
        if (s_v4.z < s_v3.x) s_v4.z = s_v3.x;
        if (s_v4.y > s_v3.y) s_v4.y = s_v3.y;
        if (s_v4.w < s_v3.y) s_v4.w = s_v3.y;
    }

public transformRect(rect: Rect, targetSpace?: Object3D, result?: Rect): Rect {
        if (!result)
            result = new Rect();

        if (targetSpace == this._obj3D) {
            result.copy(rect);
            return result;
        }

        if (targetSpace && targetSpace == this._obj3D.parent && this._rot.z == 0) {
            let scale = this._obj3D.scale;
            result.set((this._pos.x + rect.x) * scale.x, (this.y + rect.y) * scale.y, rect.width * scale.x, rect.height * scale.y);
        }
        else {
            s_v4.set(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY);

            if (!Stage.disableMatrixValidation)
                this.validateMatrix();

            this.transformRectPoint(rect.x, rect.y, targetSpace);
            this.transformRectPoint(rect.xMax, rect.y, targetSpace);
            this.transformRectPoint(rect.x, rect.yMax, targetSpace);
            this.transformRectPoint(rect.xMax, rect.yMax, targetSpace);

            result.setMinMax(s_v4.x, s_v4.y, s_v4.z, s_v4.w);
        }
        return result;
    }

public transformPoint(x: number, y: number, targetSpace?: Object3D, result?: Vector2): Vector2 {
        if (!result)
            result = new Vector2();

        if (targetSpace == this._obj3D)
            result.set(x, y);
        else {
            if (!Stage.disableMatrixValidation)
                this.validateMatrix();

            s_v3.set(x, -y, 0);
            this._obj3D.localToWorld(s_v3);
            if (targetSpace)
                targetSpace.worldToLocal(s_v3);
            result.set(s_v3.x, -s_v3.y);
        }

        return result;
    }

public getBounds(targetSpace: Object3D, result?: Rect): Rect {
        this.ensureSizeCorrect();

        if (!result)
            result = new Rect();

        if (targetSpace == this._obj3D) // optimization
            result.copy(this._contentRect);
        else if (targetSpace == this._obj3D.parent && this._rot.z == 0)
            result.set(this._pos.x, -this._pos.y,
                this._contentRect.width * this._obj3D.scale.x, this._contentRect.height * this._obj3D.scale.y);
        else
            result = this.transformRect(this._contentRect, targetSpace, result);

        return result;
    }

/**
	 * Clears all tiles from memory and reloads data. Used when changing the provider.
	 *
	 * Should be called manually if any changed to the provider are made without setting the provider.
	 */
	public clear(): any
	{
		this.traverse(function(children: Object3D): void
		{
			// @ts-ignore
			if (children.childrenCache) 
			{
				// @ts-ignore
				children.childrenCache = null;
			}

			// @ts-ignore
			if (children.initialize) 
			{
				// @ts-ignore
				children.initialize();
			}
		});

		return this;
	}

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		projection.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
		frustum.setFromProjectionMatrix(projection);
		camera.getWorldPosition(pov);

		view.children[0].traverse((node: any) => 
		{
			node.getWorldPosition(position);
			let distance = pov.distanceTo(position);
			distance /= Math.pow(2, view.provider.maxZoom - node.level);

			const inFrustum = this.pointOnly ? frustum.containsPoint(position) : frustum.intersectsObject(node);

			if (distance < this.subdivideDistance && inFrustum) 
			{
				node.subdivide();
			}
			else if (distance > this.simplifyDistance && node.parentNode) 
			{
				node.parentNode.simplify();
			}
		});
	}

describe('ThreeView', () => {

    it('should render successfully', () => {
        const { baseElement } = render(
            <Canvas>
                <ThreeView>
                    <Box />
                </ThreeView>
            </Canvas>);
        expect(baseElement).toBeTruthy();
    });

    it('should render successfully with forwardRef', () => {
        const ref = React.createRef<Object3D>();
        const { baseElement } = render(
            <Canvas>
                <ThreeView forwardRef={ref}>
                    <Box />
                </ThreeView>
            </Canvas>);
        expect(baseElement).toBeTruthy();
    });
});

fetch(parent: Object3D, v1: Vector3, v2: Vector3) {
        if (this.pool.length) {
            const line = this.pool.pop();
            line.geometry.setFromPoints([v1, v2]);
            parent.attach(line)
            return line;
        } else {
            const points = [v1, v2];
            const geometry = new BufferGeometry();
            const line = new Line( geometry, material );
            line.geometry.setFromPoints(points)
            parent.attach(line)
            return line;
        }
    }

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		camera.getWorldPosition(pov);

		view.children[0].traverse((node: any) =>
		{
			node.getWorldPosition(position);

			let distance = pov.distanceTo(position);
			distance /= Math.pow(2, view.provider.maxZoom - node.level);

			if (distance < this.subdivideDistance) 
			{
				node.subdivide();
			}
			else if (distance > this.simplifyDistance && node.parentNode) 
			{
				node.parentNode.simplify();
			}
		});
	}

childrenCache: Object3D[];

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		const intersects = [];

		for (let t = 0; t < this.subdivisionRays; t++) 
		{
			// Raycast from random point
			this.mouse.set(Math.random() * 2 - 1, Math.random() * 2 - 1);

			// Check intersection
			this.raycaster.setFromCamera(this.mouse, camera);
			this.raycaster.intersectObjects(view.children, true, intersects);
		}

		for (let i = 0; i < intersects.length; i++) 
		{
			const node = intersects[i].object;
			let distance = intersects[i].distance;

			if (this.powerDistance) 
			{
				distance = Math.pow(distance * 2, node.level);
			}

			if (this.scaleDistance) 
			{
				const matrix = node.matrixWorld.elements;
				const vector = new Vector3(matrix[0], matrix[1], matrix[2]);
				distance = vector.length() / distance;
			}

			if (distance > this.thresholdUp) 
			{
				node.subdivide();
				return;
			}
			else if (distance < this.thresholdDown) 
			{
				if (node.parentNode !== null) 
				{
					node.parentNode.simplify();
					return;
				}
			}
		}
	}

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

/**
	 * Cache with the children objects created from subdivision.
	 *
	 * Used to avoid recreate object after simplification and subdivision.
	 *
	 * The default value is null. Only used if "cacheChild" is set to true.
	 */
	public childrenCache: Object3D[] = null;

constructor(objects: Object3D[], camera: Camera, domElement?: HTMLElement);

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

export function computeAABB(object3D: Object3D): Box3 {
  // Force update the world matrix so that we get the correct scale.
  object3D.updateWorldMatrix(true, true);
  const aabb = new Box3().expandByObject(object3D);
  return aabb;
}

export function bubbleEvent(p: Object3D, type: string, data?: any, addChain?: Array<EventDispatcher>): void {
    p = p || Stage.scene;

    let ev = EventPool.borrow();
    ev._type = type;
    ev.data = data;
    ev._initiator = p["$owner"];
    let arr = ev._callChain;

    if (ev.initiator)
        arr.push(ev.initiator);
    p.traverseAncestors(obj => {
        let dobj = obj["$owner"];
        if (dobj)
            arr.push(dobj);
    });

    for (let i = arr.length - 1; i >= 0; i--) {
        let obj = arr[i];
        let col = obj._listeners[type];
        if (col && col.captures.length > 0) {
            obj._dispatch(col, ev, true);
            if (ev._touchCapture) {
                ev._touchCapture = false;
                if (type == "touch_begin")
                    Stage.addTouchMonitor(ev.input.touchId, obj);
            }
        }
    }

    if (!ev._stopsPropagation) {
        for (let i = 0; i < arr.length; i++) {
            let obj = arr[i];
            let col = obj._listeners[type];
            if (col && col.callbacks.length > 0) {
                obj._dispatch(col, ev, false);
                if (ev._touchCapture) {
                    ev._touchCapture = false;
                    if (type == "touch_begin")
                        Stage.addTouchMonitor(ev.input.touchId, obj);
                }

                if (ev._stopsPropagation)
                    break;
            }
        }

        if (addChain) {
            for (let i = 0; i < addChain.length; i++) {
                let obj = addChain[i];
                if (obj && arr.indexOf(obj) == -1) {
                    let col = obj._listeners[type];
                    if (col) {
                        if (col.captures.length > 0)
                            obj._dispatch(col, ev, true);

                        if (col.callbacks.length > 0)
                            obj._dispatch(col, ev, false);
                    }
                }
            }
        }
    }

    arr.length = 0;
    EventPool.returns(ev);
}

protected _obj3D: Object3D;

public removeChildAt(index: number) {
        let child: Object3D = this._obj3D.children[index];
        if (this.stage)
            broadcastEvent(child, "removed_from_stage");

        this._obj3D.children.splice(index, 1);
        child.parent = null;
    }

public readonly ref: RefObject<Object3D>;