<div class="scene">
  <div class="canvas-parent">
  </div>
  <div class="scroller">
    <!-- additional markup for elements overlayed on the scene can go here -->
  </div>
</div>

    .scene {
      position: relative;
    }

    .canvas-parent {
      width: 100vw;
      height: 100vh;
      touch-action: none;
      position: sticky;
      top: 0;
      z-index: -1;
    }

    .scroller {
      top: 0vh;
      width: 100vw;
      height: 800vh;
      z-index: 2;
    }

import { Scene, PerspectiveCamera, WebGLRenderer, MeshBasicMaterial } from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { CameraRig, ScrollControls, ThreeDOFControls } from 'three-story-controls'

const canvasParent = document.querySelector('.canvas-parent')
// The scrollElement will be passed to the controls
const scrollElement = document.querySelector('.scroller')

const scene = new Scene()
const camera = new PerspectiveCamera(75, canvasParent.clientWidth/canvasParent.clientHeight, 0.001, 1000)
const renderer = new WebGLRenderer()
renderer.setSize(canvasParent.clientWidth, canvasParent.clientHeight)
canvasParent.appendChild(renderer.domElement)

// Render loop
function render(t) {
  window.requestAnimationFrame(render)
  renderer.render(scene, camera)
}

// Update the camera aspect ratio and renderer size when the window is resized
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight)
})

render()

const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('https://unpkg.com/three/examples/js/libs/draco/')
loader.setDRACOLoader(dracoLoader)

loader.load(
  MODEL_GLB_PATH, 
  function(model) {
    model.scene.traverse( child => {
    if(child.isMesh) {
      const map = child.material.map
      child.material = new MeshBasicMaterial({map})
    }
    scene.add(model.scene)
  }
)

const rig = new CameraRig(camera, scene)
let scrollControls, threeDOFControls

loader.load(
  CAMERA_GLB_PATH,
  function (camera) {
    rig.setAnimationClip(camera.animations[0], 'translation_null', 'rotation_null')
    rig.setAnimationTime(0)
    scrollControls = new ScrollControls(rig, {scrollElement})
    threeDOFControls = new ThreeDOFControls(rig)
    scrollControls.enable()
    threeDOFControls.enable()
  }
)

// Render loop
function render(t) {
  window.requestAnimationFrame(render)
  // Update the controls
  if(rig.hasAnimation) {
    scrollControls.update(t)
    threeDOFControls.update(t)
  }
  renderer.render(scene, camera)
}

// Loading 3D Tiles in a three.js scene
import { Scene, PerspectiveCamera, WebGLRenderer, Clock } from 'three'
import { Loader3DTiles } from 'three-loader-3dtiles'

const renderer = new WebGLRenderer()
const camera = new PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const scene = new Scene()
const clock = new Clock()

let tilesRuntime

Loader3DTiles.load(
  {
    url: TILESET_URL,
    renderer: renderer,
    options: {
      dracoDecoderPath: 'https://unpkg.com/three@0.129.0/examples/js/libs/draco',
      basisTranscoderPath: 'https://unpkg.com/three@0.129.0/examples/js/libs/basis',
    }
  }
).then(result => {
  const { model, runtime } = result
  tilesRuntime = runtime
  scene.add(model)
})


function render(t) {
  const dt = clock.getDelta()
  if (tilesRuntime) {
    tilesRuntime.update(dt, renderer, camera)
  }
  renderer.render(scene, camera)
  window.requestAnimationFrame(render)
}