Three.js基础：建立Cube并实现鼠标交互，动画旋转
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并实现鼠标交互，动画旋转的更多相关文章
- JS基础内容小结（event 鼠标键盘事件）（三）
var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础知识总结（2016.11.1）
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- Three.js基础
Three.js基础探寻一 Three.js基础探寻一 1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- 把 hhkb 压在mac pro上面用
不知道你们有没有这种感觉, 用惯了外接键盘,然后切换到笔记本自带键盘的时候 手指会有不适应感? 直接 hhkb 放2018款的mac pro上总会压着原来的键盘, 而且我也不想直接禁用掉笔记本自带的键 ...
- Class.forName()用法
主要功能 Class.forName(xxx.xx.xx)返回的是一个类. Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类,也就是说JVM会执行该类的静态代码段. ...
- 几种常见数据库查询判断表和字段是否存在sql
1.MSSQL Server 表:select COUNT(*) from dbo.sysobjectsWHEREname= 'table_name': 字段:select COUNT(*) ...
- Java 之内部类
概述 内部类修饰符 内部类的细节 局部内部类 匿名内部类及其应用 匿名内部类细节 内部类概述 将一个类定义在另一个类的里面, 里面的那个类就称为内部类(内置类, 嵌套类). class Outer { ...
- 从库函数解析STM32地址映射
STM32的存储映射是靠基地址和地址偏移实现的. 32位的M3有4GB的寻址空间,其中用于片上外设的有512MB,基地址为0x40000000. M3各外设基地址,包括片上外设.片上静态RAM和FLA ...
- springcloud 开发时快速剔除无用服务
注册中心配置: # 关闭保护机制 eureka.server.enable-self-preservation=false #剔除失效服务间隔 eureka.server.eviction-inter ...
- python 多进程使用Queue通信的例子
import time from multiprocessing import Process,Queue MSG_QUEUE = Queue(5) def startA(msgQueue): whi ...
- 初识ambari
本文地址:http://www.cnblogs.com/qiaoyihang/p/6290467.html 引用:http://blog.csdn.net/yeruby/article/details ...
- Python中 and，or 的计算规则
一.纯 and 和 or 语句 1. 在纯and语句中,如果每一个表达式都不是假的话,那么返回最后一个,因为需要一直匹配直到最后一个.如果有一个是假,那么返回假2. 在纯or语句中,只要有一个表达式不 ...
- Nodejs学习计划
此文章已经发表于本人博客. 由于公司要求这段时间在学习Nodejs,基本靠自摸一路走来踩了很多坑浪费很多时间,今天就来这里说下,顺便计划一下接下来的学习计划,目前自己做个博客,项目过程中学习了js类以 ...