renderer.domElement
function addMeshes() {
for(var i=0;i<bhomMesh.length;i++)
{
const testMaterial = new THREE.MeshNormalMaterial();
const testGeometry = new THREE.BoxGeometry(1, 1 + i, 1);
const testCube = new THREE.Mesh(testGeometry, testMaterial);
scene.add(testCube);
let mesh = new THREE.Mesh();
const material = new THREE.MeshBasicMaterial( {
side: THREE.DoubleSide,
vertexColors: true
} );
mesh.material = material;
mesh.geometry = toThreeMesh(bhomMesh[i]);
mesh.geometry.computeVertexNormals();
mesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( -Math.PI/2 ) );
mesh.castShadow = true;
mesh.receiveShadow=true;
scene.add(mesh);
const edges = new THREE.EdgesGeometry( mesh.geometry );
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );
}
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
//scene.add(cube);
return scene;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
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.
