Three.jsでワイヤーフレームの3D球体を回転させてみる

HTML + CSS

まずはHTML。divに適当なIDを付与して、文字を入れたかったので入れてる。

HTML

<div id="view">
	<h1>Sphere Wireframe</h1>
</div>

CSSはdivに高さを設定する。
横幅は100%にしてます。

CSS

#view {
	color: #fff;
	width: 100%;
	height: 500px;
	text-align: center;
	background: #000;
	position: relative;
}
#view h1 {
	top: 50%;
	margin-top: -15px;
	position: absolute;
	width: 100%;
	text-align: center;
}

上半分だけが表示されている球体

JavaScriptをみてみましょう。

See the Pen Three.js Sphere Wireframe Animation 01 by webopixel (@webopixel) on CodePen.

JavaScript

window.addEventListener('DOMContentLoaded', init);

function init() {
    var container = document.getElementById( 'view' );
    document.body.appendChild( container );

    var width = container.clientWidth;
    var height = container.clientHeight;

    // レンダラーを作成
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height );
    container.appendChild( renderer.domElement );

    // シーンを作成
    var scene = new THREE.Scene();

    // カメラを作成
    var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.set(0, 100, 100);

    // オブジェクトを作成
    var geometry = new THREE.SphereGeometry( 100, 40, 40 );
    var material = new THREE.MeshPhongMaterial( {
        color: 0x000000,
        polygonOffset: true,
        polygonOffsetFactor: 1,
        polygonOffsetUnits: 1
    } );

    var mesh = new THREE.Mesh(geometry, material);
    scene.add( mesh );

    // ワイヤーフレーム
    var geo = new THREE.EdgesGeometry( mesh.geometry );
    var mat = new THREE.LineBasicMaterial( { color: 0x666666, linewidth: 2 } );
    var wireframe = new THREE.LineSegments( geo, mat );
    mesh.add( wireframe );

    var light = new THREE.AmbientLight( 0x404040, 1 );
    scene.add( light );

    // レンダリング
    renderer.render(scene, camera);

    // アニメーション実行
    animate();

    function animate() {
        requestAnimationFrame(animate);
        // オブジェクトを回転
        mesh.rotation.y += 0.001;
        // レンダリング
        renderer.render(scene, camera);
    }
}

4~8行目

要素のサイズを取得してレンダラーに適用しています。

19~20行目

カメラの位置です。ここを調節するだけで色々見え方が変わってきますので、色々やってみてください。

23~38行目

球体を作成してます。ワイヤーフレームにするオプションもあるのですが、裏面も表示されてしまうので、ワイヤーフレーム用のオブジェクトも作成しています。

白バージョン

先ほどとほとんど同じですが、白バックで黒ワイヤーの球体を右半分だけ表示してみます。

See the Pen Three.js Sphere Wireframe Animation 02 by webopixel (@webopixel) on CodePen.

JavaScript

window.addEventListener('DOMContentLoaded', init);

function init() {
    var container = document.getElementById( 'view' );
    document.body.appendChild( container );

    var width = container.clientWidth;
    var height = container.clientHeight;

    // レンダラーを作成
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height );
    renderer.setClearColor(0xffffff);
    container.appendChild( renderer.domElement );

    // シーンを作成
    var scene = new THREE.Scene();

    // カメラを作成
    var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.set(100, 0, 150);

    // オブジェクトを作成
    var geometry = new THREE.SphereGeometry( 100, 40, 40 );
    var material = new THREE.MeshPhongMaterial( {
        color : 0xffffff,
        specular : 0xffffff,
        emissive : 0xffffff,
        polygonOffset: true,
        polygonOffsetFactor: 1,
        polygonOffsetUnits: 1
    } );

    var mesh = new THREE.Mesh(geometry, material);
    scene.add( mesh );

    // ワイヤーフレーム
    var geo = new THREE.EdgesGeometry( mesh.geometry );
    var mat = new THREE.LineBasicMaterial( { color: 0xbbbbbb, linewidth: 2 } );
    var wireframe = new THREE.LineSegments( geo, mat );
    mesh.add( wireframe );

    var light = new THREE.AmbientLight( 0x404040, 1 );
    scene.add( light );

    // レンダリング
    renderer.render(scene, camera);

    // アニメーション実行
    animate();

    function animate() {
        requestAnimationFrame(animate);
        // オブジェクトを回転
        mesh.rotation.y += 0.001;
        // レンダリング
        renderer.render(scene, camera);
    }
}

以上、Three.jsの基本的な機能しか使ってませんが、3Dってだけでなんだか作り込んでる感が出てる感じがしませんか。

参考サイト：
最新版で学ぶThree.js入門 – 手軽にWebGLを扱える3Dライブラリ
three.js – Display wireframe and solid color – Stack Overflow