图片.png
演示地址：
程序中有三个立方体。点击某个立方体开始运行。再次点击任意立方体则运行的立方体停止。 再次点击任意立方体则该立方体重新开始运行。但是没有记忆位置功能 看看以后能不能加入 。
TweenJS Javascript库提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并允许您链接补间动画和行动结合起来,创造出复杂的序列。
一、选择物体
- 添加了两个监听事件，鼠标和触摸。click 和 touchstart 。当点击发生时获取点击的位置坐标mouse(x,y)。
- getCube方法会返回点击的立方体。只有点击立方体的时候才返回，而且只返回点击的第一个立方体。否则什么也不返回。所以在下一步操作中还需要判断一次。
- moveCube方法执行相应的操作。获取getCube的返回值。if(cubetem.distance != null)，有返回值才执行操作。定义了一个状态码 tws 默认问false，当点击一次，则取反为真。为真时运行tween动画，为假时停止tween动画，设置了两个动画，都需要设置stop。
二、tween动画
- 让x的值在-40~40之间变化。定义了tween和tweenback两个动画，通过chain链接起来。他们执行的是同一个更新函数 tweenupdate。这里使用了tan函数，也可以使用tween.easing来设置不同的过度效果。http://sole.github.io/tween.js/examples/03_graphs.html 一般使用中这些细微的变化一般察觉不到呢。
- initTween(cube)需要传递了一个参数object，改变的是该传入的object的属性值。
三、添加记忆功能
-
如果动画从停止的地方继续开始运行。则需要动态改变动画的起始值和运行时间。但是当在返回的时候停止，再继续运行的话则是从头开始运行。还没法继续当前的返回动画。修改的部分代码。
initTween(cube,cubex,cubetime) ；
var position = { x: cubex, y: 0 };
tween = new TWEEN.Tween(position);
tween.to({ x: 40 }, cubetime);
initTween(cubetem.object,cubetem.object.position.x,Math.round(100*(40-cubetem.object.position.x)));
有效果但是不是很理想。还需要继续改善。
tween.gif
参考资料：
1、GitHub指导手册https://github.com/sole/tween.js/blob/master/docs/user_guide.md
2、github文档里面参考案例：https://github.com/sole/tween.js/tree/master/examples
3、CreateJS中文网：http://www.createjs.cc/tweenjs
代码：
function init() {
var scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45,width/height,0.1,1000);
camera.position.set(0,30,40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.setClearColor(0x999999);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(95, 20, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
var cubes = [];
cubes[0] = new cubeDr(0,2,0);
cubes[1] = new cubeDr(0,2,4);
cubes[2] = new cubeDr(0,2,-4);
function cubeDr(x,y,z) {
var cubeGeometry = new THREE.BoxGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color:0xff00ff
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.set(x,y,z);
scene.add(cube);
return cube;
}
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, 10);
scene.add(spotLight);
document.getElementById("webgl-output").appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera);
window.addEventListener( 'click', onDocumentMouseDown, false );
window.addEventListener('touchstart', onTouchDown, false); //不能写onTouchStart
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var tws = false;
var tween;
var tweenback;
function getIntersects(event) {
if(event.touches){
var touch = event.touches[0];
mouse.x = (touch.clientX / width)*2 - 1;
mouse.y = -(touch.clientY / height)*2 + 1;
}else{
mouse.x = (event.clientX / width)*2 - 1;
mouse.y = -(event.clientY / height)*2 + 1;
}
}
function onTouchDown(event) {
getIntersects(event);
moveCube();
// alert("你点了我一次");
}
function onDocumentMouseDown(event) {
getIntersects(event);
moveCube();
}
function getCube() {
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( cubes );
if(intersects.length>0){
return intersects[ 0 ];
}
}
function moveCube() {
tws = !tws;
var cubetem = new getCube();
if(cubetem.distance != null){
if(tws){
initTween(cubetem.object);
}else{
tween.stop();
tweenback.stop();
}
}
}
function initTween(cube) {
var position = { x: -40, y: 0 };
tween = new TWEEN.Tween(position);
tween.to({ x: 40 }, 8000);
tween.easing(TWEEN.Easing.Sinusoidal.InOut);
tweenback = new TWEEN.Tween(position);
tweenback.to({ x: -40 }, 8000);
tween.chain(tweenback);
tweenback.chain(tween);
tween.onUpdate(tweenupdate);
tweenback.onUpdate(tweenupdate);
function tweenupdate() {
cube.position.x = 40*Math.tan((this.x/160)*Math.PI);
}
tween.start();
}
render();
function render() {
controls.update();
TWEEN.update();
renderer.render(scene,camera);
requestAnimationFrame(render);
}
}
window.onload = init;
