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. pip安装Scrapy框架报错

    安装: pip3 install scrapy==1.1.0rc3 一..解决scrapy安装错误: 二.具体操作: 1.在http://landinghub.visualstudio.com/vis ...

  2. delphi =------报错

    关于delphi软件运行出现Invalid floating point operation的错误的解决办法 关于delphi软件运行出现Invalid floating point operatio ...

  3. 并发编程6 锁&进程&队列

    1.进程的其他方法 2.验证进程空间隔离和守护进程 3.孤儿进程和僵尸进程 4.锁 for循环加join数据共享 5.进程队列的简单应用 6.通过队列实现进程间的通信 7.生产者消费者模型及Queue ...

  4. sqli_labs第一关

    安装 从https://github.com/Audi-1/sqli-labs下载源代码 搭建环境用的是phpstudy 编辑sqli\sql-connections\db-creds.inc文件 修 ...

  5. 使用CocoaPods配置管理开源项目

    今天从GitHub下载了MMProcessHUB,想先看看demo,但是不巧的是作者是用CocoaPods配置的,需要安装CocoaPods,CocoaPods是一个第三方的类库管理工具.找了一篇很详 ...

  6. 高德js API moveAlong 函数的一个错误解决

    使用覆盖物之一:点标记,让点标记沿着固定的路线移动. API 提供了现成的函数 moveAlong() 开始以为 实现移动很简单:分两部 1.准备好经纬度数组 2.调用moveAlong()函数.按照 ...

  7. 版本号风格为 Major.Minor.Patch

    旧版本兼容 · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html 微信客户端和小程序基 ...

  8. 转!!关于java类初始化顺序

    原文地址:http://www.cnblogs.com/luckygxf/p/4796955.html 1.没有继承 静态变量->静态初始化块->变量->变量初始化块->构造方 ...

  9. Virtualbox报错------>make sure the kernel module has been loaded successfully

    错误描述 很久没有用virtualbox了,今天打算在virtualbox上安装一个Ubuntu系统的时候,新建好Ubuntu后启动的时候,直接报错: Cannot access the kernel ...

  10. Tomcat WEB站点部署

    上线的代码有两种方式, 第一种方式是直接将程序目录放在webapps目录下面 第二种方式是使用开发工具将程序打包成war包,然后上传到webapps目录下面.下面让我们见识一下这种方式 这个网站里面已 ...