<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Tween</title>

    <!--请去网上下载-->

    <script type="text/javascript" src="js/three.js"></script>

    <script type="text/javascript" src="js/Tween.js"></script>

    <style type="text/css">

    div#canvas-frame {

    border: none;

    cursor: pointer;

    width: 100%;

    height: 600px;

    background-color: #EEEEEE;

    }


    </style>

</head>

<body onload="threeStart()">

    <div id="canvas-frame"></div>

<script>

    //1.渲染器

    var renderer;

    function initThree() {

        width = document.getElementById('canvas-frame').clientWidth;

        height = document.getElementById('canvas-frame').clientHeight;

        //渲染器

        renderer = new THREE.WebGLRenderer({

            antialias : true

        });

        renderer.setSize(width, height);

        document.getElementById('canvas-frame').appendChild(renderer.domElement);

        renderer.setClearColorHex(0xFFFFFF, 1.0);

    }


    //2.相机

    var camera;

    function initCamera() {

        //90为90度视角

        camera = new THREE.PerspectiveCamera(90, width / height, 1, 10000);

        camera.position.x = 0;

        camera.position.y = 0;

        camera.position.z = 800;

        camera.up.x = 0;

        camera.up.y = 1;

        camera.up.z = 0;

        //相机的视野中心

        camera.lookAt({

            x : 0,

            y : 0,

            z : 0

        });

    }


    //3.场景

    var scene;

    function initScene() {

        scene = new THREE.Scene();

    }


    //4.灯光

    var light;

    function initLight() {

        //方向光

        light = new THREE.DirectionalLight(0xFF0000, 0.5);

        light.position.set(100, 100, 200);

        scene.add(light);


        //点光源

        light = new THREE.PointLight(0xFF0000);

        light.position.set(10,0,300); //放的位置

        scene.add(light);


        //环境光

        light = new THREE.AmbientLight(0x00FF00);

        light.position.set(100, 100, 200);

        scene.add(light);

    }


    //5.物体

    var cube;

    var mesh;

    function initObject() {

        //几何体

        var geometry = new THREE.CylinderGeometry(100,150,400);

        //var geometry = new THREE.Bezier(1,1);

        //使用材质  兰伯特材质

        var material = new THREE.MeshLambertMaterial({color:0xFF0000});

        //Mesh 几何体 材质

        mesh = new THREE.Mesh(geometry,material);

        mesh.position = new THREE.Vector3(0,0,0); //点位置

        scene.add(mesh);


    }


    //6.开始

    function threeStart() {

        initThree();

        initCamera();

        initScene();

        initLight();

        initObject();

        initTween();

        animation();

    }


    /*****Tween.js******/

    //1.渲染声明

    function initTween(){

        new TWEEN.Tween(camera.position).to({x:300,y:400},3000).repeat(Infinity).start();

    }


    //2.函数重复执行

    function animation(){

        renderer.render(scene,camera);

        requestAnimationFrame(animation);


        TWEEN.update();

    }

</script>

</body>

</html>