30three.js补间动画Tween.js和选择物体

图片.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;