Three.js AnimationAction Properties

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r156/examples/" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.esm.min.js"
		}
	}
</script>

CSS

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GUI } from 'lil-gui'

let scene, camera, renderer
let mesh, orbitControls, clock, mixer
let params

init().then(animate)

async function init() {

	params = {
		speed: 1
	}
	
	
	scene = new THREE.Scene()
	scene.background = new THREE.Color('black')

	camera = new THREE.PerspectiveCamera(75, undefined, 0.1, 1000)
	camera.position.set(1, 2, 3)
	
	clock = new THREE.Clock()

	const directionalLight = new THREE.DirectionalLight('white', Math.PI)
	directionalLight.position.set(2, 3, 4)
	scene.add(directionalLight)

	const ambientLight = new THREE.AmbientLight('white', 0.3 * Math.PI)
	scene.add(ambientLight)

	renderer = new THREE.WebGLRenderer({ antialias: true })
	document.body.appendChild(renderer.domElement)

	orbitControls = new OrbitControls(camera, renderer.domElement)

	const grid = new THREE.GridHelper()
	grid.position.y = -1
	scene.add(grid)

	const geometry = new THREE.BoxGeometry()
	const material = new THREE.MeshStandardMaterial({ color: 'palegreen' })
	mesh = new THREE.Mesh(geometry, material)
	scene.add(mesh)
	
	// Animation
	
  
	const clipOneWay = new THREE.AnimationClip("clip", -1, [
		new THREE.VectorKeyframeTrack(
			".position",
			[0, 1],
			[0, 0, 0, 0, 1, 0]
		)
	])
	const clipRoundTrip = new THREE.AnimationClip("clip", -1, [
		new THREE.VectorKeyframeTrack(
			".position",
			[0, 1, 2],
			[0, 0, 0, 0, 1, 0, 0, 0, 0]
		)
	])
  
  const clip = clipOneWay
	
	mixer = new THREE.AnimationMixer(mesh)
	
	const action = mixer.clipAction(clip).play()
  action.loop = THREE.LoopOnce
  action.clampWhenFinished = true
	

	const gui = new GUI()
	gui.add(params, 'speed').step(0.1).min(0).max(2)
	gui.add(action, 'paused')
	gui.add(action, 'enabled')
	gui.add(action, 'weight').min(0).max(1)
	gui.add(action, 'timeScale').min(-2).max(2)
  
  gui.add(action, 'play')
  gui.add(action, 'stop')
  gui.add(action, 'reset')
  
  const fadeIn =...