1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Three框架</title>
  6.     <script src="../static/three.js-master/build/three.js"></script>
  7.     <style type="text/css">
  8.         div#canvas-frame {
  9.             border: none;
  10.             cursor: pointer;
  11.             width: 100%;
  12.             height: 600px;
  13.             background-color: #EEEEEE;
  14.         }
  15.  
  16.     </style>
  17.  
  18. </head>
  19.  
  20. <body onload="threeStart();">
  21. <div id="canvas-frame"></div>
  22. <script>
  23.     var renderer;
  24.  
  25.     function initThree() {
  26.  
  27.         renderer = new THREE.WebGLRenderer();  // 创建渲染器
  28.         renderer.setSize(window.innerWidth, window.innerHeight);  // 设置长度和宽度
  29.         document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 添加到canvas-frame
  30.         renderer.setClearColor(0xFFFFFF, 1.0);  // 设置背景色和透明度
  31.  
  32.     }
  33.  
  34.     var camera;  // 摄像机
  35.  
  36.     function initCamera() {
  37.         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  38.         camera.position.x = 0;
  39.         camera.position.y = 0;
  40.         camera.position.z = 1000;
  41.         camera.up.x = 0;
  42.         camera.up.y = 1;
  43.         camera.up.z = 0;
  44.         camera.lookAt(0, 0, 0);
  45.     }
  46.  
  47.     var scene;  // 场景
  48.  
  49.     function initScene() {
  50.         scene = new THREE.Scene();
  51.     }
  52.  
  53.     var light;  // 光线
  54.  
  55.     function initLight() {
  56.         light = new THREE.AmbientLight(0xFF0000);  // 创建环境光源，不产生阴影
  57.         light.position.set(100, 100, 200);
  58.         scene.add(light);
  59.         light = new THREE.PointLight(0x00FF00);  // 创建点光源
  60.         light.position.set(0, 0, 300);
  61.         scene.add(light);
  62.     }
  63.  
  64.     var mesh;  // 创建模型
  65.  
  66.     function initObject() {
  67.         var geometry = new THREE.CylinderGeometry(100, 150, 400);  // THREE.CylinderGeometry构造圆柱体
  68.         var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});  //THREE.MeshLambertMaterial高级材质，构造类似木头、石头等不光滑的表面
  69.         mesh = new THREE.Mesh(geometry, material);  // 网状 Mesh的构造函数是这样的：Mesh( geometry, material ) geometry是它的形状，material是它的材质
  70.         mesh.position = new THREE.Vector3(0, 0, 0);
  71.         scene.add(mesh);
  72.     }
  73.  
  74.     function threeStart() {
  75.         initThree();
  76.         initCamera();
  77.         initScene();
  78.         initLight();
  79.         initObject();
  80.         animation();
  81.  
  82.     }
  83.  
  84.     function animation() {
  85.         mesh.position.x += 1;  // mesh就是指的物体，它有一个位置属性position，这个position是一个THREE.Vector3类型变量，所以你要把它向左移动，只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。
  86.         renderer.render(scene, camera);
  87.         requestAnimationFrame(animation);
  88.     }
  89.  
  90. </script>
  91. </body>
  92. </html>

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

  1. 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. linux硬件驱动

    今天被问到了一个新问题:linux需不需要安装驱动,就像windows装完系统之后需要安装最新驱动一样? 说实话以前真没想过,都是装完系统update一下就直接用了. 谷歌了一下,发现其实也是需要安装 ...

  2. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  3. 菜鸟系列docker——docker容器(7)

    docker 容器 1. docker 守护进程daemon Daemon是Docker的守护进程,Docker Client通过命令行与Docker Damon通信,完成Docker相关操作,Doc ...

  4. C语言Ⅰ博客作业11

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/10130 我在这个课程的 ...

  5. POJ1988 Cube Stacking 【并查集】

    题目链接:http://poj.org/problem?id=1988 这题是教练在ACM算法课上讲的一道题,当时有地方没想明白,现在彻底弄懂了. 题目大意:n代表有n个石头,M a, b代表将a石头 ...

  6. Design Log Storage System

    You are given several logs that each log contains a unique id and timestamp. Timestamp is a string t ...

  7. GridFS文件操作

    目录 1. GridFS介绍 2. GridFS 存取文件测试 2.1 新建项目配置pom.xml 2.2 在application.yml配置mongodb 2.3 GridFS存取文件测试 2.4 ...

  8. jenkins+docker+git+etcd实现应用配置文件管理

    两台机器: 一台机器安装gitlab: http://www.cnblogs.com/cjsblogs/p/8716932.html 另一台机器安装etcd+docker+jenkins jenkin ...

  9. Neo4j图数据库配置文件详解

    For more details and a complete list of settings, please see https://neo4j.com/docs/operations-manua ...

  10. isEmpty 和 isBlank 区别

    isEmpty 和 isBlank 区别 org.apache.commons.lang.StringUtils 类提供了 String 的常用操作,最为常用的判空有如下两种 isEmpty(Stri ...