THREE.js 데모에서 색상을 변경하는 방법

Question

이 아름다운 데모를 codepen에서 찾았지만 구의 색상을 변경하는 방법을 모르겠습니다. 배경색이 아닌 파란색과 보라색의 색상을 의미합니다. 나는 그것을 바꾸는 방법을 안다! Link to the demo

자바 스크립트 전문가가 도와주세요 : 여기

데모입니다! 이는 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() 
 
{ 
 
\t \t vNormal = normal; 
 
\t \t vPerlin = perlin; 
 
\t \t 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으로 고정됩니다. 이 값들을 가지고 조금만 놀아 라. 이제

는, 그 펄린 값은 다시 자바 스크립트의이 작품에서 값을받는 정점 셰이더에서 오는 :

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)); 

은 조금 더 복잡보다, 그리고 어떻게 TEH vertex-을 포함한다 조각 셰이더가 함께 작동합니다. 궁금한 점이 있다면 여기에서 읽고 싶은 것일 수도 있습니다. https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html