Update old three.js code

Questions
,
1

Hey! I’m trying to use code for an older version of three.js with a new version due to that I need newer functionality in the new three.js versions.

The code below won’t run on newer three.js versions. From what I can understand getting the faces,vertices and the faceVertexUvs works differently in newer versions by using the .getAttribute. But it does not return the same result as the old versions do.

Does anyone have a clue how I could convert the given code below to produce the same result using the latest version of three.js?

For those interested it is from the three-fisheye repo on Github.

function createFisheyeMesh(fisheye_texture: THREE.Texture, MESH_N: number): THREE.Mesh {
  const sphere = new THREE.SphereGeometry(1000, MESH_N, MESH_N, Math.PI, Math.PI);
  const {vertices, faces, faceVertexUvs} = sphere;
  const radius = sphere.boundingSphere.radius;
  faces.forEach((face, i)=>{
    const {a, b, c} = face;
    faceVertexUvs[0][i] = [a, b, c].map((id)=>{
      const {x, y, z} = vertices[id]; 
      return new THREE.Vector2(
        (x+radius)/(2*radius),
        (y+radius)/(2*radius));
    });
  });
  const mat = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, map: fisheye_texture, side: THREE.BackSide } );
  const mesh = new THREE.Mesh(sphere, mat);
  mesh.rotation.x = Math.PI*1/2;
  return mesh;
}
2

THREE.Geometry: Edit fiddle - JSFiddle - Code Playground
THREE.BufferGeometry(latest release): Edit fiddle - JSFiddle - Code Playground

1 Like
3

Thank you, the solution using buffer geometry did it. :grin: