javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>[name]</h1>

		<h2>Overview(概述)</h2>

		<p class="desc">
			在three.js动画系统中，您可以为模型的各种属性设置动画：
			[page：SkinnedMesh 蒙皮和装配模型]的骨头，[page：Geometry.morphTargets 变形目标]，不同的材料属性（颜色，
			不透明度，布尔运算），可见性和变换。 动画属性可以淡入，淡出，交叉淡化和扭曲。 不同时间的重量和时间尺度
			可以更改同一对象以及不同对象上的动画独立。 可以在相同和不同对象上进行各种动画同步。
			<br /><br />
			在一个同构系统中实现所有这一切，即three.js动画系统
			[link：https：//github.com/mrdoob/three.js/issues/6881在2015年彻底改变]
			（注意过时的信息！），它现在有一个与Unity /虚幻引擎4类似的架构.此页面简要概述了主要组件系统以及它们如何协同工作。
		</p>

		<h3>Animation Clips(动画片段)</h3>

		<p class="desc">
			如果您已成功导入动画3D对象（如果有，则无关紧要）
			骨骼或变形目标或两者） - 例如使用[link：https：//github.com/KhronosGroup/glTF-Blender-Exporter glTF Blender导出器]从Blender导出它
			使用[page：GLTFLoader]将其加载到three.js场景中 - 其中一个响应字段应该是一个名为“animations”的数组，其中包含此模型的[page：AnimationClip AnimationClips]（请参阅下面的可能加载器列表）。
			<br /><br />
			每个* AnimationClip *通常保存对象的某个活动的数据。 如果
			mesh是一个字符，例如，可以有一个用于walkcycle的动画片段，第二个
			跳跃，三分之一的回避等等。		
		</p>

		<h3>Keyframe Tracks(关键帧轨道)</h3>

		<p class="desc">
			在这样的* AnimationClip *里面，每个动画属性的数据都存储在一个
			单独[page：KeyframeTrack]。 假设一个角色对象有一个[page：Skeleton skeleton]，
			一个关键帧轨道可以存储下臂骨骼位置变化的数据
			随着时间的推移，不同的轨道数据为同一骨骼的旋转变化，三分之一
			轨道位置，旋转或缩放另一个骨骼，等等。 应该很清楚，
			AnimationClip可以由许多这样的轨道组成。
			.<br /><br />
			假设模型具有[page：Geometry.morphTargets 变形目标]（例如一个变形
			目标显示一个友好的面孔，另一个显示愤怒的脸），每个轨道持有
			关于某个变形的[page：Mesh.morphTargetInfluences 影响]的信息
			目标在剪辑执行期间发生变化。
		</p>

		<h3>Animation Mixer(动画混音器)</h3>

		<p class="desc">
			存储的数据仅构成动画的基础 - 实际播放由控制
			[page：AnimationMixer]。 你可以想象这不仅仅是动画的播放器，而是
			作为硬件的模拟，如真正的调音台控制台，可以控制几个动画
			同时，混合和合并它们。
		</p>

		<h3>Animation Actions</h3>

		<p class="desc">
			* AnimationMixer *本身只有很少（通用）属性和方法，因为它
			可以通过[page：AnimationAction AnimationActions]来控制。 通过配置
			* AnimationAction *您可以确定何时播放某个* AnimationClip *，暂停
			或者停在其中一个混音器上，是否以及频率必须重复，无论是否
			应使用淡入淡出或时间缩放以及一些其他内容（例如交叉渐变）来执行
			或同步。
		</p>

		<h3>Animation Object Groups(动画对象组)</h3>

		<p class="desc">
				如果您希望一组对象接收共享动画状态，则可以使用[page:AnimationObjectGroup].

		</p>

		<h3>Supported Formats and Loaders(支持的格式和加载器)</h3>

		<p class="desc">
			请注意，并非所有模型格式都包含动画（尤其是OBJ，没有），而且只有一些
			three.js加载器支持[page：AnimationClip AnimationClip]序列。 以下几个<i>确实</ i>
			支持此动画类型：		
		</p>

			<ul>
				<li>[page:JSONLoader THREE.JSONLoader]</li>
				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
				<li>THREE.BVHLoader</li>
				<li>THREE.ColladaLoader</li>
				<li>THREE.FBXLoader</li>
				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
				<li>THREE.MMDLoader</li>
				<li>THREE.SEA3DLoader</li>
			</ul>

		<p class="desc">
			请注意，3ds max和Maya当前无法导出多个动画（这意味着动画不是
			在同一时间线上）直接到一个文件。
		</p>

		<h2>Example</h2>

		<code>
		var mesh;

		// Create an AnimationMixer, and get the list of AnimationClip instances
		var mixer = new THREE.AnimationMixer( mesh );
		var clips = mesh.animations;

		// Update the mixer on each frame
		function update () {
			mixer.update( deltaSeconds );
		}

		// Play a specific animation
		var clip = THREE.AnimationClip.findByName( clips, 'dance' );
		var action = mixer.clipAction( clip );
		action.play();

		// Play all animations
		clips.forEach( function ( clip ) {
			mixer.clipAction( clip ).play();
		} );
		</code>

	</body>
</html>