Published
Edited
May 12, 2019
2 forks
15 stars
data = [
{id:"BRA",color:'red',value:2},
{id:"MOZ",color:'green',value:0.8},
{id:"DEU",color:'yellow',value:1.2},
{id:"GEO",color:'green',value:0.8},
{id:"CHN",color:'red',value:2}
]
{ restartScenesCube;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 65, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 'green' } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 2;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
yield renderer.domElement
}
{
restartScenesLineDefault;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0,0,0))
var geometry = new THREE.Geometry( 1, 1, 1 );
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
//geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
var material = new THREE.LineBasicMaterial( { color: 'blue' } );
var line = new THREE.Line( geometry, material );
scene.add( line );
camera.position.z = 52;
var animate = function () {
requestAnimationFrame( animate );
//line.rotation.x += 0.01;
line.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
yield renderer.domElement
}
}
{
restartScenesLineChallengeDataviz;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0,0,0))
var material = new THREE.LineBasicMaterial( { color: 'pink' } );
var lines = [];
var total = 500;
var geometry = new THREE.Geometry( 1, 1, 1 );
data.forEach((point,i)=>{
geometry.vertices.push(new THREE.Vector3( i*10-20, point.value * 10-10, 0) );
})
var line = new THREE.Line( geometry, material );
lines.push(line);
scene.add( line );
camera.position.z = 52;
var animate = function () {
requestAnimationFrame( animate );
line.rotation.y += 0.001;
renderer.render( scene, camera );
};
animate();
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
yield renderer.domElement
}
}
{ restartScenesText;
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, 1, 0.6, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300, 300 );
camera.position.set(0,0,100);
var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',function (font){
var message = "Hello three!";
var matLite = new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side:THREE.DoubleSide
})
var shapes = font.generateShapes(message,20);
var geometry = new THREE.ShapeBufferGeometry(shapes)
.translate( -70, 0, 0 );
var text = new THREE.Mesh( geometry, matLite );
text.position.z = -150;
scene.add( text );
animate();
});
camera.position.z = 40;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
yield renderer.domElement
}
}
GLTFLoader = requireFromGithub('https://gist.githubusercontent.com/bumbeishvili/56e34b4f943392e4fcc474c7d8a3c040/raw/061cca62e27276388de245d5e6bbd36d71506375/gltfloader.js','GLTFLoader')
import { requireFromGithub } from '@bumbeishvili/fetcher'
THREE = {
GLTFLoader;
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
THREE.GLTFLoader = GLTFLoader(THREE)
return window.THREE;
}
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.
