1

I made an interactive 3D car showcase with Astro for my bachelors thesis. It's currently suffering from performance issues.

I work with some downloaded 3D-models that are high quality and selfmade lowpoly 3D-models. The lowpoly ones still need 2 sec to render.

I use the draco and gltfloader to load the models into a canvas-tag.

gltfLoader.load('./models/car/body/body_blue.gltf', (gltf) => {
    gltf.scene.scale.set(5, 5, 5);
    gltf.scene.position.set(0, 4, 0);
    scene.add(gltf.scene);
});

const renderer = new WebGLRenderer({ canvas: canvas, alpha: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

Does anyone have advice on this? What can I do to make it faster?

Laura
  • 11
  • 3
  • I’m guessing this is more of a three.js question than an Astro question if all the rendering is happening in the browser — Astro is responsible for server rendering, but I’d guess that doesn’t include the 3D models. You might want to share some more details about how you’re doing the rendering — code examples can be helpful to people trying to answer. – swithinbank May 04 '23 at 10:59
  • 1
    @swithinbank I updated it. – Laura May 05 '23 at 07:07

0 Answers0