mainLight = {
const light = new THREE.DirectionalLight(0xffffff, 3.0);
light.position.set(10, 10, 10);
return light;
}
data = [
[3, 2, 1],
[6, 5, 4],
[5, 7, 6]
]
mutable i = 1
loader = new THREE.TextureLoader()
function update() {
/*********** PUT ANIMATION LOGIC HERE **********/
//cubeGroup.rotation.x += 0.001;
cubeGroup.rotation.y += 0.001;
//cubeGroup.rotation.z += 0.001;
/***********************************************/
}
function render(scene) {
renderer.render(scene, camera);
}
renderer = {
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
return renderer;
}
cubeGroup = {
const group = new THREE.Group();
data.forEach((row,i,iarr)=>{
row.forEach((d,j,jarr)=>{
cubeMeshes[i][j].position.set(
i/iarr.length-0.5,
d/max*0.5-0.6,
j/jarr.length-0.5);
//cubeMeshes[i][j].scale.set(1,4,1);
group.add(cubeMeshes[i][j]);
})
})
return group;
}
cubeMeshes = {
const cubeMeshes = cubeGeometries.map(row=>{
return row.map(cubeGeometry => new THREE.Mesh( cubeGeometry, cubeMaterial ))
})
return cubeMeshes;
}
cubeMaterial ={
const cube = new THREE.MeshStandardMaterial({
map:loader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
});
cube.color.convertSRGBToLinear();
return cube;
}
cubeGeometries = data.map(row=>{
return row.map(c=>{
return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
})
})
ambientLight = {
const light = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);
return light;
}
height = 500
fov = 18
aspect = width / height
near = 0.1
far = 1000
camera = {
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 1, 4);
return camera;
}
max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d)))
THREE = {
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(() => {});
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.
