基於three.js的shader入門教程 三

threejs交流羣511163089

片源着色器

前面提了，點會三個三個的構造成三角面，這個就是給三角面上色了。

有varying這種開頭的變量

有uniform開頭的變量

varying vec3 a;這種變量 是從頂點着色器傳來的

你需要在頂點着色器也寫一句

var geometry = new THREE.SphereBufferGeometry(10);
var material=new THREE.ShaderMaterial({
	vertexShader:`
    varying vec3 a; 
	void main()
	{
        a=position;
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}`,
	fragmentShader:`
    varying vec3 a; 
	void main()
    {
        gl_FragColor=vec4(1.0);
    }
	`,
	})
var mesh=new THREE.Mesh(geometry,material);

這樣你在頂點着色器賦值 就帶到了片源着色器 webgl2.0之後可以不用varying 換成in out 

你可以把position.xyz賦值給color的rgb試一試 或者賦值其他的東西