第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. 安卓笔记--Edittext禁止换行

    直接在EditText的xml文件中通过配置android:singleLine="true"把虚拟键盘上的enter键禁止掉,不会显示 <edittext android: ...

  2. Spring Kafka和Spring Boot整合实现消息发送与消费简单案例

    本文主要分享下Spring Boot和Spring Kafka如何配置整合,实现发送和接收来自Spring Kafka的消息. 先前我已经分享了Kafka的基本介绍与集群环境搭建方法.关于Kafka的 ...

  3. PHP单元测试使用

    单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元指一个类, ...

  4. Python 可视化TVTK CubeSource管线初使用

    CubeSource对象是长方体数据源对象.本次在安装成功TVTK库的基础上显示一个长方体对象.通过以下代码,我们设置一个长宽高分别为1.0,2.0,3.0的长方体数据源并通过管线显示出来. from ...

  5. IT轮子系列（三）——如何显示方法名——Swagger的使用（三）

    前言 在上一篇文章IT轮子系列(三)——如何给返回类型添加注释——Swagger的使用(二) 介绍如何使用swashbuckle的时候忽略了一个问题,就是默认创建的API项目在生成文档的时候是没有显示 ...

  6. 浅入javascript正则表达式的规则.

    今天在看jQuery源码的时候,到处都是正则的用法,一气之下就狠下心来.重新回顾了一下正则.下面是做的笔记.非常浅的入门. /* i:表示不区分大小写 g:表示可以全局配置 m:表示可以多行配置 */ ...

  7. GNSS相关网站汇总

    转载: https://blog.csdn.net/zzh_my/article/details/78449972 一.bernese 数据表文件下载 ftp://nfs.kasi.re.kr rin ...

  8. JAVA中Sql时间格式与util时间格式转换

    关于时间格式转化: java.util.Date 与 java.sql.Date 互换 sql是子类 字符串转化成java.util.Date     SimpleDateFormat date =n ...

  9. Bootstrap在线引用css和js

    百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ ...

  10. Linux(Redhat)安装Redis

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.(百度百科 0.0) 下载:http://www.redis. ...