类

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 ...

随机推荐

H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
fcntl函数的用法总结
fcntl系统调用可以用来对已打开的文件描述符进行各种控制操作以改变已打开文件的的各种属性函数原型: #include<unistd.h> #include<fcntl.h&g ...
数论-求n以内的质数
一.埃拉托斯特尼筛法名字很高大上,然而并没有什么卵用…… 思路: 在把<=√n的质数所有的<=n的倍数剔除,剩下的就都是质数了,很容易理解…… 复杂度O(nloglogn) #inclu ...
linux 下用户组、文件权限详解
参考资料:http://www.cnblogs.com/123-/p/4189072.html
HTML语义化（2016/3/16更新）
目录什么是HTML语义化? 为什么要语义化常用标签的语义 HTML5新元素一.什么是HTML语义化? 简单来讲就是:每个标签做自己的事,使得能够被机器直接读懂. 二.为什么要语义化? 1.更容易 ...
js权威指南---学习笔记02
1.JS只有函数作用域,没有块级作用域这个概念: 它有一个特性——声明提前:在同一个函数中不同位置声明的变量,都被提前在函数开始的时候,执行声明操作:在原先位置执行赋值操作: 2.声明的全局变量,相当 ...
10 个优质的 Laravel 扩展推荐
这里有 10+ 个用来搭建 Laravel 应用的包为何会创建这个包的列表?因为我是一个「比较懒」的开发者,在脸书上是多个 Laravel 小组的成员.平日遇到最多的问题就是开发是需要用那些包.我很 ...
超简单的java爬虫
最简单的爬虫,不需要设定代理服务器,不需要设定cookie,不需要http连接池,使用httpget方法,只是为了获取html代码... 好吧,满足这个要求的爬虫应该是最基本的爬虫了.当然这也是做复杂 ...
JDBC连接池和DBUtils
本节内容: JDBC连接池 DBUtils 一.JDBC连接池实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程,为了解决此类性能问题,通常情况我们采取连接池技术,来共享连接Conne ...
Spark介绍及安装部署
一.Spark介绍 1.1 Apache Spark Apache Spark是一个围绕速度.易用性和复杂分析构建的大数据处理框架(没有数据存储).最初在2009年由加州大学伯克利分校的AMPLab开 ...

Three.js 类的粗略总结和实现

类