第6章 动画

在本章之前，所有画面都是静止的，本章将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库，用来观测每秒帧数（FPS）。

CSS3动画那么强，requestAnimationFrame还有毛线用？

window.requestAnimationFrame  MDN

小球下落例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我随便写写的HTML小Demo合集</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/main.css">

</head>

<body onload="init()">

<button>hehe</button>

    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

</body>

    <script src="lib/jquery.js"></script>

    <script src="lib/bootstrap.js"></script>

    <script src="lib/underscore.js"></script>

    <script src="lib/backbone.js"></script>

    <script src="js/main.js"></script>

    <script src="lib/three.js"></script>

    <script src="lib/stat.js"></script>

    <script>

var requestAnimationFrame = window.requestAnimationFrame

        || window.mozRequestAnimationFrame

        || window.webkitRequestAnimationFrame

        || window.msRequestAnimationFrame;

window.requestAnimationFrame = requestAnimationFrame;

var scene = null;

var camera = null;

var renderer = null;

var id = null;

var stat = null;

var ballMesh = null;

var ballRadius = 0.5;

var isMoving = false;

var maxHeight = 5;

var v = 0;

var a = -0.01;

function init() {

    stat = new Stats();

    stat.domElement.style.position = 'absolute';

    stat.domElement.style.right = '0px';

    stat.domElement.style.top = '0px';

    document.body.appendChild(stat.domElement);

    renderer = new THREE.WebGLRenderer({

        canvas: document.getElementById('mainCanvas')});

    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);

    camera.position.set(5, 10, 20);

    camera.lookAt(new THREE.Vector3(0, 3, 0));

    scene.add(camera);

    // ball

    ballMesh = new THREE.Mesh(new THREE.SphereGeometry(ballRadius, 16, 8),

        new THREE.MeshLambertMaterial({

            color: 0xffff00

    }));

    ballMesh.position.y = ballRadius;

    scene.add(ballMesh);

    // plane

    var texture = THREE.ImageUtils.loadTexture('../img/chess.png', {}, function() {

        renderer.render(scene, camera);

    });

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

    texture.repeat.set(4, 4);

    var plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5),

            new THREE.MeshLambertMaterial({map: texture}));

    plane.rotation.x = -Math.PI / 2;

    scene.add(plane);

    var light = new THREE.DirectionalLight(0xffffff);

    light.position.set(10, 10, 15);

    scene.add(light);

    id = requestAnimationFrame(draw);

}

function draw() {

    stat.begin();

    if (isMoving) {

        ballMesh.position.y += v;

        v += a;

 if (ballMesh.position.y <= ballRadius) {

            // hit plane

            v = -v * 0.9;

        }

        if (Math.abs(v) < 0.001) {

            // stop moving

            isMoving = false;

            ballMesh.position.y = ballRadius;

        }

    }

    renderer.render(scene, camera);

    id = requestAnimationFrame(draw);

    stat.end();

}

function stop() {

    if (id !== null) {

        cancelAnimationFrame(id);

        id = null;

    }

}

function drop() {

    isMoving = true;

    ballMesh.position.y = maxHeight;

    v = 0;

}

$("button").click(drop);

    </script>

系列博文-Three.js入门指南(张雯莉)-网格 setInterval方法 requestAnimationFrame方法 使用stat.js记录FPS的更多相关文章

  1. 系列博文-Three.js入门指南(张雯莉)-照相机

    照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自 ...

  2. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  3. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  4. 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据

    我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...

  5. 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模

    我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...

  6. 一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化

    在前面的系列文章中,我们介绍了官方有关获取数据,以及建模的原始文档和基本介绍.今天继续给大家介绍官方文档中,有关可视化的内容.实际上获获取数据和建模更注重业务关系的处理,而可视化则关注对数据的解读.这 ...

  7. 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘

    我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...

  8. 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel

    今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...

  9. 一起学微软Power BI系列-官方文档-入门指南(7)发布与共享-终结篇+完整PDF文档

    接触Power BI的时间也只有几个月,虽然花的时间不多,但通过各种渠道了解收集,谈不上精通,但对一些重要概念和细节还是有所了解.在整理官方文档的过程中,也熟悉和了解了很多概念.所以从前到后把微软官方 ...

随机推荐

  1. redis菜鸟教程

    Redis 简介 http://www.runoob.com/redis/redis-intro.html Redis 安装 http://www.runoob.com/redis/redis-ins ...

  2. hadoop 测试框架

    hadoop 0.21以前的版本中(这里拿0.20为例,其他版本可能有少许不同),所有的测试相关代码都是放置在${HADOOP_HOME}/src/test下,在该目录下,是按照不同的目录来区分针对不 ...

  3. Java数据类型之byte、char

    Java 有8中基本数据类型,分别是byte.int.long.char.float.double.boolean. 1.byte.char的简单介绍 有时候总是搞不清byte.char,所以就现在好 ...

  4. 代理网络中安装tomcat的注意事项

    搭建J2EE开发环境的时候,tomcat怎么都没办法访问主页面.主要的问题就是Network Error (tcp_error) 百度了半天也没搞明白,最后没办法,打算重装tomcat,便对照完整的安 ...

  5. Https背景与证书在spring boot项目中的使用

    https背景(本人学习参考中觉得不错的几篇文章) https如何解决安全问题 HTTPS 理论基础及其在 Android 中的最佳实践 什么是https 关于https的个人总结 总所周知http是 ...

  6. JavaScript脚本放在哪里用户体验好

    javascript代码写在<head>里面: 由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定) javas ...

  7. javaScript(2)---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  8. Java——接口

    被interface修饰的类,叫接口接口里的方法都是抽象的,不能实现.用implements关键字可以让一个类来实现该接口.接口:一个类在继承另一个类的同时.还可以实现多个接口.接口的出现避免了单继承 ...

  9. Mybatis 系列5

    上篇系列4中 为大家介绍了mybatis中别名的使用,以及其源码.本篇将为大家介绍TypeHandler, 并简单分析其源码. Mybatis中的TypeHandler是什么? 无论是 MyBatis ...

  10. Django ValidationError中的单下划线

    用惯pycharm,结果这个下划线无法自动找到.后来看文档发现其是翻译gettext的简化格式,import方式: from django.utils.translation import ugett ...