Public
Edited
Oct 17, 2022
1 fork
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 geometry = new THREE.BufferGeometry();
const indices = [];
const vertices = [];
const normals = [];
const colors = [];
const size = 20;
const segments = 10;
const halfSize = size / 2;
const segmentSize = size / segments;
// generate vertices, normals and color data for a simple grid geometry
for(let i = 0; i <= segments; i++) {
const y = i * segmentSize - halfSize;
for(let j = 0; j <= segments; j++) {
const x = j * segmentSize - halfSize;
vertices.push(x, -y, 0);
normals.push(0, 0, 1);
const r = x / size + 0.5;
const g = y / size + 0.5;
colors.push(r, g, 1);
}
}
// generate indices (data for element array buffer)
for(let i = 0; i < segments; i++) {
for(let j = 0; j < segments; j++) {
const a = i * ( segments + 1 ) + ( j + 1 );
const b = i * ( segments + 1 ) + j;
const c = ( i + 1 ) * ( segments + 1 ) + j;
const d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
// generate two faces (triangles) per iteration
indices.push( a, b, d );
indices.push( b, c, d );
}
}
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals , 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
return geometry;
}
material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
vertexColors: true
})
light = new THREE.HemisphereLight();
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 = 64;
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.
