更新线框几何图形

时间:2017-11-21 13:41:04

标签: javascript three.js

是否可以显示线框和对象本身,其顶点不断使用着色器进行更新。

我的代码基本上是;

var mainGeo = new THREE.SphereGeometry(100, 80, 80);
var shaderMaterial = new THREE.ShaderMaterial({
  transparent: true,
  uniforms: displacementUniforms,
  vertexShader: document.getElementById('displacement_vertex').textContent,
  fragmentShader: document.getElementById('displacement_fragment').textContent,  
});

myObject = new THREE.Object3D();

objectLayer1 = new THREE.Mesh(mainGeo, shaderMaterial);
objectLayer2 = new THREE.LineSegments(
  new THREE.WireframeGeometry( objectLayer1.geometry ),
  new THREE.LineBasicMaterial({
    color: 0xff5555,
    transparent: true,
    opacity: 0.5
  })
);

myObject.add(objectLayer1);
myObject.add(objectLayer2);
scene.add(myObject);

update();

updateRender(){
  //RenderScene
  //RenderShaderSourceScene
}

update(){

  //do some stuff

  updateUniforms();
  updateRender();

  requestAnimationFrame(update);
}

updateUniforms(){

  //change shader uniform values

}

我尝试过wireframeGeometry但我无法更新它的顶点。

例如

;我使用置换着色器创建此对象,并随着时间的推移更改其值..

displacement shader object

现在我的目标是;在对象周围显示一个线框,并访问线框的属性,如宽度,颜色,不透明度等。

这怎么可能?

提前致谢..

1 个答案:

答案 0 :(得分:0)

我想通了!

    objectLayer2 = new THREE.LineSegments(objectLayer1.geometry,shaderMaterial);

但我们现在有一个颜色问题。

编辑,YAY!

由于我的linesegments从着色器获取顶点和颜色值,我需要编写一个小片段着色器来重新着色我的线段。

在这里;

uniform vec3 lineSegmentColor;

void main() { 
  gl_FragColor = vec4( lineSegmentColor, 1.0 );
}