0
我剛剛在codepen上發現了這個漂亮的演示,但我不知道如何更改球體的顏色 - 我的意思是藍色和紫色colore,而不是背景顏色我知道如何改變它!如何更改此THREE.js演示中的顏色
以下是演示:Link to the demo
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()
{
\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);
** Thanks man!** –