{
const renderer = new THREE.WebGLRenderer({antialias: true});
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding; // Not sure what this does, or if I need it
renderer.shadowMap.enabled = true;
const cameraTarget = new THREE.Vector3( 0, - 0.1, 0 );
let timer = 0;
while (true) {
timer = timer + 1 / 100;
camera.position.x = Math.sin( timer ) * 2.5;
camera.position.z = Math.cos( timer ) * 2.5;
camera.lookAt( cameraTarget );
renderer.render(scene, camera);
yield renderer.domElement;
}
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x72645b );
scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
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.z = 3;
return camera;
}
height = 600
{
scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
}
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;
}
{
const plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 40, 40 ),
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = - 0.5;
scene.add( plane );
plane.receiveShadow = true;
}
{
// const base = 'https://raw.githubusercontent.com/josdirksen/learning-threejs/master/assets/models/'
const base = "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/ply/"
const loader = new THREE.PLYLoader();
loader.load( base + "ascii/dolphins.ply", function ( geometry ) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 0.2;
mesh.position.z = 0.3;
mesh.rotation.x = - Math.PI / 2;
mesh.scale.multiplyScalar( 0.001 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
});
loader.load( base + "binary/Lucy100k.ply", function ( geometry ) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 0.2;
mesh.position.y = - 0.02;
mesh.position.z = - 0.2;
mesh.scale.multiplyScalar( 0.0006 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
});
}
// Load Three.js and the orbit controls.
THREE = {
const THREE = (window.THREE = await require("three@0.103.0"));
await require("three@0.103.0/examples/js/loaders/PLYLoader.js").catch(
() => {}
);
return THREE;
}
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.
