renderer.domElement
{
while(true) {
const time = Date.now() * 0.001;
mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.render(scene, camera);
yield null;
}
}
height = 600
mesh = new THREE.Mesh( geometry, material)
geometry = {
const vertices = [
// front
{ pos: [-10, -10, 10], norm: [ 0, 0, 1], uv: [0, 0], },
{ pos: [ 10, -10, 10], norm: [ 0, 0, 1], uv: [1, 0], },
{ pos: [-10, 10, 10], norm: [ 0, 0, 1], uv: [0, 1], },
{ pos: [-10, 10, 10], norm: [ 0, 0, 1], uv: [0, 1], },
{ pos: [ 10, -10, 10], norm: [ 0, 0, 1], uv: [1, 0], },
{ pos: [ 10, 10, 10], norm: [ 0, 0, 1], uv: [1, 1], },
// right
{ pos: [ 10, -10, 10], norm: [ 1, 0, 0], uv: [0, 0], },
{ pos: [ 10, -10, -10], norm: [ 1, 0, 0], uv: [1, 0], },
{ pos: [ 10, 10, 10], norm: [ 1, 0, 0], uv: [0, 1], },
{ pos: [ 10, 10, 10], norm: [ 1, 0, 0], uv: [0, 1], },
{ pos: [ 10, -10, -10], norm: [ 1, 0, 0], uv: [1, 0], },
{ pos: [ 10, 10, -10], norm: [ 1, 0, 0], uv: [1, 1], },
// back
{ pos: [ 10, -10, -10], norm: [ 0, 0, -1], uv: [0, 0], },
{ pos: [-10, -10, -10], norm: [ 0, 0, -1], uv: [1, 0], },
{ pos: [ 10, 10, -10], norm: [ 0, 0, -1], uv: [0, 1], },
{ pos: [ 10, 10, -10], norm: [ 0, 0, -1], uv: [0, 1], },
{ pos: [-10, -10, -10], norm: [ 0, 0, -1], uv: [1, 0], },
{ pos: [-10, 10, -10], norm: [ 0, 0, -1], uv: [1, 1], },
// left
{ pos: [-10, -10, -10], norm: [-1, 0, 0], uv: [0, 0], },
{ pos: [-10, -10, 10], norm: [-1, 0, 0], uv: [1, 0], },
{ pos: [-10, 10, -10], norm: [-1, 0, 0], uv: [0, 1], },
{ pos: [-10, 10, -10], norm: [-1, 0, 0], uv: [0, 1], },
{ pos: [-10, -10, 10], norm: [-1, 0, 0], uv: [1, 0], },
{ pos: [-10, 10, 10], norm: [-1, 0, 0], uv: [1, 1], },
// top
{ pos: [ 10, 10, -10], norm: [ 0, 1, 0], uv: [0, 0], },
{ pos: [-10, 10, -10], norm: [ 0, 1, 0], uv: [1, 0], },
{ pos: [ 10, 10, 10], norm: [ 0, 1, 0], uv: [0, 1], },
{ pos: [ 10, 10, 10], norm: [ 0, 1, 0], uv: [0, 1], },
{ pos: [-10, 10, -10], norm: [ 0, 1, 0], uv: [1, 0], },
{ pos: [-10, 10, 10], norm: [ 0, 1, 0], uv: [1, 1], },
// bottom
{ pos: [ 10, -10, 10], norm: [ 0, -1, 0], uv: [0, 0], },
{ pos: [-10, -10, 10], norm: [ 0, -1, 0], uv: [1, 0], },
{ pos: [ 10, -10, -10], norm: [ 0, -1, 0], uv: [0, 1], },
{ pos: [ 10, -10, -10], norm: [ 0, -1, 0], uv: [0, 1], },
{ pos: [-10, -10, 10], norm: [ 0, -1, 0], uv: [1, 0], },
{ pos: [-10, -10, -10], norm: [ 0, -1, 0], uv: [1, 1], },
];
const positions = [];
const normals = [];
const uvs = [];
for (const vertex of vertices) {
positions.push(...vertex.pos);
normals.push(...vertex.norm);
uvs.push(...vertex.uv);
}
const geometry = new THREE.BufferGeometry();
const positionNumComponents = 3;
const normalNumComponents = 3;
const uvNumComponents = 2;
geometry.setAttribute(
'position',
new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
geometry.setAttribute(
'normal',
new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
geometry.setAttribute(
'uv',
new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
return geometry;
}
material = {
const color = 0x00ff00;
const loader = new THREE.TextureLoader();
const texture = loader.load(star);
const material = new THREE.MeshPhongMaterial({color, map: texture});
return material;
}
star = FileAttachment("star.png").url()
light = {
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-10, 20, 40);
return light;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050505);
scene.add(light);
scene.add(mesh);
return scene;
}
camera = {
const fov = 27;
const aspect = width / height;
const near = 1;
const far = 3500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 80;
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(() => (renderer.dispose()));
return renderer;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
return 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.
