index.html文件：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Cube</title>

         <script type="text/javascript" src="three.js"></script>

         <script type="text/javascript" src="mythree.js"></script>

         <script type="text/javascript" src="js/controls/OrbitControls.js"></script>

     </head>

     <body onload="init()">

         <div>

             <canvas id="mainCanvas" width="500px" height="500px" ></canvas>

         </div>

     </body>

 </html>

mythere.js文件：

 var renderer, camera, scene,cube,controls;

 function init() {

     // renderer

     renderer = new THREE.WebGLRenderer({

         canvas: document.getElementById('mainCanvas')

     });

     renderer.setClearColor(0x000000); // black

     // scene

     scene = new THREE.Scene();

     // camera

     camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);

     camera.position.set(0, 0, 5);

     scene.add(camera);

     // a cube in the scene

     cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 3),

             new THREE.MeshBasicMaterial({

                 color: 0xff0000

             })

     );

     scene.add(cube);

     //controlls

     controls = new THREE.OrbitControls( camera ,renderer.domElement);

     controls.addEventListener( 'change', render );    

     // Animation

     requestAnimationFrame(draw);    

     render();

 }

 // Animation

 function draw() {

     id = requestAnimationFrame(draw);

     cube.rotation.x += 0.05;

     cube.rotation.y += 0.05;

     renderer.render(scene, camera);

 }

 function render() {

     renderer.render(scene, camera);

 }

Three.js基础：建立Cube并实现鼠标交互，动画旋转的更多相关文章

  1. JS基础内容小结（event 鼠标键盘事件）（三）

    var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...

  2. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  3. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  4. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  5. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  6. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  7. js基础知识总结（2016.11.1）

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  8. Three.js基础

    Three.js基础探寻一 Three.js基础探寻一   1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. 巨蟒python全栈开发-第17天 核能来袭-成员

    一.今日主要内容 1.成员 在类中你能写的所有内容都是类的成员 2.变量 (1)实例变量:昨天写的就是实例变量,由对象去访问的变量. (2)类变量(静态变量):此时,这个变量属于类,但是对象也可以访问 ...

  2. Contos更换python版本

    1.查看版本 #python -VPython 2.6.6 2.安装前准备,安装相关库#yum install gcc gcc-c++ autoconf automake#yum install op ...

  3. PHP错误处理，无法显示验证码。。无法显示首页等莫名其妙的500

    use the date.timezone setting or the date_default_timezone_set() 这是由于调用date时,若timezone设置不正确所产生的E_NOT ...

  4. Storm-源码分析- spout (backtype.storm.spout)

    1. ISpout接口 ISpout作为实现spout的核心interface, spout负责feeding message, 并且track这些message. 如果需要Spout track发出 ...

  5. php5.4 的 php-fpm 的重启

    php 5.3.3以后 源码中已经内嵌了 php-fpm,不用象以前的php版本一样专门打补丁了,只需要在configure的时候添加编译参数即可. 关于php-fpm的编译参数有 –enable-f ...

  6. python项目环境的导出、导入

    导出开发环境 pip freeze > requirements.txt # 文件导出路径 导入环境 pip install -r requirements.txt # pip 则会自动下载安装 ...

  7. 编程算法 - 全然背包问题 代码(C)

    全然背包问题 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 有n个重量和价值分别为w,v的物品, 从这些物品中挑选出总重量不超过W的物品, 求 ...

  8. dplyr快速入门

    RStudio Blog 介绍dplyr 包已发布 (Introducing dplyr), 此包将原本 plyr 包中的 ddply() 等函数进一步分离强化, 专注接受dataframe对象, 大 ...

  9. linux环境配置时钟同步ntpd服务

    配置: 服务器1:192.168.169.139 服务器2:192.168.169.140 服务器3:192.168.169.141 目的:NTP能与互联网的时间保持同步,而且本身也是一台NTP服务器 ...

  10. XMPP环境搭建 (mac环境下 安装自己独立的mysql与服务器(openfire),实现即时聊天功能)

    1简单概览 [一]XMPP简介 http://xmpp.org 即时通讯技术 IM - Instant Messaging ⽀支持⽤用户在线实时交谈.交谈双⽅方都需要⼀一个聊天窗⼝口,其中⼀一个⽤用户 ...