three 关键帧动画拖动播放 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  
  <script src="/js/threejs/threer92.js"></script>
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
</head>

<body>
	
<div>
	<input type="range" id="rg" value="10" min="0" max="20" style="width:100%" step="0.01" onchange="changeV()" />
</div>
	
  <script>
	//创建场景
    var scene = new THREE.Scene();

// 立方体网格模型
	var geometry1 = new THREE.BoxGeometry(100, 10, 10);
	var material1 = new THREE.MeshLambertMaterial({
		color: 0x0000ff
	}); //材质对象Material
	var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
	scene.add(mesh1); //网格模型添加到场景中
	  
	// 球体网格模型
	var geometry2 = new THREE.SphereGeometry(15, 40, 40);
	var material2 = new THREE.MeshLambertMaterial({
  		color: 0xff00ff
	});
	var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
	scene.add(mesh2);

/**
 * 创建两个网格模型并设置一个父对象group
 */
mesh1.name = "Box"; //网格模型1命名
mesh2.name = "Sphere"; //网格模型2命名
var group = new THREE.Group();
group.add(mesh1); //网格模型添加到组中
group.add(mesh2); //网格模型添加到组中
	  
/**
 * 编辑group子对象网格模型mesh1和mesh2的帧动画数据
 */
// 创建名为Box对象的关键帧数据
var times = [0, 10]; //关键帧时间数组，离散的时间点序列
var values = [0, 0, 0, 150, 0, 0]; //与时间点对应的值组成的数组
// 创建位置关键帧对象：0时刻对应位置0, 0, 0   10时刻对应位置150, 0, 0
var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
// 创建颜色关键帧对象：10时刻对应颜色1, 0, 0   20时刻对应颜色0, 0, 1
var colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
// 创建名为Sphere对象的关键帧数据  从0~20时间段，尺寸scale缩放3倍
var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);

// duration决定了默认的播放时间，一般取所有帧动画的最大时间
// duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放
var duration = 20;
// 多个帧动画作为元素创建一个剪辑clip对象，命名"default"，持续时间20
var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
	  
scene.add(group);
	  
/**
 * 播放编辑好的关键帧数据
 */
// group作为混合器的参数，可以播放group中所有子对象的帧动画
var mixer = new THREE.AnimationMixer(group);
// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
var AnimationAction = mixer.clipAction(clip);
//通过操作Action设置播放方式
AnimationAction.timeScale = 20;//默认1，可以调节播放速度
AnimationAction.loop = THREE.LoopOnce;
AnimationAction.clampWhenFinished = true;
//AnimationAction.play();//开始播放

/**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
	  
	//添加坐标系
	var axisHelper = new THREE.AxisHelper(350);
	scene.add(axisHelper);

/**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

//clock.getDelta()方法获得两帧的时间间隔
  // 更新混合器相关的时间
  mixer.update(clock.getDelta());
}
render();

var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

function changeV() {
	var boxL = parseInt(document.getElementById('rg').value);
	AnimationAction.time = boxL; //操作对象设置开始播放时间
	clip.duration = boxL;//剪辑对象设置播放结束时间
	AnimationAction.play(); //开始播放
}

</script>

</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="/js/threejs/threer92.js"></script>
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
</head>
​
<body>
    
<div>
    <input type="range" id="rg" value="10" min="0" max="20" style="width:100%" step="0.01" onchange="changeV()" />
</div>
    
  <script>
    //创建场景
    var scene = new THREE.Scene();
​
      
    // 立方体网格模型
    var geometry1 = new THREE.BoxGeometry(100, 10, 10);
    var material1 = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    }); //材质对象Material
    var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
    scene.add(mesh1); //网格模型添加到场景中
      
    // 球体网格模型
    var geometry2 = new THREE.SphereGeometry(15, 40, 40);
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xff00ff
    });
    var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    scene.add(mesh2);
​
      
​
/**
 * 创建两个网格模型并设置一个父对象group
 */