运行一把：

代码解释：

<!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组件来改变就很方便了

three.js - 动画 图形统计帧频 dat.GUI的更多相关文章

  1. Threejs 官网 - Three.js 的图形用户界面工具（GUI Tools with Three.js）

    Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) ...

  2. dat.gui stats.js 通用参数配置及图像统计工具

    在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...

  3. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  4. three.js 添加 图形控制界面 gui

    需要导入这个js: import { GUI } from '/three.js/jsm/libs/dat.gui.module.js'; 局部代码: var params = { color: 0x ...

  5. dat.gui.js

    ].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...

  6. dat.GUI 打造可视化工具(一)

    前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...

  7. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  8. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  9. SVG.js 基础图形绘制整理（二）

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

随机推荐

  1. JQuery的事件委托；jQuery注册事件；jQuery事件解绑

    一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...

  2. blfs（systemd版本）学习笔记-编译安装sudo并创建普通用户配置sudo权限

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs书中sudo的安装配置章节:http://www.linuxfromscratch.org/blfs/view/stab ...

  3. 10个最佳 Javascript+HTML5 演示文稿框架

    JavaScript 与 HTML5 框架在创建基于现代浏览器的演示文稿时发挥了重要作用.他们把展示插入网页,为演示信息提供了一个有效方式.一般来说,手工插入花费大量事件和精力,它很复杂,以至于新手们 ...

  4. 【代码笔记】Web-HTML-脚本

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. js 键盘码

    键盘各按键对应的数字 keycode 9 = Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift keycode 17 = Con ...

  6. Python数据清洗基本流程

    # -*- coding: utf-8 -*-"""Created on Wed Jul 4 18:40:55 2018 @author: zhen"" ...

  7. 12LaTeX学习系列之---LaTex的图片插入

    目录 目录 前言 (一)插图的基本语法 (二)插入的基本设置 1.说明: 2.源代码: 3.输出效果 (三)查看文档 目录 本系列是有关LaTeX的学习系列,共计19篇,本章节是第12篇. 前一篇:1 ...

  8. 12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮动也是一个大坑,有很多细节.这12个知识 ...

  9. 阿里八八β阶段Scrum（2/5）

    今日进度 黄梅玲:尝试修复日程界面的不可点击问题 李嘉群:修改数据库,增加写入识别功能临时文本存入的项 张岳:信息抽取算法的编写 叶文滔:尝试侧边栏的信息调用,但因为侧边栏不是单独的活动,调用碰到了困 ...

  10. 【TJOJI\HEOI2016】求和

    [TJOI/HEOI2016]求和 这题好难啊!! 斯特林数+NTT. 首先我们将第二类斯特林数用容斥展开,具体原理不解释了. \(\displaystyle S(i,j)=\frac{1}{j!}\ ...