THREE.OrbitControls
{
const renderer = new THREE.WebGLRenderer({
antialias: true
});
// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 1.5;
controls.maxDistance = 8;
// light
// const light = new THREE.PointLight(0xffffff, 1.4);
// light.position.set(1, 5, 10);
const light = new THREE.AmbientLight(0x404040, 4); // soft white light
scene.add(light);
// update the renderer
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
// Object
const texture = await loadTexture(
await FileAttachment("ct5km_ssta_v3.1_20150702_1.png").url()
);
texture.anisotropy = 16;
// texture.needsUpdate = true;
const material = new THREE.MeshStandardMaterial({
// color: "white"
map: texture
});
// displacement
// const displacementMap = await loadTexture(
// await FileAttachment("ct5km_ssta_v3.1_20150702_.png").url()
// );
// material.displacementMap = displacementMap;
// material.displacementScale = 0.7;
const geometry = new THREE.SphereGeometry(1, 64, 32);
const sphere = new THREE.Mesh(geometry, material);
// scene.rotation.x = 0.22;
// scene.rotation.y = 0.1;
// scene.add(temperatureMesh);
scene.add(sphere);
renderer.render(scene, camera);
// Event listener
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
// let clock = new THREE.Clock();
// const tl1 = gsap.timeline();
// return renderer.domElement;
let ind = 0;
// const allFiles = [data2, data3, data4, data5, data6];
// const allFiles = [
// file1,
// file2,
// file3,
// file4,
// file5,
// file6,
// file7,
// file8,
// file9,
// file10
// ];
// // Rotation
function animate() {
// console.log("hi");
scene.rotation.y += 0.0004;
requestAnimationFrame(animate);
renderer.render(scene, camera);
// labelRenderer.render(scene, camera);
}
animate();
// return renderer.domElement;
// while (true) {
// animateFiles(allFiles[ind % allFiles.length]);
// renderer.render(scene, camera);
// await Promises.delay(100, (ind += 1));
// let html_render = html`
// <div style="position: relative; overflow: hidden;">
// ${renderer.domElement}
// <div style="position: absolute; pointer-events: none; top: 0; left: 0; color: white;">
// </div>
// </div>`;
// yield html_render;
// }
// for testing
return renderer.domElement;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color("black");
// scene.add(temperatureMesh);
return scene;
}
function animateFiles(colorsIn) {
const count = colorsIn.length;
const colors = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
const i3 = i * 3;
// Update colors. Currently not the same point as original
temperatureMesh.geometry.attributes.color.array[i3 + 0] = colorsIn[i3 + 0]; //Math.random();
temperatureMesh.geometry.attributes.color.array[i3 + 1] = colorsIn[i3 + 1];
temperatureMesh.geometry.attributes.color.array[i3 + 2] = colorsIn[i3 + 2];
}
temperatureMesh.geometry.attributes.color.needsUpdate = true; // important!
// requestAnimationFrame(animate);
}
function normalizedAnomalyCalc(data) {
// console.log(data);
const out = d3.map(data, (d) => {
if (d.sst === "NA") {
// console.log(d);
d.sst = 0;
}
let anom =
(d.sst - -minMaxValueToUse) / (minMaxValueToUse - -minMaxValueToUse);
return anom > 1 ? 1 : anom < 0 ? 0 : anom;
});
return out;
}
camera = {
const fov = 60;
const aspect = width / height;
const near = 0.1;
const far = 10;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-1.5, 1.5, 3);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
textureLoader = new THREE.TextureLoader()
loadTexture = {
const loader = new THREE.TextureLoader();
return (url) => new Promise((resolve) => loader.load(url, resolve));
}
scaleAnomaly = d3
.scaleDiverging((t) => d3.interpolateRdBu(1 - t))
.domain([0, 0.5, 1])
minMaxValueToUse = 4
coldColor = new THREE.Color("#053061")
hotColor = new THREE.Color("#67001f")
mixedColor = coldColor.clone()
mixedColor.lerp(hotColor, 0)
// d3.mean(normalizedAnomaly)
firstPositions.length / 3
temperatureMesh = {
// the geometry that will contain all our cubes
const particlesGeometry = new THREE.BufferGeometry();
const count = firstPositions.length / 3;
const colorsIn = file1;
const positions = new Float32Array(count * 3); // Multiply by 3 because each position is composed of 3 values (x, y, z)
const colors = new Float32Array(count * 3);
// for (let i = 0; i < count; i++) {
// const i3 = i * 3;
// // Convert from lat long to position on earth
// let positionOnGlobe = latLongToVector3(
// sstaRaw[i].y,
// sstaRaw[i].x,
// 1,
// 0.001
// );
// positions[i3 + 0] = positionOnGlobe.x;
// positions[i3 + 1] = positionOnGlobe.y;
// positions[i3 + 2] = positionOnGlobe.z;
// // Color based on anomaly
// // const coldColor = new THREE.Color("#053061");
// // const hotColor = new THREE.Color("#ff3d03");
// // const mixedColor = coldColor.clone();
// // mixedColor.lerp(hotColor, normalizedAnomaly[i]);
// // const d3Colors = d3.color(scaleAnomaly(normalizedAnomaly[i]));
// colors[i3 + 0] = colorsIn[i3 + 0];
// colors[i3 + 1] = colorsIn[i3 + 1];
// colors[i3 + 2] = colorsIn[i3 + 2];
// // mutable debug = positionOnGlobe;
// }
particlesGeometry.setAttribute(
"position",
new THREE.BufferAttribute(firstPositions, 3)
);
// console.log(firstPositions, positions);
particlesGeometry.setAttribute("color", new THREE.BufferAttribute(file1, 3));
// Material
const particlesMaterial = new THREE.PointsMaterial();
particlesMaterial.size = 0.008;
// particlesMaterial.blending = THREE.AdditiveBlending;
// particlesMaterial.depthWrite = false;
particlesMaterial.vertexColors = true;
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
return particles;
// scene.add(particles);
}
// sstaRawToPlot = sstaRaw.slice(0, 200000)
// latLongToVector3(sstaRaw[0].x, sstaRaw[0].y, 1, sstaRaw[0].sst)
// convert the positions from a lat, lon to a position on a sphere.
function latLongToVector3(lat, lon, radius, heigth) {
var phi = (lat * Math.PI) / 180;
var theta = ((lon - 180) * Math.PI) / 180;
var x = -(radius + heigth) * Math.cos(phi) * Math.cos(theta);
var y = (radius + heigth) * Math.sin(phi);
var z = (radius + heigth) * Math.cos(phi) * Math.sin(theta);
return new THREE.Vector3(x, y, z);
}
height = width
// darkEarth = await FileAttachment("world.jpeg").image()
import {
file1,
// file2,
// file3,
// file4,
// file5,
// file6,
// file7,
// file8,
// file9,
// file10,
firstPositions
} from "2e45491fcbc572a9";
// THREE = {
// const THREE = window.THREE = await require("three@0.108.0/build/three.min.js");
// await require("three@0.108.0/examples/js/controls/OrbitControls.js").catch(() => {});
// return THREE;
// }
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.