diff --git a/example/r3f/projection.jsx b/example/r3f/projection.jsx index 437f33e64..50dfc0f11 100644 --- a/example/r3f/projection.jsx +++ b/example/r3f/projection.jsx @@ -3,18 +3,21 @@ import { createRoot } from 'react-dom/client'; import { Canvas, useFrame } from '@react-three/fiber'; import { TilesPlugin, TilesRenderer, EnvironmentControls } from '3d-tiles-renderer/r3f'; import { TilesFadePlugin, CesiumIonOverlay, EnforceNonZeroErrorPlugin } from '3d-tiles-renderer/plugins'; -import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Quaternion, Vector3 } from 'three'; +import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Mesh, MeshNormalMaterial, MeshStandardMaterial, PerspectiveCamera, Quaternion, Vector3 } from 'three'; import { PivotControls } from '@react-three/drei'; import { ImageOverlay, ImageOverlayPlugin } from './plugins/ImageOverlayPlugin.jsx'; import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js'; import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js'; +import { useControls } from 'leva'; const tilesetUrl = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json'; function Scene() { const [ transformRoot, setTransformRoot ] = useState( null ); + const [ projectionRoot, setProjectionRoot ] = useState( null ); const [ overlay, setOverlay ] = useState( null ); + const { perspective } = useControls( { perspective: true } ); const worldMatrix = useMemo( () => { @@ -31,11 +34,19 @@ function Scene() { const boxGeometry = new BoxGeometry(); boxGeometry.translate( 0.5, 0.5, 0.5 ); + const mesh = new Mesh( boxGeometry, new MeshNormalMaterial() ); + mesh.material.opacity = 0.25; + mesh.material.transparent = true; + mesh.material.depthWrite = false; + return mesh; + + const edgesGeometry = new EdgesGeometry( boxGeometry ); const linesGeometry = new LineSegmentsGeometry().fromEdgesGeometry( edgesGeometry ); const lines = new LineSegments2( linesGeometry ); lines.material.color.set( 0xffff00 ); lines.material.linewidth = 2; + return lines; }, [] ); @@ -57,12 +68,30 @@ function Scene() { }, [ boxMesh ] ); + useEffect( () => { + + if ( ! projectionRoot ) { + + return; + + } + + projectionRoot.updateMatrix(); + projectionRoot.matrixAutoUpdate = false; + + const camera = new PerspectiveCamera(); + // projectionRoot.matrix.makeScale( 1, 1, 2 ).setPosition( - 0.5, - 0.5, - 0.5 );//.premultiply( camera.projectionMatrixInverse ); + projectionRoot.matrix.makeScale( 1, 2, 2 ).setPosition( - 1, - 1, - 1 ).premultiply( camera.projectionMatrixInverse ); + + + }, [ projectionRoot ] ); + useFrame( () => { if ( overlay && boxMesh ) { - boxMesh.scale.x = overlay.aspectRatio; - worldToProjectionMatrix.copy( transformRoot.matrixWorld ).invert(); + // boxMesh.scale.x = overlay.aspectRatio; + worldToProjectionMatrix.copy( ( perspective ? projectionRoot : transformRoot ).matrixWorld ).invert(); } @@ -90,12 +119,28 @@ function Scene() { {/* Controls */} - - - - - - + + + { + ! perspective && + + + + + + } + + { + perspective && + + + + + + + + } + );