videoembed = md`<video id="video" width=600 controls preload="none" loop autoplay>
<source src="${await FileAttachment("Comp 1.mp4").url()}" type="video/mp4">
</video>`
{
const renderer = new THREE.WebGLRenderer();
const size = Math.min(width, 600);
renderer.setSize(size, size);
renderer.setPixelRatio(devicePixelRatio);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000).translateZ(2.8);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 1.12;
controls.maxDistance = 10;
const scene = new THREE.Scene();
// const map = await loadTexture(
// `https://solartextures.b-cdn.net/2k_${planet}.jpg`
// );
const video = document.getElementById('video');
const map = new THREE.VideoTexture(video);
scene.add(
new THREE.Mesh(
new THREE.SphereBufferGeometry(1, 32, 32),
new THREE.MeshBasicMaterial({ map })
)
);
renderer.render(scene, camera);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
const animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
return renderer.domElement;
}
loadTexture = {
const loader = new THREE.TextureLoader();
return url => new Promise(resolve => loader.load(url, resolve));
}
videoUrl = FileAttachment("Comp 1.mp4").url()
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.
