Public
Edited
Jun 4, 2019
2 forks
9 stars
teapot = {
const size = 400;
const segments = 15;
const bottom = true;
const lib = true;
const body = true;
const fitLid = true;
const blinn = true;
const geometry = new THREE.TeapotBufferGeometry(size, segments, bottom, lib, body, fitLid, blinn);
return new THREE.Mesh(geometry, material);
}
material = {
const material = new THREE.ShaderMaterial({
uniforms: {
Ka: { value: new THREE.Vector3(0.9, 0.5, 0.3) },
Kd: { value: new THREE.Vector3(0.9, 0.5, 0.3) },
Ks: { value: new THREE.Vector3(0.8, 0.8, 0.8) },
LightIntensity: { value: new THREE.Vector4(0.5, 0.5, 0.5, 1.0) },
LightPosition: { value: new THREE.Vector4(0.0, 2000.0, 0.0, 1.0) },
Shininess: { value: 200.0 }
},
vertexShader: `
varying vec3 Normal;
varying vec3 Position;
void main() {
Normal = normalize(normalMatrix * normal);
Position = vec3(modelViewMatrix * vec4(position, 1.0));
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec3 Normal;
varying vec3 Position;
uniform vec3 Ka;
uniform vec3 Kd;
uniform vec3 Ks;
uniform vec4 LightPosition;
uniform vec3 LightIntensity;
uniform float Shininess;
vec3 phong() {
vec3 n = normalize(Normal);
vec3 s = normalize(vec3(LightPosition) - Position);
vec3 v = normalize(vec3(-Position));
vec3 r = reflect(-s, n);
vec3 ambient = Ka;
vec3 diffuse = Kd * max(dot(s, n), 0.0);
vec3 specular = Ks * pow(max(dot(r, v), 0.0), Shininess);
return LightIntensity * (ambient + diffuse + specular);
}
void main() {
gl_FragColor = vec4(phong(), 1.0);
}
`
});
return material;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
