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. MySQL主从不一致修复

    场景: 线上正在服务的库由于紧急主从切换导致主从不一致,报错信息如下: Last_Error: Coordinator stopped because there were error(s) in t ...

  2. Windows数据库定时备份

    首先打开:任务计划程序 右键任务计划程序库,选择创建基本任务 然后即可以按照实际情况逐步进行 直到启动程序--浏览(程序或脚本)时,这里本人导入的是backup.bat文件,文件内容为 @echo 设 ...

  3. ArcGIS Silverlight 设置token

    背景 arcgis for server采用多种安全认证方式.常用的就是就是采用token机制.所以对服务设置了安全,则前端需要提供相对应的token凭证.通常来说设置token有以下两种情形: 一是 ...

  4. springmvc控制器controller单例问题

    springmvc controller默认的是单例singleton的,具体可以查看注解scope可以一目了然. 单例的原因有二: 1.为了性能. 2.不需要多例. 1.这个不用废话了,单例不用每次 ...

  5. c++编译/连接/运行

    1.gcc命令&makefile语法&makefile编写: https://www.cnblogs.com/ycloneal/p/5230266.html 2.头文件&库文件 ...

  6. node.js基本工作原理及流程

    概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...

  7. 收藏一些好用的c语言数据结构

    14.redis内置的链表,非常好 adlist.c /* adlist.c - A generic doubly linked list implementation * * Copyright ( ...

  8. 解释一下python中的//,%和**运算符

    //运算符执行地板除法(向下取整除),它会返回整除结果的整数部分 print(7//2) 这里整除后会返回3.5 同样的,执行取幂运算,ab会返回a的b次方 print(2**10) 最后,%执行取模 ...

  9. 对象序列化与反序列化local class incompatible

    无论eclipse还是idea(默认关闭序列化提示,需手动打开),都可以自动生成相应的序列号,分为两类1L,XXXL. 当然如果不指定,系统也会自动生成,但是存在隐性风险 ,不同的编译器对同一个对象可 ...

  10. nodejs两个例子

    1.nodejs多线程 var cluster=require("cluster");//ͨ¹ýcluster¿ÉÒÔ·Ö³öһЩ×ÓÏß³Ì var http=requir ...