第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. cocoa编程第4版 8.5 挑战1 解答

    看似简单,其实也很简单,但开始思路想错了:还上网查了一下,有网友说是将Array Controller的Keys中的personName改为personName.length,好像完全不起作用. 后来 ...

  2. 超高速前端开发工具——Emmet

    [由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...

  3. linux上搭建ftp服务器

    摘要 vsftpd 是"very secure FTP daemon"的缩写,安全性是它的一个最大的特点.vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行 ...

  4. javascript随机一个1-9的数字

    window.onload=function(){        var oTxt=document.getElementById('txt');        for(i=1;i<=200;i ...

  5. Angular使用总结 --- 模版驱动表单

    表单的重要性就不多说了,Angular支持表单的双向数据绑定,校验,状态管理等,总结下. 获取用户输入 <div class="container-fluid login-page&q ...

  6. What’s new in Channels 2 摘译

    最近准备在一个老Django项目上启用Channels,Channels于今年2月2日发布2.0版本,这个版本包含很多不向前兼容的特性,为了新特性调研的需要,也为了方便社区,我新版本的What's N ...

  7. mysql8绿色免安装win64版本（自带heidisql.exe客户端)应该兼容老版第三方工具。

    https://pan.baidu.com/s/1cvQ4AJX6rmqSpMhBQTPz4Q 如果缺c库,自己去找下. 使用方法:先执行initdb.bat初始化数据 如果要安装为服务:执行inst ...

  8. Heap

    #include using namespace std; int heap[100010],cnt=0; void put(int x) { cnt++; heap[cnt]=x; int now= ...

  9. threesum

    算法题 问题描述:在一些给定的数中,找到三个数,他们相加的和是0,并且这三个数的组合是不能重复的 例子: input [-1, 0, -1, 2, 1] Output [[-1, 1 ,0], [-1 ...

  10. 部署SSIS包完成远程数据更新

    ** 温馨提示:如需转载本文,请注明内容出处.** 本文连接:http://www.cnblogs.com/grom/p/9018978.html 笔者需要定期从服务器更新N家客户的远程服务器数据,上 ...