第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. PS 图像调整算法——黑白

    这个算法是参考自 阿发伯 的博客: http://blog.csdn.net/maozefa 黑白调整 Photoshop CS的图像黑白调整功能,是通过对红.黄.绿.青.蓝和洋红等6种颜色的比例调节 ...

  2. LeetCode（40）-Merge Sorted Array

    听到初爱有感 开头啰嗦两句,刚在做算法题目的时候,听到了杨宗纬的<初爱>,突然有了一种本科时候的感觉,想想自己现在研二了,青春喂了狗,我果断喝了一罐啤酒,循环这首歌到吐-.. 题目: Gi ...

  3. erb自动生成html页面一例

    原来的html蛮长的,源代码如下: <html> <head> <style type="text/css"> ul.none {list-st ...

  4. ubuntu下无法编译ruby-2.1.5提示something wrong with CFLAGS -arch x86_64

    在Mac OS X10.10下以下语句运行没有问题: ./configure -prefix=/Users/apple/src/ruby_src/ruby2.1.5_installed --with- ...

  5. eclipse工程当中的.classpath 和.project文件什么作用？

    .project是项目文件,项目的结构都在其中定义,比如lib的位置,src的位置,classes的位置.classpath的位置定义了你这个项目在编译时所使用的$CLASSPATH .classpa ...

  6. 《你必须掌握的Entity Framework 6.x与Core 2.0》书籍出版

    前言 到目前为止写过刚好两百来篇博客,看过我博客的读者应该大概知道我每一篇博客都沿袭着一贯的套路,从前言到话题最终到总结,本文依然是一如既往的套路,但是不是介绍技术,也可说是介绍技术,不过是介绍书中的 ...

  7. 公司内网搭建代理DNS使用内网域名代替ip地址

    企业场景 一般在企业内部,开发.测试以及预生产都会有一套供开发以及测试人员使用的网络环境.运维人员会为每套环境的相关项目配置单独的Tomcat,然后开放一个端口,以 IP+Port 的形式访问.然而随 ...

  8. Top Open Source Projects to Watch in 2017

    https://opensource.com/article/16/12/yearbook-projects-watch-2017 No one has a crystal ball to see t ...

  9. linux常用命令合集(未完)

    (1)新建 新建文件夹:mkdir 文件夹名 新建文件:touch 文件路径/文件名 删除: rm –f filename删除文件 rm –rf filename删除文件夹 (2)重命名 1将一个名为 ...

  10. vue 使用踩坑 note

    1. 如图,假如large那一行错写成 'large': item.ext_data.isLarge + '' === 'true',, 那么,编译不报错,控制台无提示,模板不输出. 2. vue的t ...