Data Viz / Photography / Generative Art
Published
Edited
May 18, 2019
1 fork
9 stars
THREE = require("three") // Load three.js library
scene = {
const scene = new THREE.Scene(); // Create scene
scene.background = new THREE.Color('#ffffff'); // Modify scene background color
return scene;
}
cube = {
const material = new THREE.MeshNormalMaterial(); // Create Normal Material
const geometry = new THREE.BoxGeometry(1,1,1); // Create box of size 1
return new THREE.Mesh(geometry, material); // Create mesh from geometry and material
}
scene.add(cube) // Add the cube to the scene
camera = {
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // Create camera
camera.position.z = 3; // Place the camera at (0,0,3)
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true}); // Create renderer
renderer.setSize(width, 500); // Set the size of the renderer
while (true) { // Code that runs every frame
cube.rotation.x += rotation; // Rotate cube by 0.01 in x every frame
cube.rotation.y += rotation; // Rotate cube by 0.01 in y every frame
renderer.render(scene, camera); // Add the scene and camera to the renderer
yield renderer.domElement;
}
}
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.
