<!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之让物体动起来方式（一）移动摄像机的更多相关文章

  1. three.js之让物体动起来方式（二）移动物体

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. 【Unity3D基础】让物体动起来①--UGUI鼠标点击移动

    背景 首先还是先声明自己是比较笨的一个人,总是找不到高效的学习方法,目前自己学习Unity3D的方式主要是两种,一种是直接看高质量的源码,另一种是光看不行还要自己动手,自己写一些有代表性的小程序,这也 ...

  4. js对象的几种创建方式和js实现继承的方式[转]

    一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...

  5. webgl学习总结画线面及场景和物体动

    WebGL是在浏览器中实现三维效果的一套规范.是浏览器中的3D引擎,是利用js代码来实现加载3D模型,渲染.输出等功能,从而实现在浏览器和微信中浏览三维文件的效果. three.js是基于WebGL的 ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. js实现继承的5种方式 （笔记）

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  8. js、css引用文件的下载方式

    js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...

  9. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

  1. Go项目实战：打造高并发日志采集系统（三)

    前文中已经完成了文件的监控,kafka信息读写,今天主要完成配置文件的读写以及热更新.并且规划一下系统的整体结构,然后将之前的功能串起来形成一套完整的日志采集系统. 前情提要 上一节我们完成了如下目标 ...

  2. 小程序插件使用wx.createSelectorQuery()获取不到节点信息

    发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSel ...

  3. Mrchen测试人生

    auto:chenyq date:20190920 data:今天是我从事10年IT软件测试工作来的 开始写技术博客的第一次,希望今后能给互联网需要查询技术知识带来方便: 说起我的测试人生 路也走了1 ...

  4. 安装zabbix4.0 LTS

    一.环境准备 1.https://www.zabbix.com/download?zabbix=4.4&os_distribution=centos&os_version=7& ...

  5. Windows多线程编程入门笔记

    每次处理并行任务时,如果要等待用户输入或依赖外部(如与灿亨控制器响应),就应该为类似的操作单独创建一个线程,这样我们的程序才不会挂起无响应. 静态库和动态库 静态库是指在程序运行前就编译完成的库,如# ...

  6. JQuery自动填充控件：autocomplete（自己稍作了修改）

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. OpenResty + Lua + Kafka 实现日志收集系统以及部署过程中遇到的坑

    ********************* 部署过程 ************************** 一:场景描述 对于线上大流量服务或者需要上报日志的nginx服务,每天会产生大量的日志,这些 ...

  8. [转帖]快速部署Telegraf & Influxdb

    快速部署Telegraf & Influxdb https://www.cnblogs.com/deykenlee/p/7565647.html 作者的blog 比较早 后来 influxdb ...

  9. Navicat远程无法创建数据库

    Navicat远程无法创建数据库 提示报错信息如下,说明是用户创建的权限不足. Error Code: 1044. Access denied for user 'root'@'%' to datab ...

  10. c++练习—实现简单的4则运算

    #pragma once class Counter { public: void setExp(const char* exp);//设置表达式 void cleanExp(); //清除表达式 v ...