clone

by manthrax

HTML

<script type="importmap">
{
    "imports": {
        "three": "https://threejs.org/build/three.module.js",
        "three/addons/": "https://threejs.org/examples/jsm/"
    }
}</script>

JavaScript

import * as THREE from "three"
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
import * as SkeletonUtils from "three/addons/utils/SkeletonUtils.js"
//===================================================== scene
const randnum = (min, max) => Math.round(Math.random() * (max - min) + min)

//===================================================== canvas
var renderer = new THREE.WebGLRenderer({ alpha: true, antialiase: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.gammaOutput = true //for colors to match blender material
document.body.appendChild(renderer.domElement)

//===================================================== scene
var scene = new THREE.Scene()

//===================================================== camera
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
)
camera.position.z = 5
camera.position.y = 1.5

//===================================================== lights
var light = new THREE.DirectionalLight(0xefefff, 3)
light.position.set(1, 1, 1).normalize()
scene.add(light)
var light = new THREE.DirectionalLight(0xffefef, 3)
light.position.set(-1, -1, -1).normalize()
scene.add(light)

//===================================================== resize
window.addEventListener("resize", function () {
  let width = window.innerWidth
  let height = window.innerHeight
  renderer.setSize(width, height)
  camera.aspect = width / height
  camera.updateProjectionMatrix()
})

//===================================================== model
var loader = new GLTFLoader()
var mixer
var model
loader.load(
  "https://raw.githubusercontent.com/Data-Bee38/models/main/bird-fly.glb",
  function (gltf) {
    gltf.scene.traverse(function (node) {
      if (node instanceof THREE.Mesh) {
        node.castShadow = true
        node.material.side = THREE.DoubleSide
      }
    })

    model = gltf.scene
    model.scale.set(1, 1, 1)

    mixer = new THREE.AnimationMixer()

    for (let i = 0; i...