(p) allow user to set clipping box on google 3d tiles

[kfarr]

nytimes/three-loader-3dtiles#165

[kfarr]

progress so far: 3DStreet/aframe-loader-3dtiles-component#14

[kfarr]

Linked the branch WIP to this ticket. Barely works, steps before it's "ready" would be:

• right now this only works to crop AABB but not OBB. see image. I spent a few hours trying to make this work with claude, it was surprisingly tough.
• instead of clip-box object, default selector of [data-layer-name="Underground"] which would return one matching underground box for a street if it exists in the scene, at least for a v1 this ok but we may want a better way to better define clipping areas in the future. perhaps allowing as user to select a street and it may be easier to make the clipping planes from scratch based on street component's length and width, the street entity's position and rotation.
• default clippingEnabled should be false and remove the clip-box from scene

[kfarr]

@vincentfretin curious if you have any quick idea to advise on this AABB vs. OBB issue... ^^

[vincentfretin]

I don't see any rotation applied to your clipPlanes THREE.Plane. Did you try setting clipPlane.rotation.y for each of your plane for example?

[kfarr]

@vincentfretin you're right it's not very robust.

Instead of reinventing the wheel, I can try this next:
https://github.com/aframevr/aframe/blob/master/src/components/obb-collider.js

example:
https://glitch.com/edit/#!/ritzy-coral-sense?path=index.html%3A1%3A0

[vincentfretin]

The interesting part of obb-collider that handles the rotation was taken when we created our own OrientedBoxHelper if you remember

3dstreet/src/editor/lib/viewport.js

Lines 42 to 84 in 48a2923

	update() {
	// Bounding box is created axis-aligned AABB.
	// If there's any rotation the box will have the wrong size.
	// It undoes the local entity rotation and then restores so box has the expected size.
	// We also undo the parent world rotation.
	if (this.object !== undefined) {
	auxEuler.copy(this.object.rotation);
	auxLocalPosition.copy(this.object.position);
	this.object.rotation.set(0, 0, 0);
	this.object.position.set(0, 0, 0);
	this.object.parent.matrixWorld.decompose(
	auxPosition,
	auxQuaternion,
	auxScale
	);
	auxMatrix.compose(origin, identityQuaternion, auxScale);
	this.object.parent.matrixWorld.copy(auxMatrix);
	if (this.boxFill) {
	tempBox3.setFromObject(this.object);
	tempBox3.getSize(tempVector3Size);
	tempBox3.getCenter(tempVector3Center);
	this.boxFill.position.copy(tempVector3Center);
	this.boxFill.scale.copy(tempVector3Size);
	}
	}
	super.update();
	// Restore rotations.
	if (this.object !== undefined) {
	this.object.parent.matrixWorld.compose(
	auxPosition,
	auxQuaternion,
	auxScale
	);
	this.object.rotation.copy(auxEuler);
	this.object.position.copy(auxLocalPosition);
	this.object.getWorldQuaternion(this.quaternion);
	this.object.getWorldPosition(this.position);
	this.updateMatrix();
	}
	}

but here for your THREE.Plane I'm not sure this is relevant, it may be for the initial creation of the bounding box to get a correct size, but you still need to have your planes rotated that are used on your material.