export function transform2mapbox(matrix) { const min = -WEBMERCATOR_EXTENT; const max = WEBMERCATOR_EXTENT; const scale = 1 / (2 * WEBMERCATOR_EXTENT); const result = matrix.slice(); // copy array result[12] = (matrix[12] - min) * scale; // x translation result[13] = (matrix[13] - max) * -scale; // y translation result[14] = matrix[14] * scale; // z translation return new THREE.Matrix4().fromArray(result).scale(new THREE.Vector3(scale, -scale, scale)); }
const getCameraPosition = camera => { // not sure why i should do this, copied from somewhere camera.position.setFromMatrixPosition(camera.matrixWorld); // get camera position const cameraPos = new THREE.Vector3(0, 0, 0); cameraPos.applyMatrix4(camera.matrixWorld); return cameraPos; }
// HELPERS _getCameraPosition() { if (!this.viewProjectionMatrix) { return new THREE.Vector3(); } const cam = new THREE.Camera(); const rootInverse = new THREE.Matrix4().getInverse(this.rootTransform); cam.projectionMatrix.elements = this.viewProjectionMatrix; cam.projectionMatrixInverse = new THREE.Matrix4().getInverse(cam.projectionMatrix); // add since three@0.103.0 const campos = new THREE.Vector3(0, 0, 0).unproject(cam).applyMatrix4(rootInverse); return campos; }
(function() { var v = new THREE.Vector3(); return function panUp(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix v.multiplyScalar(distance); panOffset.add(v); }; })()
function Line({ defaultStart, defaultEnd }) { const [start, setStart] = useState(defaultStart) const [end, setEnd] = useState(defaultEnd) const vertices = useMemo(() => [start, end].map(v => new THREE.Vector3(...v)), [start, end]) const update = useCallback(self => ((self.verticesNeedUpdate = true), self.computeBoundingSphere()), []) return ( <> <line> <geometry attach="geometry" vertices={vertices} onUpdate={update} /> <lineBasicMaterial attach="material" color="white" /> </line> <EndPoint position={start} onDrag={v => setStart(v.toArray())} /> <EndPoint position={end} onDrag={v => setEnd(v.toArray())} /> </> ) }
constructor(props) { super(props); this.state = {}; this.scene = new t3.Scene(); this.camera = new t3.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 100 ); this.camera.lookAt( 0, 0, 0 ); this.renderer = new t3.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); // Load the Orbitcontroller // eslint-disable-next-line var controls = new OrbitControls(this.camera, this.renderer.domElement ); const material = new t3.LineBasicMaterial( { color: 0xff0000} ); const geometry = new t3.Geometry(); geometry.vertices.push(new t3.Vector3( -10, 0, 0) ); geometry.vertices.push(new t3.Vector3( 0, 10, 0) ); geometry.vertices.push(new t3.Vector3( 10, 0, 0) ); var line = new t3.Line( geometry, material ); this.scene.add( line ); this.renderer.render( this.scene, this.camera ); }
// Create a THREE.Box3 from a 3D Tiles OBB function createTHREEBoxFromOBB(box) { const extent = [box[0] - box[3], box[1] - box[7], box[0] + box[3], box[1] + box[7]]; const sw = new THREE.Vector3(extent[0], extent[1], box[2] - box[11]); const ne = new THREE.Vector3(extent[2], extent[3], box[2] + box[11]); return new THREE.Box3(sw, ne); }
function Octahedron() { const [active, setActive] = useState(false) const [hovered, setHover] = useState(false) const vertices = [[-1, 0, 0], [0, 1, 0], [1, 0, 0], [0, -1, 0], [-1, 0, 0]] const { color, pos, ...props } = useSpring({ color: active ? 'hotpink' : 'white', pos: active ? [0, 0, 2] : [0, 0, 0], 'material-opacity': hovered ? 0.6 : 0.25, scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1], rotation: active ? [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)] : [0, 0, 0], config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 } }) return ( <group> <animated.line position={pos}> <geometry attach="geometry" vertices={vertices.map(v => new THREE.Vector3(...v))} /> <animated.lineBasicMaterial attach="material" color={color} /> </animated.line> <animated.mesh onClick={e => setActive(!active)} onPointerOver={e => setHover(true)} onPointerOut={e => setHover(false)} {...props}> <octahedronGeometry attach="geometry" /> <meshStandardMaterial attach="material" color="grey" transparent /> </animated.mesh> </group> ) }
function getTouchData(event, gestureState) { const touches = event.nativeEvent.touches; const point0 = new THREE.Vector3( touches[0].locationX, touches[0].locationY ); const point1 = new THREE.Vector3( touches[1].locationX, touches[1].locationY ); const angleRadians = Math.atan2( point1.y - point0.y, point1.x - point0.x ); const vector = new THREE.Vector3(); vector.subVectors(point1, point0).normalize(); const distance = point1.distanceTo(point0); return { point0, point1, angleRadians, vector, distance }; }
_createGLTFNodes(d, tileContent) { const loader = new GLTFLoader(); const rotateX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
(function() { var offset = new THREE.Vector3();
(function() { var v = new THREE.Vector3(); return function panLeft(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix v.multiplyScalar(-distance); panOffset.add(v); }; })()
function Octahedron() { const [active, setActive] = useState(false) const [hovered, setHover] = useState(false) const vertices = [[-1, 0, 0], [0, 1, 0], [1, 0, 0], [0, -1, 0], [-1, 0, 0]] const { color, pos, ...props } = useSpring({ color: active ? 'hotpink' : 'white', pos: active ? [0, 0, 2] : [0, 0, 0], 'material-opacity': hovered ? 0.6 : 0.25, scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1], rotation: active ? [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)] : [0, 0, 0], config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 } }) return ( <group> <animated.line position={pos}> <geometry attach="geometry" vertices={vertices.map(v => new THREE.Vector3(...v))} /> <animated.lineBasicMaterial attach="material" color={color} /> </animated.line> <animated.mesh onClick={e => setActive(!active)} onPointerOver={e => setHover(true)} onPointerOut={e => setHover(false)} {...props}> <octahedronGeometry attach="geometry" /> <meshStandardMaterial attach="material" color="grey" transparent /> </animated.mesh> </group> ) }