如何在此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