帮酷LOGO
  • 显示原文与译文双语对照的内容
A lightweight 3D CSS voxel library.

  • 源代码名称:voxel.css
  • 源代码网址:http://www.github.com/HunterLarco/voxel.css
  • voxel.css源代码文档
  • voxel.css源代码下载
  • Git URL:
    git://www.github.com/HunterLarco/voxel.css.git
  • Git Clone代码到本地:
    git clone http://www.github.com/HunterLarco/voxel.css
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/HunterLarco/voxel.css
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • #voxel.css

    3D 库

    这个项目的目标是提供一个轻量级的3D CSS库,实现非常简单。

    演示文档

    用法

    下载缩减库css文件,并在你的html中包括。

    <!DOCTYPE html>
    <htmllang="en">
     <head>
     <metacharset="UTF-8">
     <title>voxel.css</title>
     <linkrel="stylesheet"href="css/voxel.css"></link>
     </head>
     <body>
     <scriptsrc="js/voxelcss.js"></script>
     </body>
    </html>

    这个代码创建一个场景。一个可以保存的世界和一个编辑器,允许你立即开始构建带有 voxel.css的世界,看看制作复杂的3D 元代码游戏所需的代码。 如果你曾经构建过任何东西,它会自动加载以前的构建而不是创建新的。

    functioninit(element) {
     varPI=Math.PI;
     var scene =newvoxelcss.Scene();
     var lightSource =newvoxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
     var world =newvoxelcss.World(scene);
     var editor =newvoxelcss.Editor(world);
     scene.rotate(-PI/8, PI/4, 0);
     scene.attach(element);
     scene.addLightSource(lightSource);
     editor.enableAutoSave();
     editor.load();
     if (world.getVoxels().length===0) {
     editor.add(newvoxelcss.Voxel(0, 0, 0, 100, {
     mesh:voxelcss.Meshes.grass }));
     }
    }init(document.body);

    如果一切顺利,你就应该看到这个。

    的核心概念

    有 4个重要类。 场景。世界。编辑和体素。 在场景。世界和编辑器之间的区别对于了解它们是否很重要非常重要。 场景只是摄影机。 它可以旋转。平移。缩放和包含体素。 同时,世界可以保存任何添加到它的体素的状态。 这是一个重要的体体,在现场,但不是在一个世界,不是一个。 最后,编辑器创建所有必需的鼠标事件,使用户可以以通过添加选项来保存所有更改。

    属性和类

    核心类接口

    未来特性

    • 阴影
    • Firefox 背面剔除
    • 移动触控支持

    使用 voxel.css 构建的项目

    更改日志

    释放




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语