{
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 100);
camera.position.set(0, 0, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(width, height);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 10;
const planeGeom = new THREE.PlaneBufferGeometry(Math.PI * 5, Math.PI * 2.5, 36, 18);
planeGeom.morphAttributes.position = [];
// console.log(planeGeom)
const sphereFormation = [];
const uvs = planeGeom.attributes.uv;
const uv = new THREE.Vector2();
const t = new THREE.Vector3();
for (let i = 0; i < uvs.count; i++) {
uv.fromBufferAttribute(uvs, i);
// console.log(uv.clone())
t.setFromSphericalCoords(
2.5,
Math.PI * (1 - uv.y),
Math.PI * (uv.x - 0.5) * 2
)
sphereFormation.push(t.x, t.y, t.z);
}
planeGeom.morphAttributes.position[0] = new THREE.Float32BufferAttribute(sphereFormation, 3);
const planeMat = new THREE.MeshBasicMaterial({
map: mapTexture,
morphTargets: true,
side: THREE.DoubleSide
});
const spherePlane = new THREE.Mesh(planeGeom, planeMat);
scene.add(spherePlane);
spherePlane.morphTargetInfluences[0] = 0;
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
spherePlane.morphTargetInfluences[0] = Math.sin(clock.getElapsedTime()) * 0.5 + 0.5;
renderer.render(scene, camera)
});
return renderer.domElement;
}
height = 500
distance = 50
camera = {
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 10000);
camera.position.z = distance;
return camera;
};
// THREE = {
// const THREE = await require("three@0.82.1/build/three.min.js");
// if (!THREE.OrbitControls) { // If not previously loaded.
// const module = window.module = {exports: undefined};
// THREE.OrbitControls = await require("three-orbit-controls@82.1.0/index.js").catch(() => module.exports(THREE));
// }
// return THREE;
// }
THREE = {
const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');
await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});
// await require('three@0.105.1/examples/js/loaders/GLTFLoader.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.
