如何在此 THREE.js 演示中更改颜色

Question

我刚刚在 codepen 上找到了这个漂亮的演示，但我不知道如何更改球体的颜色 - 我的意思是蓝色和紫色，而不是背景颜色我知道如何更改它！

JavaScript请高手帮忙！这是 HTML 代码：

<canvas></canvas>

<script type="x-shader/x-vertex" id="wrapVertexShader">
uniform float uTime;
varying vec3 vNormal;
attribute float perlin;
varying float vPerlin;
void main() 
{
  vNormal = normal;
  vPerlin = perlin;
  vec3 position = position;
    position.x *= abs(perlin)*0.1+1.0;
    position.y *= abs(perlin)*0.1+1.0;
    position.z *= abs(perlin)*0.1+1.0;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = 3.0;
    gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="wrapFragmentShader">
varying float vPerlin;
void main(){
  vec3 outcolor = vec3(abs(vPerlin),vPerlin-1.0,1.0);
  gl_FragColor = vec4(outcolor, 1.0);
}
</script>

这是JS代码：

var ww = window.innerWidth,
    wh = window.innerHeight,
    imgData;

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("canvas")
});
renderer.setClearColor(0xffffff);
renderer.setSize(ww, wh);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 10000);
camera.position.set(0, 0, 300);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(100,60, 60);
var mat = new THREE.MeshBasicMaterial({color:0xff0000});
var length = geom.attributes.position.count;
var perlins = new Float32Array(length);
geom.addAttribute('perlin', new THREE.BufferAttribute(perlins, 1));
var wrapMatShader = new THREE.ShaderMaterial({
    uniforms: {
        uTime: { type: "f", value: 1.0 },
    },
    vertexShader: document.getElementById("wrapVertexShader").textContent,
    fragmentShader: document.getElementById("wrapFragmentShader").textContent
  });
var sphere = new THREE.Mesh(geom, wrapMatShader);
scene.add(sphere);


// ========  
//RENDER
// ========  
function render(a) {
  requestAnimationFrame(render);
  
  var perlins = new Float32Array(length);
  for(var i=0;i<length;i++){
    var x = geom.attributes.position.array[i*3];
    var y = geom.attributes.position.array[i*3+1];
    var z = geom.attributes.position.array[i*3+2];
    var random = noise.simplex3((x+a*0.02)*0.01, (y+a*0.02)*0.01, (z+a*0.02)*0.01);
    perlins[i] = random;
  }
  geom.addAttribute('perlin', new THREE.BufferAttribute(perlins, 1));
  
  wrapMatShader.uniforms.uTime.value  = a;

  renderer.render(scene, camera);
}


requestAnimationFrame(render);

Answer 1

这是设置颜色值的行：

vec3 outcolor = vec3(abs(vPerlin), vPerlin - 1.0, 1.0);

所以有参数vPerlin控制颜色的红色和绿色值。蓝色分量固定为 1.0。继续尝试一下这些值。

现在，该 perlin 值来自顶点着色器，顶点着色器又接收来自 javascript:

的值

var perlins = new Float32Array(length);
for(var i=0;i<length;i++){
    var x = geom.attributes.position.array[i*3];
    var y = geom.attributes.position.array[i*3+1];
    var z = geom.attributes.position.array[i*3+2];
    var random = noise.simplex3((x+a*0.02)*0.01, (y+a*0.02)*0.01, (z+a*0.02)*0.01);
    perlins[i] = random;
}
geom.addAttribute('perlin', new THREE.BufferAttribute(perlins, 1));

比这要复杂一点，涉及到顶点着色器和片段着色器如何协同工作。如果您对那里发生的事情感到好奇，您可能想阅读这篇文章：https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html

如何在此 THREE.js 演示中更改颜色

How to change the colors in this THREE.js demo

three.js

shader

perlin-noise