<!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. 【JVM学习笔记】异常表的重要作用以及locals属性的含义

    有如下代码 public class Test { public void work() { try { InputStream is = new FileInputStream("test ...

  2. 软件开发的SOLID原则

    再次回顾以前潘加宇老师将的软件开放的原则. SOLID: 单一责任原则 S 开放封闭原则 O 里氏代换原则 L 接口分离原则 I 依赖反转原则 D 所有编程都是维护编程,因为你很少写原创代码.只有你在 ...

  3. v-for与v-if的优先级

    原文地址 永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users ...

  4. 什么是vue生命周期和生命周期钩子函数？

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  5. 第四章 信息收集之nmap

    @nmap扫描工具 nmap是使用最广泛的扫描工具,主要的使用范围有,嗅探,扫描,ping. 局域网扫描 nmap扫描的基本命令: 首先在桌面右键选择open in terminal进入命令窗口,输入 ...

  6. AssetBundle资源打包与加载

    AssetBundle资源打包  1.AssetLabels资源标签 文件名:资源打包成AssetBundle后的文件名,类似于压缩包的名字 后缀:自定义 文件名和后缀名都是小写格式(大写会自动转为小 ...

  7. C学习笔记-第一个C语言程序

    第一个C语言程序 #include<stdio.h> //1 int main() //2 { printf("This is a C language"); //3 ...

  8. JAVA上传文件到数据库

    前端代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> &l ...

  9. NPM安装过程中的一些问题与解决

    1. 安装 vue-cli3后提示 : Package require os(darwin) not compatible with your platform(win32). 上面是因为安装 npm ...

  10. 【LOJ】#2985. 「WC2019」I 君的商店

    LOJ#2985. 「WC2019」I 君的商店 一道很神仙的题啊QAQ 居然是智商题--不是乱搞或者是大数据 我们可以用2N问出一个最大值是1 然后对于任意两个值\(x + y\)和\(a\)比较 ...