starsGeometry[0].setAttribute 不是一个函数 [英] starsGeometry[0].setAttribute is not a function

问题描述

试图复制本网站上的three.js地球:

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

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

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

我的初始化是这样的:

function init() {相机 = 新的 THREE.PerspectiveCamera(25, SCREEN_WIDTH/SCREEN_HEIGHT, 50,1e7);camera.position.z = 半径 * 5；场景 = 新的 THREE.Scene();Scene.fog = new THREE.FogExp2(0x000000, 0.00000025);dirLight = new THREE.DirectionalLight(0xffffff);dirLight.position.set(-1, 0, 1).normalize();场景添加(dirLight)；var materialNormalMap = new THREE.MeshPhongMaterial({高光:0x333333，光泽度:15，地图: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 )});//行星几何 = 新 THREE.SphereBufferGeometry(radius, 100, 50);meshPlanet = new THREE.Mesh(geometry, materialNormalMap);meshPlanet.rotation.y = 0;meshPlanet.rotation.z = 倾斜；场景添加(meshPlanet)；//云var materialClouds = new THREE.MeshLambertMaterial({地图:textureLoader.load("textures/planets/earth_clouds_1024.png"),透明:真实});meshClouds = new THREE.Mesh(geometry, materialClouds);meshClouds.scale.set(cloudScale, cloudScale, cloudScale);meshClouds.rotation.z = 倾斜；场景.添加(网格云)；var materialMoon = new THREE.MeshPhongMaterial({地图:textureLoader.load('textures/planets/moon_1024.jpg')});meshMoon = new THREE.Mesh(geometry, materialMoon);meshMoon.position.set( 半径 * 5, 0, 0);meshMoon.scale.set(moonScale，moonScale，moonScale)；场景.添加(meshMoon)；var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new三.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));

我做错了什么?

解决方案

在 THREEJS 库的 110 版中，addAttribute 已更改为 setAttribute.看起来您正在尝试使用在 110 或更高版本上编写的代码，使用 THREEJS 109 或更低版本

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

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

https://threejs.org/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?

解决方案

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

这篇关于starsGeometry[0].setAttribute 不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！