I’m experiencing a runtime error when using the three-loader-3dtiles library.
“Uncaught TypeError: can’t access property ‘elements”, m is undefined”. The error occurs when I try to update the runtime using the
useFrame(({ size, camera }, dt) => {
if (runtime) runtime.update(dt, size.height, camera);
});
But If I comment out above line, the error goes away, but the 3D tiles are not rendered.
here is my code
loader-3dtiles-rf3.tsx
import { Loader3DTiles, LoaderProps, Runtime } from 'three-loader-3dtiles';
import { useLoader, useThree, useFrame } from '@react-three/fiber';
import { Loader, Vector2 } from 'three';
class Loader3DTilesBridge extends Loader {
props: LoaderProps;
load(url, onLoad, onProgress, onError) {
const loadTileset = async () => {
try {
const result = await Loader3DTiles.load({
url,
...this.props,
onProgress,
});
onLoad(result);
console.log('result', result);
} catch (e) {
console.log('Error loading 3d tiles!', e);
onError(e);
}
};
loadTileset();
}
setProps(props) {
this.props = props;
}
}
function Loader3DTilesR3FAsset(props) {
const threeState = useThree();
const loaderProps = {
renderer: threeState.gl,
viewport: getViewport(threeState.gl),
options: {
...props,
},
};
// TODO: Getting type error
// @ts-ignore
const { model, runtime } = useLoader(Loader3DTilesBridge, props.url, (loader: Loader3DTilesBridge) => {
loader.setProps(loaderProps);
});
useFrame(({ size, camera }, dt) => {
if (runtime) runtime.update(dt, size.height, camera);
});
return (
<group {...props} dispose={runtime.dispose}>
<primitive object={model} />
</group>
);
}
function getViewport(renderer) {
const viewSize = renderer.getSize(new Vector2());
return {
width: viewSize.x,
height: viewSize.y,
devicePixelRatio: renderer.getPixelRatio(),
};
}
export { Loader3DTilesR3FAsset };
import { Loader3DTiles, LoaderProps, Runtime } from 'three-loader-3dtiles';
import { useLoader, useThree, useFrame } from '@react-three/fiber';
import { Loader, Vector2 } from 'three';
class Loader3DTilesBridge extends Loader {
props: LoaderProps;
load(url, onLoad, onProgress, onError) {
const loadTileset = async () => {
try {
const result = await Loader3DTiles.load({
url,
...this.props,
onProgress,
});
onLoad(result);
console.log('result', result);
} catch (e) {
console.log('Error loading 3d tiles!', e);
onError(e);
}
};
loadTileset();
}
setProps(props) {
this.props = props;
}
}
function Loader3DTilesR3FAsset(props) {
const threeState = useThree();
const loaderProps = {
renderer: threeState.gl,
viewport: getViewport(threeState.gl),
options: {
...props,
},
};
// TODO: Getting type error
// @ts-ignore
const { model, runtime } = useLoader(Loader3DTilesBridge, props.url, (loader: Loader3DTilesBridge) => {
loader.setProps(loaderProps);
});
useFrame(({ size, camera }, dt) => {
if (runtime) runtime.update(dt, size.height, camera);
});
return (
<group {...props} dispose={runtime.dispose}>
<primitive object={model} />
</group>
);
}
function getViewport(renderer) {
const viewSize = renderer.getSize(new Vector2());
return {
width: viewSize.x,
height: viewSize.y,
devicePixelRatio: renderer.getPixelRatio(),
};
}
export { Loader3DTilesR3FAsset };
and I’m rendering in canva bu rf3 this way
<Canvas shadows style={{ background: '#272730' }}>
<PerspectiveCamera ref={camera}>
<Suspense fallback={null}>
<Loader3DTilesR3FAsset
dracoDecoderPath={'https://unpkg.com/[email protected]/examples/jsm/libs/draco'}
basisTranscoderPath={'https://unpkg.com/[email protected]/examples/jsm/libs/basis'}
rotation={new THREE.Euler(-Math.PI / 2, 0, 0)}
url="https://int.nyt.com/data/3dscenes/ONA360/TILESET/0731_FREEMAN_ALLEY_10M_A_36x8K__10K-PN_50P_DB/tileset_tileset.json"
maximumScreenSpaceError={48}
/>
</Suspense>
</PerspectiveCamera>
<OrbitControls camera={camera.current} />
</Canvas>
