Loading Animating Simple 3D Scene Fun example in fact it brings back memories of the movie Big Trouble in Little China Example uses a GLTF model single file html head meta charset utf 8 meta name viewport content width device width initial scale 1 0 user scalable yes title Little Tokyo title style html body margin 0 height 100 c width 100 height 100 display block style head body canvas id c canvas script src https unpkg com three 0 108 0 build three js script script src https unpkg com three 0 108 0 examples js controls OrbitControls js script script src https unpkg com three 0 108 0 examples js loaders GLTFLoader js script Load GLTF script use strict global THREE function main const canvas document querySelector c const renderer new THREE WebGLRenderer canvas const fov 45 const aspect 2 the canvas default const near 0 1 const far 100 const camera new THREE PerspectiveCamera fov aspect near far camera position set 0 10 20 const controls new THREE OrbitControls camera canvas controls target set 0 5 0 controls update const scene new THREE Scene scene background new THREE Color lightblue const skyColor 0xB1E1FF light blue const groundColor 0xB97A20 brownish orange const intensity 1 const light new THREE HemisphereLight skyColor groundColor intensity scene add light const color 0xFFFFFF const intensity 1 5 const light new THREE DirectionalLight color intensity light position set 5 10 2 scene add light scene add light target function frameArea sizeToFitOnScreen boxSize boxCenter camera const halfSizeToFitOnScreen sizeToFitOnScreen 1 const halfFovY THREE Math degToRad camera fov 5 const distance halfSizeToFitOnScreen Math tan halfFovY compute a unit vector that points in the direction the camera is now in the xz plane from the center of the box const direction new THREE Vector3 subVectors camera position boxCenter multiply new THREE Vector3 1 0 1 normalize move the camera to a position distance units way from the center in whatever direction the camera was from the center already camera position copy direction multiplyScalar distance add boxCenter pick some near and far values for the frustum that will contain the box camera near boxSize 100 camera far boxSize 100 camera updateProjectionMatrix point the camera to look at the center of the box camera lookAt boxCenter x boxCenter y boxCenter z const mixerInfos const gltfLoader new THREE GLTFLoader gltfLoader resourcePath https notebook xbdev net var resources tokyo gltfLoader load https notebook xbdev net var resources tokyo scene gltf gltf const root gltf scene scene add root compute the box that contains all the stuff from root and below const box new THREE Box3 setFromObject root const boxSize box getSize new THREE Vector3 length const boxCenter box getCenter new THREE Vector3 set the camera to frame the box frameArea boxSize 0 5 boxSize boxCenter camera update the Trackball controls to handle the new size controls maxDistance boxSize 10 controls target copy boxCenter controls update const mixer new THREE AnimationMixer root const actions Object values gltf animations map clip return mixer clipAction clip const mixerInfo mixer actions actionNdx 1 mixerInfos push mixerInfo playNextAction mixerInfo function playNextAction mixerInfo const actions actionNdx mixerInfo const nextActionNdx actionNdx 1 actions length mixerInfo actionNdx nextActionNdx actions forEach action ndx const enabled ndx nextActionNdx action enabled enabled if enabled action play function resizeRendererToDisplaySize renderer const canvas renderer domElement const width canvas clientWidth const height canvas clientHeight const needResize canvas width width canvas height height if needResize renderer setSize width height false return needResize let then 0 function render now now 0 001 convert to sections const deltaTime now then then now if resizeRendererToDisplaySize renderer const canvas renderer domElement camera aspect canvas clientWidth canvas clientHeight camera updateProjectionMatrix for const mixer of mixerInfos mixer update deltaTime renderer render scene camera requestAnimationFrame render requestAnimationFrame render main document body style height 700px console log ready script body html
ze 100 camera far boxSize 100 camera updateProjectionMatrix point the camera to look at the center of the box camera lookAt boxCenter x boxCenter y boxCenter z const mixerInfos const gltfLoader new THREE GLTFLoader gltfLoader resourcePath https notebook xbdev net var resources tokyo gltfLoader load https notebook xbdev net var resources tokyo scene gltf gltf const root gltf scene scene add root compute the box that contains all the stuff from root and below const box new THREE Box3 setFromObject root const boxSize box getSize new THREE Vector3 length const boxCenter box getCenter new THREE Vector3 set the camera to frame the box frameArea boxSize 0 5 boxSize boxCenter camera update the Trackball controls to handle the new size controls maxDistance boxSize 10 controls target copy boxCenter controls update const mixer new THREE AnimationMixer root const actions Object values gltf animations map clip return mixer clipAction clip const mixerInfo mixer actions actionNdx 1 mixerInfos push mixerInfo playNextAction mixerInfo function playNextAction mixerInfo const actions actionNdx mixerInfo const nextActionNdx actionNdx 1 actions length mixerInfo actionNdx nextActionNdx actions forEach action ndx const enabled ndx nextActionNdx action enabled enabled if enabled action play function resizeRendererToDisplaySize renderer const canvas renderer domElement const width canvas clientWidth const height canvas clientHeight const needResize canvas width width canvas height height if needResize renderer setSize width height false return needResize let then 0 function render now now 0 001 convert to sections const deltaTime now then then now if resizeRendererToDisplaySize renderer const canvas renderer domElement camera aspect canvas clientWidth canvas clientHeight camera updateProjectionMatrix for const mixer of mixerInfos mixer update deltaTime renderer render scene camera requestAnimationFrame render requestAnimationFrame render main document body style height 700px console log ready script body html