renderer.domElement
// Continuously updates
{
while (true) {
importedObj.rotation.y += 0.01;
renderer.render(scene, camera);
yield null;
}
}
importedObj = {
const url = await FileAttachment("model@1.obj").url()
return loadObject(url)
}
{
const material = new THREE.MeshStandardMaterial({
color: 0x777777,
flatShading: true
});
importedObj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
child.castShadow = true;
child.receiveShadow = true;
}
});
importedObj.position.set = (0, 0, 0);
const s = 2;
importedObj.scale.set(s, s, s);
scene.add(importedObj);
}
loadObject = (url) => new Promise ((resolve,reject) => {
const loader = new THREE.OBJLoader();
// instantiate a loader
loader.load(
// resource URL
url,
// called when resource is loaded
function ( object ) {
resolve(object);
},
// called when loading is in progresses
function ( xhr ) {
return ( xhr.loaded / xhr.total * 100 ) + '% loaded' ;
},
// called when loading has errors
function ( error ) {
reject ("Error in loading")
}
);
})
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
return scene;
}
{
scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
addShadowedLight(1, 1, 1, 0xffffff, 1.35);
addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 100;
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;
}
height = 600
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(() => {});
await require("three@0.130.0/examples/js/loaders/OBJLoader.js").catch(() => {});
return THREE;
}
function addShadowedLight(x, y, z, color, intensity) {
var directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z);
scene.add(directionalLight);
directionalLight.castShadow = true;
var d = 1;
directionalLight.shadow.camera.left = -d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = -d;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.bias = -0.001;
}
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.
