ボクセル.css

voxel.css

JavaScript 3D ライブラリ

voxel.css - 一つの量級の 3D CSS ボクセル。このプロジェクトの目標は、軽量の 3D CSS を提供することです。非常に単純な実装のライブラリです。

デモ — ドキュメント

使用法

縮小されたライブラリと CSS ファイルをダウンロードし、両方を HTML に含めます。

<script src="js/voxelcss.js"></script><link rel='stylesheet' href="css/voxel.css"></link>

このコードは、シーン、保存可能なワールド、およびエディターを作成します。これにより、voxel.css を使用してワールドの構築をすぐに開始でき、複雑な 3D ボクセル ゲームを作成するのにどれだけ少ないコードが必要かがわかります。過去に何かをビルドしたことがある場合は、新しいビルドを作成する代わりに、以前のビルドが自動的にロードされます。

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

すべてがうまくいけば、これが表示されるはずです。

コアコンセプト

4 つの重要なクラスがあります。シーン、ワールド、エディター、そしてもちろんボクセル。シーン、ワールド、エディターの間の宛先を適切に活用するには、これらの宛先を知っておくことが重要です。シーンは単なるカメラです。回転、パン、ズームが可能で、ボクセルを含めることができます。一方、ワールドは、それに追加されたボクセルの状態を保存できます。シーン内にあるがワールド内にないボクセルは保存できないため、これは重要です。最後に、エディターは、すべての変更を自動保存するオプションを追加して、ユーザーがワールドにブロックを追加したりワールドからブロックを削除したりするために必要なすべてのマウス イベントを作成します。

プロパティとクラス

コア クラス — インターフェイス

将来の機能

• シャドウ
• Firefox バックフェイスカリング
• モバイルタッチサポート

ボクセルで構築されたプロジェクト.css

• https://codepen.io/wesbos/pen/EPLVMv?editors=0110

変更ログ

リリース

项目地址： https://github.com/HunterLarco/voxel.css