three.js - 动画 图形统计帧频 dat.GUI

运行一把：

 

代码解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style type="text/css">
        body {    /*移除所有的滚动条*/
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>
    <div id="Stats-output"></div>

    <script type="text/javascript" src="./libs/three.js"></script>
    <script type="text/javascript" src="./libs/stats.js"></script>
    <script type="text/javascript" src="./libs/dat.gui.js"></script>
    <script>
        
        function init() {

            var stats = initStats();    // 统计对象

            var scene = new THREE.Scene();    // 场景容器, 用来保存并跟踪所有我们想渲染的物体

            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);    // 相机变量, 我们能够在渲染好的场景scence里看到什么

            var renderer = new THREE.WebGLRenderer();    // 渲染器对象, 负责计算指定相机角度下浏览器中scene的样子
            renderer.setClearColorHex(0xEEEEEE, 1.0);    // 将renderer对象的背景色设置为0xEEEEEE
            renderer.setSize(window.innerWidth, window.innerHeight);    // 让renderer对象将scene渲染成多大尺寸
            renderer.shadowMapEnabled = true;    // 告诉渲染器需要阴影

            var axes = new THREE.AxisHelper(20);    // axes坐标轴对象
            scene.add(axes);    // 把坐标轴添加到场景中去

            var planceGeometry = new THREE.PlaneGeometry(60, 20);    // PlaneGeometry: 翻译 平面几何    (参数: 宽60, 高20)
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });    // MeshLambertMaterial: 翻译 网格材质    (用来设置平面的外观, 颜色，透明度等)
            var plane = new THREE.Mesh(planceGeometry, planeMaterial);    // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中
            plane.receiveShadow = true;    // 平面接收阴影
            plane.rotation.x = -0.5*Math.PI;    // 绕x轴旋转90度
            plane.position.x = 15;    // 平面坐标位置
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane);    // 将平面添加到场景

            var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);    // Geometry: 翻译 立方体几何
            var cubeMaterial = new THREE.MeshLambertMaterial({ color: '#12B7F5'});    // 立方体是0xff0000颜色 
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);    // 把立方体和他的外观合并一下
            cube.castShadow = true;    // 立方体的阴影
            cube.position.x = -3;    // 立方体的坐标位置
            cube.position.y = 3;
            cube.position.z = 0;
            scene.add(cube);    // 将立方体添加进去场景中去

            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);    // 球体
            var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff});    // 球体的外观
            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);    // 把球体和外观合并一下
            sphere.castShadow = true;    // 球的阴影
            sphere.position.x = 20;    // 球体的位置
            sphere.position.y = 4;
            sphere.position.z = 2;
            scene.add(sphere);    // 把球体添加进场景去

            camera.position.x = -30;    
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);    // lookAt函数指向场景的中心

            // 添加一个光源
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 60, -10);
            spotLight.castShadow = true;    // 让光源产生阴影
            scene.add(spotLight);

            // 使用dat.GUI
            var controls = new function() {
                this.rotationSpeed = 0.02;
                this.bouncingSpeed = 0.03;
            };
            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);
            gui.add(controls, 'bouncingSpeed', 0, 0.5);

            // 动画函数
            var step = 0;
            function renderScene() {
                stats.update();

                // 方块旋转走你
                cube.rotation.x += controls.rotationSpeed;
                cube.rotation.y += controls.rotationSpeed;
                cube.rotation.x += controls.rotationSpeed;

                // 球体弹跳走你改变的是position属性
                
                step += controls.bouncingSpeed;
                sphere.position.x = 20 + (10 * (Math.cos(step)));
                sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);    // 使用渲染器渲染
            };

            // 初始化统计对象
            function initStats() {
                var stats = new Stats();
                stats.setMode(0);    // 0 表示FPS, 1 表示渲染时间
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.querySelector('#Stats-output').appendChild(stats.domElement);
                return stats;
            };

            document.querySelector('#WebGL-output').appendChild(renderer.domElement);    // 把canvas添加到指定的dom中
            renderScene();

        };

        window.onload = init;
        
    </script>
</body>
</html>

1. 使用了stats.js来初始化统计看initStats()方法, 在渲染的时候更新一下就好了
2. 使用dat.gui.js组件来控制变量，这个很不错
3. 至于动画，就很简单了，无非就是改了position和rotation的值，通过dat.gui.js组件来改变就很方便了

 

posted @ 2017-04-07 11:51  Sorrow.X  阅读(1759)  评论(0)  编辑  收藏  举报