NASA-AMMOS / 3DTilesRendererJS

Renderer for 3D Tiles in Javascript using three.js
https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/mars.html
Apache License 2.0
1.61k stars 286 forks source link

r3f: get basic sample working? #826

Open bertt opened 1 week ago

bertt commented 1 week ago

Hi,

I'm trying to get the basic r3f sample working:

npx create-react-app my-app
cd my-app
npm install three @react-three/fiber 3d-tiles-renderer
npm run start

A basic three.js sample (https://r3f.docs.pmnd.rs/getting-started/your-first-scene) is working.

but with in app.js:

import { Canvas } from "@react-three/fiber";
import { TilesRenderer } from '3d-tiles-renderer/r3f';

const TILESET_URL ="https://bertt.github.io/cesium_3dtiles_samples/samples/b3dm/tileset.json";
export default function App() {
  return (
    <Canvas>
      <TilesRenderer url={ TILESET_URL } />
    </Canvas>
  );
}

I'm getting a webpack compile error, any idea?

Failed to compile - Unexpected token (124:8) Failed to compile. Module parse failed: Unexpected token (124:8) File was processed with these loaders: * ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | export function EnvironmentControls( props ) { | > return ; | | } ERROR in ./node_modules/3d-tiles-renderer/src/r3f/components/CameraControls.jsx 124:8 Module parse failed: Unexpected token (124:8) File was processed with these loaders: * ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | export function EnvironmentControls( props ) { | > return ; | | } ERROR in ./node_modules/3d-tiles-renderer/src/r3f/components/CanvasDOMOverlay.jsx 47:2 Module parse failed: Unexpected token (47:2) File was processed with these loaders: * ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | // render the children into the container | root.render( > |
| { children } ERROR in ./node_modules/3d-tiles-renderer/src/r3f/components/TilesAttributionOverlay.jsx 56:13 Module parse failed: Unexpected token (56:13) File was processed with these loaders: * ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | if ( att.type === 'string' ) { | > element =
{ att.value }
; | | } else if ( att.type === 'html' ) { ERROR in ./node_modules/3d-tiles-renderer/src/r3f/components/TilesRenderer.jsx 27:8 Module parse failed: Unexpected token (27:8) File was processed with these loaders: * ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | }, [ tiles ] ); | > return { children }; | | } webpack compiled with 4 errors
gkjohnson commented 6 days ago

I don't know much about Webpack or create-react-app and why this wouldn't be working, but as far as I know create-react-app is defunct and should no longer be used. Is that not right? cc @drcmda

bertt commented 6 days ago

ok, so what's the recommended way to get the basic sample working?

gkjohnson commented 5 days ago

I'm not an expert in these build processes but this project uses Vite and is what I typically see recommended elsewhere. You can see other recommendations in the official react docs:

https://react.dev/learn/start-a-new-react-project

bertt commented 5 days ago

Got a step further (using Vite), I see tileset.json is requested but no b3dm request (and empty screen). Maybe need to go to initial extent or so?

import { Canvas } from "@react-three/fiber";
import { TilesRenderer } from '3d-tiles-renderer/r3f';

const TILESET_URL = "https://bertt.github.io/3dtiles_cube/demo/dam/1.0/tileset.json";
export default function App() {
  return (
    <Canvas>
      <TilesRenderer url={ TILESET_URL } />
    </Canvas>
  );
}
gkjohnson commented 2 days ago

It looks like the camera needs to be positioned so the tile set is in view. You can do so with the "camera" property on the Canvas element. See the Canvas component docs for react-three-fiber.

<Canvas camera={ { position: [ x, y, z ] } }>