three.js之让物体动起来方式（一）移动摄像机
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../static/three.js-master/build/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
} </style> </head> <body onload="threeStart();">
<div id="canvas-frame"></div>
<script>
var renderer; // 渲染器
function initThree() {
renderer = new THREE.WebGLRenderer(); // 创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置长度和宽度
document.getElementById('canvas-frame').appendChild(renderer.domElement); // 添加到canvas-frame
renderer.setClearColor(0xFFFFFF, 1.0); // 设置背景色和透明度
} var camera; // 摄像机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); // 创建摄像机
camera.position.x = 0; // 摄像机坐标
camera.position.y = 0;
camera.position.z = 1000;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
} var scene; // 场景
function initScene() {
scene = new THREE.Scene(); // 创建场景
} var light; // 光
function initLight() {
light = new THREE.AmbientLight(0xFFFFFF); // 创建环境光源，不产生阴影
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00); // 创建点光源，可以产生阴影
light.position.set(0, 0,300);
scene.add(light);
} function initObject() {
var geometry = new THREE.CylinderGeometry( 100,150,400); // THREE.CylinderGeometry构造圆柱体
var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} ); //THREE.MeshLambertMaterial高级材质，构造类似木头、石头等不光滑的表面
var mesh = new THREE.Mesh( geometry,material); // 网状 Mesh的构造函数是这样的：Mesh( geometry, material ) geometry是它的形状，material是它的材质
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
} function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation(); }
function animation()
{
//renderer.clear();
camera.position.x =camera.position.x +1; // 关键地方 没调一次animation()方法，x就自加1，就会让摄像机的位置改变，这样看到的物体就动了
renderer.render(scene, camera); // 渲染
requestAnimationFrame(animation); // 循环调用animation()方法
} </script>
</body>
</html>
物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。渲染的时候，我们调用的是渲染器的render() 函数。代码如下：
renderer.render( scene, camera );
如果我们改变了物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能够将新的场景绘制到浏览器中去。不然浏览器是不会自动刷新场景的。
如果不断的改变物体的颜色，那么就需要不断的绘制新的场景，所以我们最好的方式，是让画面执行一个循环，不断的调用render来重绘，这个循环就是渲染循环，在游戏中，也叫游戏循环。
为了实现循环，我们需要javascript的一个特殊函数，这个函数是requestAnimationFrame。
调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback这个函数。
function animation()
{
//renderer.clear();
camera.position.x =camera.position.x +1; // 关键地方 没调一次animation()方法，x就自加1，就会让摄像机的位置改变，这样看到的物体就动了
renderer.render(scene, camera); // 渲染
requestAnimationFrame(animation); // 循环调用animation()方法
}
也就是不断的执行render()函数。在render()函数中不断的改变物体或者摄像机的位置，并渲染它们，就能够实现动画了。
附带three.js代码，点击下载
摄像机不断右移，所以物体相对不断左移。
three.js之让物体动起来方式（一）移动摄像机的更多相关文章
- three.js之让物体动起来方式（二）移动物体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- 【Unity3D基础】让物体动起来①--UGUI鼠标点击移动
背景 首先还是先声明自己是比较笨的一个人,总是找不到高效的学习方法,目前自己学习Unity3D的方式主要是两种,一种是直接看高质量的源码,另一种是光看不行还要自己动手,自己写一些有代表性的小程序,这也 ...
- js对象的几种创建方式和js实现继承的方式[转]
一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...
- webgl学习总结画线面及场景和物体动
WebGL是在浏览器中实现三维效果的一套规范.是浏览器中的3D引擎,是利用js代码来实现加载3D模型,渲染.输出等功能,从而实现在浏览器和微信中浏览三维文件的效果. three.js是基于WebGL的 ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- js实现继承的5种方式 （笔记）
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- js、css引用文件的下载方式
js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
随机推荐
- Linux学习—yum命令（转载）
yum简介 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动 ...
- A smooth collaborative recommender system 推荐系统-浅显了解
characteristic: 1.Tracking user 2.personliza 3.面对的问题类似于分形学+混沌学(以有观无+窥一管而知全貌) 4.Data:high-volume.spar ...
- 了解DrawCall
一.什么是DrawCall DrawCall的含义就是CPU调用图像编程接口,以命令GPU进行渲染的操作. CPU和GPU通过使用一个命令缓冲区实现并行工作.命令缓冲区包含一个命令队列,CPU向其中添 ...
- DRF视图-请求与响应
DRF视图 drf的代码简写除了在数据序列化体现以外,在视图中也是可以的.它在django原有的django.views.View类基础上,drf内部封装了许多子类以便我们使用. Django RES ...
- 安装horizon
在控制节点上安装 controllerHost='controller' ADMIN_PASSWD='Ideal123!' 1.安装dashboard组件 yum -y install opensta ...
- smoothscroll
smoothscroll是一款jQuery插件,可以平滑地滚动到指定的地方. 可以解决chrome锚点失效的问题. 官方网站 http://iamdustan.com/smoothscroll/ gi ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- 通过using声明改变个别成员的可访问性
C++的语法中通过在派生类中使用using声明可以忽略继承方式 , 而让派生类对于基类的私有和保护成员具有特殊的访问权限 , 甚至可以改变派生类对象对于基类成员的访问权限 . 个人认为这种语法很容易让 ...
- win7安装mongodb3.6
1. 下载 https://www.mongodb.com/download-center/enterprise 选择合适平台点击下载 2. 安装mongodb 在win7系统安装mongodb需要v ...
- python 初始化__init__()
init()方法的重要性体现在两点. 1.初始化既是对象生命周期的开始,也是非常重要的一个步骤,每个对象都必须正确的执行了初始化才能够正常的工作 2.__init__()方法的参数可以多种形式来完成赋 ...