HTML5 Three.js DAE模型加载和动画：机器人跳舞 - 踏得网

DAE模型：机器人舞蹈，使用ES6语法，引入three.module.js

three, robot, dance

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3886
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div id="container"></div>
<div id="info">
    <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> collada loader - skinning<br/>
    Dancing Stormtrooper by <a href="https://sketchfab.com/strykerdoesgames" target="_blank" rel="noopener">StrykerDoesAnimation</a>, <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
</div>

<script type="module">
	import * as THREE from '//techbrood.com/threejs/build/three.module.js';
	import Stats from '//techbrood.com/threejs/examples/jsm/libs/stats.module.js';
	import { ColladaLoader } from '//techbrood.com/threejs/examples/jsm/loaders/ColladaLoader.js';
	import { OrbitControls } from '//techbrood.com/threejs/examples/jsm/controls/OrbitControls.js';
	var container, stats, clock, controls;
	var camera, scene, renderer, mixer;
	init();
	animate();
	function init() {
		container = document.getElementById( 'container' );
		camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 );
		camera.position.set( 15, 10, - 15 );
		scene = new THREE.Scene();
		clock = new THREE.Clock();
		// collada
		var loader = new ColladaLoader();
		loader.load( '//techbrood.com/threejs/examples/models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
			var animations = collada.animations;
			var avatar = collada.scene;
			avatar.traverse( function ( node ) {
				if ( node.isSkinnedMesh ) {
					node.frustumCulled = false;
				}
			} );
			mixer = new THREE.AnimationMixer( avatar );
			mixer.clipAction( animations[ 0 ] ).play();
			scene.add( avatar );
		} );
		//
		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 );
		container.appendChild( renderer.domElement );
		//
		controls = new OrbitControls( camera, renderer.domElement );
		controls.screenSpacePanning = true;
		controls.minDistance = 5;
		controls.maxDistance = 40;
		controls.target.set( 0, 2, 0 );
		controls.update();
		//
		stats = new Stats();
		container.appendChild( stats.dom );
		//
		window.addEventListener( 'resize', onWindowResize, false );
	}
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	function animate() {
		requestAnimationFrame( animate );
		render();
		stats.update();
	}
	function render() {
		var delta = clock.getDelta();
		if ( mixer !== undefined ) {
			mixer.update( delta );
		}
		renderer.render( scene, camera );
	}
</script>