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 ...
随机推荐
- 【Git】Git与GitHub 入门【转】
转自:http://www.cnblogs.com/lcw/p/3394545.html GitHub GitHub是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公 ...
- pl/sql developer 设置oracle的date类型默认显示样式
oracle里默认的date显示样式: 我的是汉化过的: 进入后,点击工具->首选项->日期/时间设置即可: 设置后在pl/sql developer中查看: 英文版的操作步骤: Tool ...
- 说一下怎么搭建外网来访问SVN服务器
一.搭建SVN服务器 1.所需软件 TortoiseSVN,下载地址http://tortoisesvn.net/downloads.html TortoiseSVN中文语言包,下载地址http:// ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- plsql developer配置
一:今天plsql developer连接 出问题了 ,Oracleclient没正确安装 0.连接vpn 1.环境变量:TNS_ADMIN = D:\worksoftware\oracleClien ...
- Centos7.3安装vsftp服务
我们需要向centos操作系统的服务器上上传文件或者下载文件,这时候,ftp有必要安装下, 我们选择主流的vsftp: 第一步:安装vsftp yum install -y vsftpd 第二步:设置 ...
- 在Eclipse中导入新浪微博SDK
在Eclipse中导入新浪微博SDK 今天在看<Android开发应用实战>,全书都在讲一个android版的新浪微博客户端怎么做,于是按照书上步骤做.网上有人说这本书没有细节,我想对于小 ...
- 在Visio里加上、下标方法
添加上标:选中要成为上标的文字,ctrl+shift+“=” 添加下标:选中要成为下标的文字,ctrl+“=”
- Java实现统计某字符串在另一个字符串中出现的次数
面试时会经常考这样的题目,估计也不让使用正则表达式.还好这个算法还算简单,不过在草稿纸上写难免会出现运行异常,好吧,面试官赢了,乃们屌丝就实实在在的把代码码出来吧. 谢谢“心扉”对我代码bug的纠正, ...