trying to replicate the three.js globe present on this site:

.html

and when I launch the code I get the mistake:

starsGeometry[0].setAttribute is not a function ,I've bee stuck befre on a problem like this in the previous days and i would love to get the problem

my init it's like this:

function init() {
  camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 
                                       1e7);
  camera.position.z = radius * 5;

  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );

  dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(-1, 0, 1).normalize();
  scene.add(dirLight);

  var materialNormalMap = new THREE.MeshPhongMaterial({
    specular: 0x333333,
    shininess: 15,
    map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
    specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
    normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
    normalScale: new THREE.Vector2( 0.85, 0.85 )
  } );

  //planet

  geometry = new THREE.SphereBufferGeometry(radius, 100, 50);
  meshPlanet = new THREE.Mesh(geometry, materialNormalMap);
  meshPlanet.rotation.y = 0;
  meshPlanet.rotation.z = tilt;
  scene.add(meshPlanet);

  //clouds

  var materialClouds = new THREE.MeshLambertMaterial({
    map: textureLoader.load("textures/planets/earth_clouds_1024.png"),
    transparent: true
  });

  meshClouds = new THREE.Mesh(geometry, materialClouds);
  meshClouds.scale.set(cloudScale, cloudScale, cloudScale);
  meshClouds.rotation.z = tilt;
  scene.add(meshClouds);

  var materialMoon = new THREE.MeshPhongMaterial({
    map: textureLoader.load('textures/planets/moon_1024.jpg')
  } );

  meshMoon = new THREE.Mesh(geometry, materialMoon);
  meshMoon.position.set( radius * 5, 0, 0);
  meshMoon.scale.set(moonScale, moonScale, moonScale);
  scene.add(meshMoon);

  var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new 
                                      THREE.BufferGeometry()];

  var vertices1 = [];
  var vertices2 = [];

  var vertex = new THREE.Vector3();

  for (var i = 0; i < 250; i++) {
    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;

    vertices1.push(vertex.x, vertex.y, vertex.z);
  }

  for (var i = 0; i < 1500; i++) {
    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;

    vertices2.push(vertex.x, vertex.y, vertex.z);
  }

  starsGeometry[0].setAttribute('position', new THREE.BufferAttribute (vertices1, 3));
  starsGeometry[1].setAttribute('position', new THREE.BufferAttribute (vertices2, 3));

what am I doing wrong?

trying to replicate the three.js globe present on this site:

https://threejs/examples/misc_controls_fly.html

and when I launch the code I get the mistake:

starsGeometry[0].setAttribute is not a function ,I've bee stuck befre on a problem like this in the previous days and i would love to get the problem

my init it's like this:

function init() {
  camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 
                                       1e7);
  camera.position.z = radius * 5;

  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );

  dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(-1, 0, 1).normalize();
  scene.add(dirLight);

  var materialNormalMap = new THREE.MeshPhongMaterial({
    specular: 0x333333,
    shininess: 15,
    map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
    specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
    normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
    normalScale: new THREE.Vector2( 0.85, 0.85 )
  } );

  //planet

  geometry = new THREE.SphereBufferGeometry(radius, 100, 50);
  meshPlanet = new THREE.Mesh(geometry, materialNormalMap);
  meshPlanet.rotation.y = 0;
  meshPlanet.rotation.z = tilt;
  scene.add(meshPlanet);

  //clouds

  var materialClouds = new THREE.MeshLambertMaterial({
    map: textureLoader.load("textures/planets/earth_clouds_1024.png"),
    transparent: true
  });

  meshClouds = new THREE.Mesh(geometry, materialClouds);
  meshClouds.scale.set(cloudScale, cloudScale, cloudScale);
  meshClouds.rotation.z = tilt;
  scene.add(meshClouds);

  var materialMoon = new THREE.MeshPhongMaterial({
    map: textureLoader.load('textures/planets/moon_1024.jpg')
  } );

  meshMoon = new THREE.Mesh(geometry, materialMoon);
  meshMoon.position.set( radius * 5, 0, 0);
  meshMoon.scale.set(moonScale, moonScale, moonScale);
  scene.add(meshMoon);

  var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new 
                                      THREE.BufferGeometry()];

  var vertices1 = [];
  var vertices2 = [];

  var vertex = new THREE.Vector3();

  for (var i = 0; i < 250; i++) {
    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;

    vertices1.push(vertex.x, vertex.y, vertex.z);
  }

  for (var i = 0; i < 1500; i++) {
    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;

    vertices2.push(vertex.x, vertex.y, vertex.z);
  }

  starsGeometry[0].setAttribute('position', new THREE.BufferAttribute (vertices1, 3));
  starsGeometry[1].setAttribute('position', new THREE.BufferAttribute (vertices2, 3));

what am I doing wrong?

• javascript
• three.js

2 Answers 2

In version 110 of THREEJS library, addAttribute has been changed to setAttribute. It looks like you're trying to use code written on version 110 or later, using a THREEJS version 109 or earlier

BufferGeometry.addAttribute() has been renamed to BufferGeometry.setAttribute().
Take a look at the migration documentation

only why to work:

starsGeometry[0].addAttribute('position', new THREE.BufferAttribute (vertices1, 3)); starsGeometry[1].addAttribute('position', new THREE.BufferAttribute (vertices2, 3));