<!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. 【Gym - 100923I】Por Costel and the Pairs（思维题）

    Por Costel and the Pairs Descriptions 有T组测试样例 有n个男的,n个女的,第i个人都有为当前一个大小为i的懒惰值,当一男一女懒惰值的乘积<=n他们就就可以 ...

  2. win10下查看进程，杀死进程

    参考链接:https://blog.csdn.net/qq_36819098/article/details/80262482

  3. merge效率

    测试merge效率   测试说明: MERGE是oracle提供的一种特殊的sql语法,非常适用于数据同步场景,即: (把A表数据插到B表,如果B表存在相同主键的记录则使用A表数据对B表进行更新) 数 ...

  4. 论文阅读 | Text Processing Like Humans Do: Visually Attacking and Shielding NLP Systems

    [code&data] [pdf] 主要工作 文章首先证明了对抗攻击对NLP系统的影响力,然后提出了三种屏蔽方法: visual character embeddings adversaria ...

  5. Apache——开启个人用户主页功能

    个人主页功能分为不加密和加密两种 不加密: 先来建立几个用户,我这是建了两个 例:命令为:useradd  qiyuan 然后输入:passwd qiyuan,改一下密码 我们看一下家目录下面: 已经 ...

  6. SpringBoot整合MyBatis完成添加用户

    怎么创建项目就不说了,可以参考:https://www.cnblogs.com/braveym/p/11321559.html 打开本地的mysql数据库,创建表 CREATE TABLE `user ...

  7. Design Linked List

    Design your implementation of the linked list. You can choose to use the singly linked list or the d ...

  8. 使用 WijmoJS 轻松实现撤消重做（Undo /Redo）

    使用 WijmoJS 轻松实现撤消重做(Undo /Redo) 在V2019.0 Update2 的全新版本中,WijmoJS能够轻松实现撤消和重做操作,使Web应用程序的使用更加友好.更加高效. 不 ...

  9. IDEA连接 Oracle数据库

    package com.zxx.util;import org.apache.commons.dbutils.DbUtils;import java.sql.Connection;import jav ...

  10. 剑指offer4：重建二叉树（后序遍历）

    1. 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4 ...