JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/ColladaLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
var clock, camera, scene, renderer, mixer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 15, 10, - 15 );
scene = new THREE.Scene();
camera.lookAt( 0, 2, 0 );
clock = new THREE.Clock();
// collada
var loader = new THREE.ColladaLoader();
loader.load( 'https://threejs.org/examples/models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
var animations = collada.animations;
var root = collada.scene;
var skinnedMesh = root.getObjectByName( 'Stormtrooper' );
var clip = animations[ 0 ];
mixer = new THREE.AnimationMixer( root );
var action = mixer.clipAction( clip ).play();
scene.add( root );
// show ordinary AABB
var aabb = new THREE.Box3().setFromObject( skinnedMesh );
scene.add( new THREE.Box3Helper( aabb, 0xff0000 ) );
// calculates a bounding box of the skinned mesh in world space
// based on animations associated with that model. Since the code
// samples the animation data in a specific resolution, the result
// is just an approximation and not 100% accurate
aabb = calculateAABB( root, skinnedMesh, clip, 25 );
scene.add( new THREE.Box3Helper( aabb, 0x00ff00 ) );
} );
//
var gridHelper = new THREE.GridHelper( 10, 20 );
scene.add( gridHelper );
//
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
scene.add( camera );
camera.add( pointLight );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 2.5, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize, false );
}
function...