Public
Edited
Jun 1, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
image
Insert cell
function vertexShader() {
return `
varying vec3 vNormal;
varying vec2 vUv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
vNormal = normalize( normalMatrix * normal );
vUv = uv;
}
`;
}
Insert cell
function fragmentShader() {
return `
uniform sampler2D texturet; // don't call it 'texture'
varying vec3 vNormal;
varying vec2 vUv;
void main() {
vec3 diffuse = texture2D( texturet, vUv ).xyz;
float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );
vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity,3.0 );
gl_FragColor = vec4( diffuse + atmosphere, 1.0 );
}
`;
}
Insert cell
material = {
const mat = new THREE.MeshPhongMaterial();
mat.map = new THREE.TextureLoader().load(image.src);
mat.displacementMap = new THREE.TextureLoader().load(image.src);
return mat;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more