第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. 自定义Interpolator

    nterpolator这个东西很难进行翻译,直译过来的话是补间器的意思,它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果.那么什么叫做非线性运动的动画效果呢?就是说动画改变的速 ...

  2. ffdshow 源代码分析 3： 位图覆盖滤镜（设置部分Settings）

    ===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...

  3. SharePoint 调用WebService操作List小记

    简述:在SharePoint的使用中,经常需要进行系统集成这样的操作,我们作为SharePoint开发,就需要给其他系统提供接口,而SharePoint提供的WebService就很好的提供了这样的功 ...

  4. 2018国赛 - Writeup（待补充）

    10.0.0.55 Writeup Web 0x01 easyweb 解题思路 题目很脑洞 用户名admin 密码123456进去可得到flag(密码现在换了) 解题脚本 无 Reverse 0x02 ...

  5. IE中调试JS的一款很好的工具

    附件是 IE中调试JS的一款很好用的工具,欢迎下载使用.  具体使用方法为:  1.先安装Companion.JS文件(install.exe).  2.安装Microsoft Script Debu ...

  6. 解决XMind运行卡顿

    问题 XMind是一款很好用的脑图工具,它是基于eclipse开发的,而且基础功能是免费的.最近我安装了XMind 8 Pro,但是发现在Mac上运行有卡顿. 解决方式 解决这个问题的思路也很简单,软 ...

  7. 以太坊智能合约虚拟机(EVM)原理与实现

    以太坊 EVM原理与实现 以太坊底层通过EVM模块支持合约的执行与调用,调用时根据合约地址获取到代码,生成环境后载入到EVM中运行.通常智能合约的开发流程是用solidlity编写逻辑代码,再通过编译 ...

  8. py-oauth2包使用简记

    接前两天线上项目py2升级py3的书,老廖的一个旧库snspy,他已经不维护了,用的api又比较久,不好升级,最后速度找了个OAuth库取代了它,由于时间紧张,直接在pypi上搜索了一下,找到这个支持 ...

  9. 苹果公司揭秘首批列入 Swift 源代码兼容性开源项目清单

    源代码兼容性是 Swift 未来的目标.为了实现这一目标,(苹果公司的 swift 编译器团队)建立了一个源兼容性测试套件,用于根据 Swift 源代码(逐渐增加)语料库对编译器进行回归测试更改. 添 ...

  10. Opencv3.1+python2.7的CentOS7安装

    http://blog.csdn.NET/daunxx/article/details/50506625 转载注释:有些包名和系统包名并不匹配,yum install 找不到的时候,可以yum sea ...