CORS Issue or Bug in My Three.js Model Viewer Code?

Hi all,

Hope you are doing well,

My name is Mathilde. I’m working for ARTELIA. I want to create a tool to show a model.

I have the same problem (CORS)

Here is my code :

Can you help me ?
Is it a problem with a CORS or with my code ?

export async function displayModel() {
// let token = localStorage.getItem(TOKEN)

  try {
    const response = await fetch('https://app.speckle.systems/projects/...../models/.....');
     
      if (!response.ok) {
        throw new Error(`Erreur HTTP ! statut : ${response.status}`);
      }
      const data = await response.json();
      console.erreur(data);
    initThreeJS(data);
  } catch (error) {
    console.error('Erreur lors de la récupération de la maquette:', error);
    
  }
}


// Initialiser Three.js pour afficher la maquette
function initThreeJS(modelData) {
  const container = document.getElementById('models-container');
  const width = container.clientWidth;
  const height = container.clientHeight;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);

  modelData.objects.forEach(obj => {
    const geometry = new THREE.BoxGeometry(obj.size.x, obj.size.y, obj.size.z);
    const material = new THREE.MeshBasicMaterial({ color: obj.color });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(obj.position.x, obj.position.y, obj.position.z);
    scene.add(mesh);
  });

  camera.position.z = 5;

  const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };

  animate();
}

Have a nice day,

Hello Mathilde, we’d really strongly recommend starting off from this template:

Our viewer is heavily customised. The code you’re showing would just display a bunch of boxes if i’m reading it right!

Hello Dimitrie,

I have already done the basic setup. Then, I followed your tutorial for the Application tool and I wanted to improve the application by allowing the visualization of models directly from the application.

The displayModel() function is supposed to retrieve a project. The initThreeJS() function allows the project to be visualized.

Then, the displayModel() function is called in the view to be displayed.

Have a nice day,

Hi @Mathilde

I can’t say I 100% understand what your end goal is but from where I’m standing you have more or less 2 options:

  1. Use our speckle viewer library to display the models in your own application. The docs for the viewer are here

  2. Don’t use our viewer library and try and display things on your own. This is totally possible, however in order to get the actual speckle objects I suggest you use the our object-loader library which is able to take stream URLs and actually provide you with objects

You could also have a mix of the two where you use the viewer library but also mix in your own rendering implementation, but that might not be what you are looking for

If displaying models in your application is what you are after, I suggest you try our viewer library since that’s why built it for :smiley_spockle:

Cheers