starsGeometry[0].setAttribute 不是函数

Question

尝试复制此站点上存在的 Three.js 地球仪：

https://trijs.org/examples/misc_controls_fly.html

当我启动代码时出现错误：

starsGeometry[0].setAttribute 不是一个函数，前几天我一直被这样的问题困扰，我很想解决这个问题

我的初始化是这样的：

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));

我究竟做错了什么？

Answer 1

在THREEJS库的 110 版本中，addAttribute已更改为setAttribute. 您似乎正在尝试使用在版本 110 或更高版本上编写的代码，并使用THREEJS版本 109 或更早版本

BufferGeometry.addAttribute()已更名为BufferGeometry.setAttribute().
查看迁移文档