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>
posted @ 2017-02-24 00:19  banananana  阅读(640)  评论(0)  编辑  收藏  举报