plane = {
let x = 100, y = 100;
const planeGeometry = new THREE.PlaneGeometry( 2, 2, x, y );
const planeMaterial = new THREE.MeshPhongMaterial( {color: 'white', shininess: 2024, side: THREE.DoubleSide, wireframe:false} );
for(let i=0; i<=x; i++){
for(let j=0; j<=y; j++){
const n = i*(x+1)+j;
const xx = (2*i-x)/x;
const yy = (2*j-y)/y;
const r = Math.random()*0.05;
//planeGeometry.vertices[n].z = (Math.cos(xx*7) + Math.cos(yy*7))*0.3
planeGeometry.vertices[n].z = (xx*xx - yy*yy) + r;
}
}
planeGeometry.computeFaceNormals();
planeGeometry.computeVertexNormals();
return new THREE.Mesh(planeGeometry, planeMaterial);
}
light1 = {
const light = new THREE.PointLight( 'orchid', 1 );
light.position.set(0, -10, 10);
return light;
}
light2 = {
const light = new THREE.PointLight( 'cadetblue', 1 );
light.position.set(10, 10, -2);
return light;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(10, 0, 10)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
height = 600
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 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.
