Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
renderer.domElement
// Continuously updates
{
while (true) {
//uniforms.u_time.value += clock.getDelta();
material.uniforms.u_time.value += clock.getDelta();
renderer.render(scene, camera);
yield null;
}
}
material = new THREE.ShaderMaterial({
side:THREE.DoubleSide,
// We need to pass some information down from the vertex to the fragment shader
vertexShader: `
varying vec2 vUv;
void main () {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
}
`,
// The vertex shader is defined as a GLSL source string
fragmentShader: `
// An incoming value from JavaScript
uniform float u_time;
// An incoming value from the vertex shader
varying vec2 vUv;
// Let's define PI constant
#define PI 3.14
void main () {
vec3 color = vec3(0.0);
color.r = abs(sin(vUv.x + u_time));
color.g = abs(cos(vUv.y + u_time));
color.b = abs(sin(vUv.y + u_time));
gl_FragColor = vec4(color, 1.0);
}
`,
// The uniforms allow us to send values down into the shader
uniforms: {
// Here is how we define a float value
u_time: { value: 0 },
u_resolution: { value: new THREE.Vector2() }
}
});
height = 600
geometry = new THREE.PlaneBufferGeometry( 2, 2 );
mesh = new THREE.Mesh( geometry, material );
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(mesh);
return scene;
}
clock = new THREE.Clock();
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 3)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.