<!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 = 1;

        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(0xFF0000);  // 创建环境光源，不产生阴影

        light.position.set(100, 100, 200);

        scene.add(light);

        light = new THREE.PointLight(0x00FF00);  // 创建点光源

        light.position.set(0, 0, 300);

        scene.add(light);

    }

    var mesh;  // 创建模型

    function initObject() {

        var geometry = new THREE.CylinderGeometry(100, 150, 400);  // THREE.CylinderGeometry构造圆柱体

        var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});  //THREE.MeshLambertMaterial高级材质，构造类似木头、石头等不光滑的表面

        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() {

        mesh.position.x += 1;  // mesh就是指的物体，它有一个位置属性position，这个position是一个THREE.Vector3类型变量，所以你要把它向左移动，只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。

        renderer.render(scene, camera);

        requestAnimationFrame(animation);

    }

</script>

</body>

</html>

移动物体与移动摄像机的唯一区别是

mesh.position.x += 1;

附带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写 匀速运动.缓冲运动.多物体运 ...

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

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

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

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

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

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

随机推荐

  1. Java泛型(8)：自限定&参数协变

    自限定 自限定将强制泛型当做自己的边界参数来使用.自限定所做的,就是要求在继承关系中,像下面这样使用这个类: class A extends SelfBounded<A> {} 它的意义是 ...

  2. 字符串写入到json文件

    背景: PHP产生公告 ,发送到CGI ,在CGI把该公告的json 字符串写入到文件内(转义后的字符串) 通过 jsoncpp 操作 int write_notice_to_json(string ...

  3. 【HTML】常用的标签学习（2）

    现在的使用的html语言都是h5,但是h5也是从h4继承发展来的,所以h4的标签我们也要学习,然后加上h5新增的标签,那么html这门语言才算学习完毕.上次学习了h4的一些常用标签,今天学习h4剩下的 ...

  4. sql回显注入（满满的干货）

    三种注入poc where user_id = 1 or 1=1 where user_id = '1' or '1'='1' where user_id =" 1 "or &qu ...

  5. 11个顶级 JavaScript 日历插件

    参考链接:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247487050&idx=1&sn=e1cf66726 ...

  6. XML中不能识别&符号, 需要转义吗？

    “&”在XML中是具有特殊含义的,是转义字符的前缀,如果要想用这个字符就需要转义.遇到“&”就替换成“&amp”就好了; xml所有转义符   和 & & 大于 ...

  7. C++命名建议

    如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一.带层次结构.清晰明了的命名准则就是必不可少而且非常好用的工具. 活跃在生物学.化学.军队.监狱.黑社会.恐怖组织等各个领域内的大量有识 ...

  8. ######<待随时补充>我的学习规划######

    一.关于Python 1.demo   一些基础实验,包含Python基础知识等,约300-500个 2.Python常见模块的了解学习,如 time datetime random 随机数 os 与 ...

  9. strCmd.Format("delete FROM userTable where name = '%s'", name);

    string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...

  10. Swoft 2.0.3 重大更新，发布优雅的微服务治理

     什么是 Swoft ? Swoft 是一款基于 Swoole 扩展实现的 PHP 微服务协程框架.Swoft 能像 Go 一样,内置协程网络服务器及常用的协程客户端且常驻内存,不依赖传统的 PHP ...