r3f: get basic sample working?

[bertt]

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]

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]

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

[gkjohnson]

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]

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]

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 ] } }>