HTML5 CSS3 3D キューブ (Javascript で作成)

投稿日: 1月 04, 2015

しばらくの間、私は Flash や Silverlight などのプラグインに頼らずに、通常の Web ブラウザーで 3D オブジェクトを作成する実験を行ってきました。ここで示す立方体は、以前に作成した別の 3D Web サイトから改変したものです。

ウェブGLブラウザで複雑な3Dモデルをレンダリングすることができます。しかし、ここではさまざまなツールを使って3Dオブジェクトを作成する方法を見ていきます。CSS3通常の 2D HTML 要素を取得して 3D 空間に投影できる変換コマンド。

通常の HTML 要素で 3D 変換を使用する利点は、 Iframeコンテンツ、画像、またはその他の HTML 要素などを 3D に投影して、非常に優れた効果を作成できることです。

ライブプレビュー

これは、画像とテキストを使用したキューブのサンプルです。マウスを使用してキューブを回転させることができます。

互換性

ここで示す 3D キューブは、他の 3D キューブで使用される単純な Rotate、Scale、Translate メソッドではなく、CSS3 Matrix Transforms を使用しているため、IE11 で適切に動作します。IE11 だけでなく、Firefox、Chrome、Safari、iOS の Mobile Safari でもテストされています。

HTML ソース

ここで重要なのは、「Cube.js」ファイルをインクルードすることです。また、JQuery 、それも含まれています。

ID がmy3DsurfaceのDivには 3D キューブが含まれます。data -facewidth="256"属性に注目してください。これはキューブの面のサイズを指定します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Css3 3D Sample</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/cube.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="my3Dsurface" class="js3dsurface" data-facewidth="256"></div>
</body>
</html>

Javascript ソース

次に、 Js3DSurfaceのインスタンスを作成し、キューブの各面に表示されるコンテンツの配列を渡します。この例では、画像とシンプルな HTML コンテンツを使用しています。Iframe、ビデオタグなどのより複雑な HTML を追加することもできます。

また、マウスを使用してキューブを回転できるように、3 つのイベントハンドラーも追加します。マウスの左ボタンを押したままマウスを動かすと、マウスの新しい X と Y 位置を渡してadjRotを呼び出します。

var cube;
var mouseisdown = false;

$(document).ready(function () {
    var faces = new Array();
    faces.push('<img src="images/manic-miner-willy.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<div class="plain"><h1>3D Cube!</h1><p>Some plain html content to be projected onto the side of the cube! Works in the latest versions of Chrome, Firefox, IE, Safari, Safari Mobile and other Html5 modern browsers.</div>');
    faces.push('<img src="images/sinclair-c5.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<img src="images/sinclair-c5.jpg" />');

    cube = new Js3DSurface("my3Dsurface", faces);

    cube._backSurface.addEventListener('mousemove', mousemove, false);
    document.body.addEventListener('mousedown', mousedown, false);
    document.body.addEventListener('mouseup', mouseup, false);
});

function mousedown(e) {
    mouseisdown = true;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }

    returnfalse;
}

function mouseup(e) {
    mouseisdown = false;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }
    returnfalse;
}

function mousemove(e) {
    if (mouseisdown) {
        var _off = $(cube._backSurface).offset();
        var x = e.clientX - _off.left;
        var y = e.clientY - _off.top;
        y += $(window).scrollTop();

        adjRot(x, y);
    }
}

function adjRot(x, y) {
    var w = $(cube._backSurface).width();
    var h = $(cube._backSurface).height();
    var step = 10;
    var ry = (((x - (w / 2)) / w) * step);
    var rx = (((y - (h / 2)) / h) * step);

    cube._cubes[0]._Torque._Y = ry;
    cube._cubes[0]._Torque._X = rx;
}

以下のリンクからサンプルコードを入手して、クールな 3D プロジェクト HTML キューブの作成を始めましょう。

ファイルのダウンロード

ファイルをダウンロードするには、以下のリンクをクリックしてください。

CSS3 の 3D キューブ: 3dcss3.zip (141.27kb)

すべてのファイルは、お客様の個人的なプロジェクトで使用するために、いかなる保証もなく現状のまま提供されます。許可なく再配布または販売することはできません。

HTML5 CSS3 3D キューブ (Javascript で作成)

ライブプレビュー

互換性

HTML ソース

Javascript ソース

ファイルのダウンロード

コメントを送信

最新ニュース