• 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 {  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>
    
    
  • 相关阅读:
    Mybatis连接配置文件详解
    MyBatis映射配置文件详解
    AGC 016 C
    CodeForces
    UVA
    某5道CF水题
    DZY Loves Chinese / DZY Loves Chinese II
    [SHOI2016] 黑暗前的幻想乡
    CodeForces
    CodeForces
  • 原文地址:https://www.cnblogs.com/George1994/p/6436221.html
Copyright © 2020-2023  润新知