React js with cesium and resium load failed 3Dtileset

CesiumJS
1

While implementing the cesium program through React, the .glb file was successfully loaded, but the 3Dtileset failed to load. An attempt was made to load a 3Dtileset locally without the backend server being configured yet.

So my question is, is a backend server required to load a locally stored 3D Tilesset in Cesium js? Or, I wonder if there is a grammatical error. The error coming from the current code is below. Uncaught TypeError: Cannot set properties of undefined (setting ‘_url’)

import React from 'react'; import { Viewer, Entity } from 'resium'; 
import { Cartesian3, Color, IonResource, Cesium3DTileset, createWorldTerrain } from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css';

function App() { 
return ( 
<div style={{ height: "100vh", width: "100%" }}> <Viewer full terrainProvider={createWorldTerrain({ requestWaterMask: true, requestVertexNormals: true, })} > {/* 추가 엔티티 */} <Entity name="Sample Point" position={Cartesian3.fromDegrees(126.9780, 37.5665, 100)} // 서울 좌표 point={{ pixelSize: 10, color: Color.BLUE }} description="This is a sample point." />

{/* GLB 모델 엔티티 */}
    <Entity
      name="Ground Vehicle"
      position={Cartesian3.fromDegrees(126.9780, 37.5665, 100)} // 서울 좌표
      model={{
        uri: './Cesium/Assets/GroundVehicle.glb', // public 폴더에 파일을 넣은 경우 상대경로로 접근
        minimumPixelSize: 128,
        maximumScale: 20000
      }}
    />
    
    {/* 3D Tileset 엔티티 */}
    <Cesium3DTileset
      url={'./Cesium/Assets/baekma_second/tileset.json'} // 3D Tileset의 URL 경로
      maximumScreenSpaceError={16} // 화면 공간 오류를 설정하여 성능을 조절
      skipLevels={0}
    />
  </Viewer>
</div>

); }

export default App;
2

At the risk of being distracting, because I frankly have no clue about resium: Looking at the Resium Cesium3DTileset example, the code there is

      <Cesium3DTileset
        {...args}
        url="./tileset/tileset.json"
        onAllTilesLoad={action("onAllTilesLoad")}
        ...

Note that the url is a string. In your case, it is
url={'./Cesium/Assets/baekma_second/tileset.json'}
which is… something like an object.

Maybe that’s something to look at…

3

hello Marco13
Thanks for your reply.

I solved the problem in my code.
This problem was caused by cesium installed through npm.

The basic code of Cesium3DTileset was changed depending on the version, so the URL could not be read.

The code was valid for version “cesium”: “~1.83”.

Thank you again for your reply.