vertexShader = () => `
uniform vec3 mousePos;
uniform float maxDistance;
varying vec3 v_mousePos;
varying vec3 v_pos;
void main() {
v_mousePos = mousePos;
v_pos = position;
vec3 geoCenter = vec3(0, 1, 0);
float distanceToPos = min(1.0, distance(mousePos, position));
float displacement = 1.0 - distanceToPos;
vec3 displacementVector = (position - geoCenter) * displacement;
vec3 newPosition = position + displacementVector;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(newPosition, 1.0);
}
`
fragmentShader = () => `
varying vec3 v_mousePos;
varying vec3 v_pos;
void main() {
float dist = distance(v_mousePos, v_pos);
float normDist = 1.0 - min(1.0, dist / 3.0);
vec3 color = vec3(0.0, normDist, 0.0);
gl_FragColor = vec4(
color,
0.5 // Alpha
);
}
`
{
var geometry = new THREE.SphereBufferGeometry( 1, 32, 32 );
const uniforms = {
mousePos: {
type: "vec3",
value: [0, 2, 0]
},
maxDistance: {
value: 1,
},
};
var material = new THREE.ShaderMaterial( {
side: THREE.DoubleSide,
vertexShader: vertexShader(), // We are now using our vertex shader
fragmentShader: fragmentShader(),
uniforms,
});
const mesh = new THREE.Mesh( geometry, material );
const renderer = meshRenderer(mesh)
var sphereGeo = new THREE.SphereGeometry( .1, 16, 16 );
var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x55cc00, opacity: 0.5, transparent: true} );
var sphere = new THREE.Mesh( sphereGeo, sphereMaterial );
sphere.position.set(0, 2, 0)
renderer.scene.add( sphere );
var light = new THREE.PointLight( 0xffffff, 1, 10 );
light.position.set( 5, 5, 5 );
renderer.scene.add( light );
const startTime = Date.now()
while(true) {
let elapsed = (Date.now() - startTime)/1000;
let yPos = Math.sin(elapsed * 2) + 1;
let xPos = Math.cos(elapsed);
uniforms.mousePos.value[0] = xPos;
uniforms.mousePos.value[1] = yPos;
sphere.position.set(xPos, yPos, 0)
yield renderer.render()
}
}
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.
