//shirley's notebook function
function setup(invalidation) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 1, 200);
const renderer = new THREE.WebGLRenderer({ antialias: true });
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// set renderer size
renderer.setSize(width, height);
// set camera position
camera.position.set(0, 0, 20);
camera.lookAt(0, 0, 0);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => renderer.dispose());
return { scene, camera, renderer };
}
// width = width
imageRatio = 1076 / 942
//light = new THREE.AmbientLight('#fff')
light = {
const light = new THREE.Group();
const ambient = new THREE.AmbientLight("#fff");
const directionY = d3.range(20).map((each) => {
const light = new THREE.DirectionalLight("#fff");
light.position.x = 10;
light.position.y = each * 10;
return light;
});
const directionZ = d3.range(20).map((each) => {
const light = new THREE.DirectionalLight("#fff");
light.position.y = 10;
light.position.z = each * 10;
return light;
});
light.add(ambient, ...directionY, ...directionZ);
return light;
}
textureLoader = new THREE.TextureLoader()
golfNormal = textureLoader.load(golfImage)
golfImage = await FileAttachment("image.png").url()
backgroundImage = await FileAttachment("Screen Shot 2022-05-09 at 10.39.55 AM.png").url()
THREE = {
const THREE = (window.THREE = await require("three"));
await require("three@0.123.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
await require("three@0.123.0/examples/jsm/loaders/RGBELoader.js").catch(
() => {}
);
return THREE;
}
//await require("three@0.96/examples/js/postprocessing/EffectComposer.js").catch(() => {});
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.
