<!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. Xib设置label自动换行和Label的顶部对齐

    真的是不想说自己了,一个Xib纠结了一天,简直了,整整被虐了一上午啊...... 不知道这是Xcode8的问题呢....还是我的Xib约束什么的问题..... 只想说的是,以前也是这么设置的,明明可以 ...

  2. lumen怎么得到当前Uri的控制器、Action、路由规则

    <?php namespace App\Http\Controllers; class HelloController extends Controller { public function ...

  3. —Entity Framework实例详解

    Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...

  4. 文件上传and富文本页面

    文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" act ...

  5. Leetcode之动态规划（DP）专题-123. 买卖股票的最佳时机 III（Best Time to Buy and Sell Stock III）

    Leetcode之动态规划(DP)专题-123. 买卖股票的最佳时机 III(Best Time to Buy and Sell Stock III) 股票问题: 121. 买卖股票的最佳时机 122 ...

  6. element-ui--按需引入

    参考链接:https://www.cnblogs.com/qiezuimh/p/10103522.html

  7. nodejs加解密

    加密分类 可逆加密和不可逆加密 不可逆加密: 加密后不可解密,只能通过碰撞密文以极小的概率解密; 可逆加密: 加密后可以解密;包括对称加密与非对称加密; 对称加密双方采用共同密钥; 非对称加密: 这种 ...

  8. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...

  9. 【3.3】mysql中的Federated存储引擎，远程表，相当于sql server的linked server

    MySQL中针对不同的功能需求提供了不同的存储引擎.所谓的存储引擎也就是MySQL下特定接口的具体实现. FEDERATED是其中一个专门针对远程数据库的实现.一般情况下在本地数据库中建表会在数据库目 ...

  10. Arrays.asList()方法注意事项

    1.Arrays.asList()底层数组作为物理层实现.所以返回的List大小不可更改,即不可以做add().remove()操作,并且对List所做的任何变动都会致使原数组发生变动. public ...