我有一个非常基本的场景,其中包括立方体形状的粒子网格。您可以在这里找到它:https://codepen.io/sungaila/pen/qqVXKM
我的问题是,如果我使用 ShaderMaterial,我无法显示粒子。以下是我的(非常简单的)着色器代码:
<script type = 'x-shader/x-vertex' id = 'vertexShader'>
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);
}
</script>
<script type = 'x-shader-x-fragment' id = 'fragmentShader'>
void main() {
gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );
}
</script>
相关JS代码如下:
geometry = new THREE.BoxBufferGeometry(10,10,10, 5, 5, 5);
material = new THREE.ShaderMaterial({
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});
particles = new THREE.Points(geometry, material);
我注意到,如果我注释掉“ Material ”行, Material 将默认为“PointsMaterial”并且将显示粒子。另外,粒子的颜色会以某种方式受到着色器代码的影响,即使我觉得我还没有将它们链接在一起。
如何使用 ShaderMaterial 来显示粒子?
最佳答案
您需要在顶点着色器中设置gl_PointSize
。
<script type = 'x-shader/x-vertex' id = 'vertexShader'>
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = 1.0 * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
</script>
关于javascript - Three.js 着色器 Material 不显示粒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40888359/