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 &&
+
+
+
+
+
+
+
+ }
+
>
);