Three.js 顶点位置未使用自定义着色器更新

Question

我在three.js 中创建了一个自定义着色器，以允许我设置各个顶点的颜色、大小和位置。

颜色和大小工作正常，但是当我更新顶点 x、y 或 z 时，它不会在屏幕上更新。

JSFiddle

我错过了什么？

顶点着色器：

<script type="x-shader/x-vertex" id="vertexshader">

  attribute float size;
  attribute vec3 color;

  varying vec3 vColor;
  varying vec2 vUv;

  void main() 
  {
    vColor = color;
    gl_PointSize = size;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }

</script>

片段着色器

<script type="x-shader/x-fragment" id="fragmentshader">

  uniform sampler2D texture;

  varying vec2 vUv;
  varying vec3 vColor;

  void main() 
  {
    vec4 color = vec4(vColor, 1);
    gl_FragColor = color;
  }

</script>

JS：

var container = document.getElementById('container');
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;

var scene = new THREE.Scene();

var vShader = document.getElementById('vertexshader').textContent;
var fShader = document.getElementById('fragmentshader').textContent;

var uniforms = {};

var attributes = {
  color: { type: 'c', value: [] },
  size:  { type: 'f', value: [] }
};

var geometry = new THREE.Geometry();

for ( var i = 0; i < 100; i ++ ) 
{
  var angle = Math.random() * Math.PI * 2;
  var radius = 40 + (Math.random() * 5);

  var vertex = new THREE.Vector3();
  vertex.x = Math.cos(angle) * radius;
  vertex.y = Math.sin(angle) * radius;
  vertex.z = 0; 

  attributes.size.value[i] = Math.random() * 10;
  attributes.color.value[i] = new THREE.Color( 0xff0000 );

  geometry.vertices.push( vertex );
}

var material = new THREE.ShaderMaterial(
{ 
  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vShader,
  fragmentShader: fShader,
  transparent: true
});

var particleSystem = new THREE.PointCloud(geometry, material);
scene.add( particleSystem );

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x292B30, 1 );
container.appendChild( renderer.domElement );

animate();

function animate() 
{
  requestAnimationFrame( animate );
  render();
}

function render() 
{
  for (var i = geometry.vertices.length - 1; i >= 0; i--) 
  {
    geometry.vertices[i].z = geometry.vertices[i].z - 0.5 ;
  }

  camera.lookAt( scene.position );
  //particleSystem.geometry.__dirtyVertices = true;
  renderer.render( scene, camera );
}

Answer 1

修改顶点位置时，设置verticesNeedUpdate标志：

geometry.verticesNeedUpdate = true;

更新小提琴： https : //jsfiddle.net/1cmg0z2f/2/

Three.js r71，由于ShaderMaterial的变化，小提琴ShaderMaterial用于新版本。

Answer 2

我在之前接受的答案中添加了评论，但以防万一这里有更新的答案

geometry.attributes[attributeName].needsUpdate = true

例如

geometry.attributes.position.needsUpdate = true

---

请记住，这适用于您使用setAttribute添加的自定义/着色器属性，这是我在找到此 QA 之前搜索的内容。