renderer.domElement
viewof image = imageInput({
crossOrigin: "anonymous",
initialUrl: "https://static.observableusercontent.com/files/96b9da916501b6e4ea539ee2ffe07cddc4d63dcfa1665e29e54cf406c201a0aa5910927b1aaa4593d928f139cb3d585f2b7c2a62cfe923eca9190acef036d353?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27eggbot%25282%2529.png"
})
eggbot = FileAttachment("eggbot(2).png").image()
// Continuously updates
{
while (true) {
sphere.rotation.z += 0.0001;
renderer.render(scene, camera);
yield null;
}
}
height = 600
// texture = FileAttachment("texture.png").image()
function createSphere(radius, segments, texture) {
var im = FileAttachment("texture.png"); //.image()
// mat.map = new THREE.TextureLoader().load(image.src);
// const tm = new THREE.TextureLoader().load( "https://t.bapt.xyz/posts/mi%20lan%20xiang%20dan%20cong/pres.jpg" );
return new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture(im.src),
specular: new THREE.Color('white')
})
);
}
sphere = {
const im = FileAttachment("texture.png").image();
const material = new THREE.MeshPhongMaterial({
// map: THREE.ImageUtils.loadTexture(im),
specular: new THREE.Color('white')
});
// const texture = new THREE.TextureLoader().load( await FileAttachment("texture.png").image() );
const url = "https://baptiste.static.observableusercontent.com/files/5a58567213d8ebe934c59da3c42df9abb72e2461257b8c39ee7b1a5be41b57c4bb9535253008b2847ed059d3d726047a5a381ccc34a6ad3aa4525a7fa79e5d19?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27texture.png&Expires=1725753600&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=svfvXh3lpW3CcV350-scA~b147KxU1jryG~4NzaDIGYvgSfJyMVnrrMmdt9zc48q-TgmFLXHfgCvZ23j33jWyR76WE-DnBj9nVUOzCVSv2s6KLFiRYuAh2XetOHLlgwx-nOhbQB0hozwE3E1R93PYVeWSknhMAUxwUmGLdCnJqZMcLVBJUmYDlXLL8osW5aayzMFPvU0vSQQMaHU0KGGMstuQEDIOkg6gQf2YxJeyPfi2V7eQZGkVRIpLPCcLX46ZCFGfts4uilSP-6pFhPpxKh55vYID2i5~1SqX3RpGDCF~PJf-UWig0nIDCeR0BBi87XZoFl565vTo3lZEn0BKA__"
const texture = new THREE.TextureLoader().load( image.src );
material.map = texture;
const geometry = new THREE.SphereGeometry(1, 360, 360);
const sphere = new THREE.Mesh(geometry, material);
return sphere;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001111);
scene.add(new THREE.AmbientLight(0xffffff, 1));
scene.add(sphere);
return scene;
}
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(2, 2, -2)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
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;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
import { imageInput } from "@mbostock/file-input"
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.
