{
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [
-1, 1, 0,
-1, 2, 0,
0, 2, 0,
0, 0, 0,
-1, 0, 0,
-1, 1, 0,
0, 0, 0,
1, 1, 0,
1, 0, 0,
1, 1, 0,
0, 2, 0,
1, 2, 0,
]);
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const vertexShader = `
uniform vec3 mousePos;
uniform float maxDistance;
void main() {
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);
}
`
const uniforms = {
mousePos: {
type: "vec3",
value: [0, 2, 0]
},
maxDistance: {
value: 1,
},
};
var material = new THREE.ShaderMaterial( {
color: 0xff0000,
side: THREE.DoubleSide,
vertexShader: vertexShader, // We are now using our vertex shader
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} );
var sphere = new THREE.Mesh( sphereGeo, sphereMaterial );
sphere.position.set(0, 2, 0)
renderer.scene.add( sphere );
var box = new THREE.BoxHelper( mesh, 0x000099 );
renderer.scene.add(box)
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.
