Three.js 类的粗略总结和实现
类
1.Cameras
照相机，包括很多种类型的摄像机类，包括正交类型和投影类型的摄像机
2.Core
核心对象
3.Lights
光照，包括点光，环境光，镜面光等等
4.Loaders
专门用来加载文件
5.Materials
材质类
6.Math
数学类
7.Objects
物体类，比如平面，圆，网格等等
8.Renderers
渲染器
9.Scenes
场景
10.Textures
纹理
11.Extras
扩展的对象
12.Extras/Animation
动作类
13.Extras/Cameras
摄像机的扩展
14.Extras/Core
核心对象的扩展
15.Extras/Geometries
几何对象的扩展
16.Extras/Helpers
帮助对象的扩展
17.Extras/Objects
物体对象的扩展
18.Extras/Renderers/Plugins
渲染器的扩展
19.Extras/Shaders
着色器的扩展
简单实现
一个典型基础的Three.js至少要包括渲染器(Renderer)，场景(Scene)，照相机(Camera)，以及在场景中创建的物体。是不是感觉有点像Cocos2dx。
ok，第一个项目就这样生成了。
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建摄像机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 创建盒子
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
// 将物体加入场景
scene.add( cube );
// 设置摄像机的深度
camera.position.z = 5;
var render = function () {
// 在一定的时间内重复实行某函数
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
// 执行渲染
renderer.render(scene, camera);
};
// 执行定义函数
render();
</script>
</body>
</html>
Three.js 类的粗略总结和实现的更多相关文章
- 自己手写的自动完成js类
在web开发中,为了提高用户体验,会经常用到输入框的自动完成功能,不仅帮助用户进行快速输入,最重要的是帮助那些“记不全要输入什么”的用户进行选择.这个功能有很多插件已经实现了,为了适应项目的特殊需求, ...
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- 几种常用的JS类定义方法
几种常用的JS类定义方法 // 方法1 对象直接量var obj1 = { v1 : "", get_v1 : function() { return ...
- js类（继承）（二）
1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...
- JS类继承常用方式发展史
JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...
- 两种简单实现菜单高亮显示的JS类(转载)
两种简单实现菜单高亮显示的JS类 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...
- js类的使用
brush示例 以d3的一个brush进行叙述,示例见: https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 应用情形: 当页 ...
- JS OOP -03 JS类的实现
JS类的实现: a.理解类的实现机制 b.使用prototype对象定义类成员 c.一种JS类的设计模式 a.理解类的实现机制 在JS中可以使用function关键字来定义一个类. 添加类的成员,在函 ...
- Js 类继承 extends
html 及 js 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- Linux Module框架【转】
转自:http://www.cnblogs.com/LittleHann/p/4558719.html catalog 1. 概述 2. 使用模块 3. 插入和删除模块 4. 自动化与热插拔 5. 版 ...
- 15 Defer, Panic, and Recover
Defer, Panic, and Recover 4 August 2010 Go has the usual mechanisms for control flow: if, for, switc ...
- Flask：使用Eclipse+PyDev插件编辑基于package的项目
Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2,Eclipse Oxygen.1a Release (4.7.1a),PyDev 6.3.2 本文记录了 使用Ecli ...
- 字体格式类型(.eot/.otf/.woff/.svg)
@font-face语句是css中的一个功能模块,用于实现网页字体多样性的模块(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装). @font-face文件 而由于网页中使用的字体类型,也是各浏 ...
- jpql和sql的区别
项目使用jpa规范 其中既可使用面对对象查询(jpql语句) 又可使用原生sql查询; 1.(经后期验证,jpql都可以) 其中有一个区别是: jpql查询字段为空: " cr.owner ...
- Java内存优化和性能优化的几点建议
1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...
- jQuery使用JSONP时的错误处理
概述 什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域.跨域,就是在一个域中访问另一个域的数据. 如果只是加载另一个域的内容,而不需要访问其中的数据的话,跨域是很 ...
- (一) solr的安装与配置
载solr文件压缩包,并解压 ,要运行solr服务之前需要先安装jdk,具体安装过程可以参看下面这篇文章: http://www.cnblogs.com/xiazh/archive/2012/05/2 ...
- 开源的python机器学习模块
1. Scikit-learn Scikit-learn 是基于Scipy为机器学习建造的的一个Python模块,他的特色就是多样化的分类,回归和聚类的算法包括支持向量机,逻辑回归,朴素贝叶斯分类器, ...
- 2015309南皓芯《Java程序设计》实验一（Java开发环境的熟悉）实验报告
一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一(新建文件夹):打开windows下的cmd → 输入cd Code命令进入Code目录 → 输入md 20 ...