Published
Edited
Jun 25, 2019
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
{
let camera,
renderer,
scene,
controls,
mixers=[],
clock = new THREE.Clock(),
mesh;

init();
function loadModels(){
const onProgress = ()=>{}
const onError = ()=>{}
const loader = new THREE.GLTFLoader();
const onLoad = (gltf,position) => {
const model = gltf.scene.children[0];
model.position.copy(position);
const animation = gltf.animations[0];
const mixer = new THREE.AnimationMixer(model);
mixers.push(mixer);
const action = mixer.clipAction(animation);
action.play()
scene.add(model)
}
const parrotPos = new THREE.Vector3(0,0,2.5);
loader.load('https://discoverthreejs.com/static/models/gltf/Parrot.glb',
gltf => onLoad(gltf,parrotPos),onProgress,onError)
const flamingoPos = new THREE.Vector3(2.5,0,5);
loader.load('https://discoverthreejs.com/static/models/gltf/Flamingo.glb',
gltf => onLoad(gltf,flamingoPos),onProgress,onError)
const storkPos = new THREE.Vector3(0,-2.5,0);
loader.load('https://discoverthreejs.com/static/models/gltf/Stork.glb',
gltf => onLoad(gltf,storkPos),onProgress,onError)
}
function createCamera() {
// Create a Camera
const fov = 45; // AKA Field of View
const aspect = width / 400;
const near = 0.1; // the near clipping plane
const far = 1000; // the far clipping plane

camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-1.5, 1.5, 13.5);

}

function createLights() {
// Create a directional light
const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 9);
const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
scene.add(ambientLight);

// move the light back and up a bit
mainLight.position.set(10, 10, 10);

// remember to add the light to the scene
scene.add(ambientLight, mainLight);
}




function createRenderer() {
// create the renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});

renderer.setSize(width, 400);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
}

function init() {
// create a Scene
scene = new THREE.Scene();

// Set the background color
scene.background = new THREE.Color('skyblue');

createCamera();
createLights();
createRenderer();
loadModels()

controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
}

renderer.setAnimationLoop(() => {
update();
render();
})

function render() {
renderer.render(scene, camera);
}

function update() {
const delta = clock.getDelta();
mixers.forEach(mixer => mixer.update(delta*viewof speed.value))
}

function onWindowResize() {
camera.aspect = width / 400;;
camera.updateProjectionMatrix();
renderer.setSize(width, 400)
}

window.addEventListener('resize', onWindowResize)

yield renderer.domElement;
}
Insert cell
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
THREE.GLTFLoader = GLTFLoader(THREE);
return window.THREE;
}
Insert cell
GLTFLoader = requireScript ('https://gist.githubusercontent.com/bumbeishvili/56e34b4f943392e4fcc474c7d8a3c040/raw/061cca62e27276388de245d5e6bbd36d71506375/gltfloader.js','GLTFLoader')

Insert cell
import {requireScript} from "@bumbeishvili/fetcher"
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell

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.
Learn more