three.js のスニペット集

このページでは、three.js のスニペットをまとめています。

記載時点の three.js のバージョンは 0.86.0 (r86) です。他のバージョンでは動作しない場合があります。
webpack を使用する場合は「webpack + three.js を使用する例」を参考にしてください。

ベース

javaScript

var container;
var camera, controls, scene, renderer;

init();
animate();

function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );

    // レンダラ
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xcccccc );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    // カメラ
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 500;

    // 場面
    scene = new THREE.Scene();

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
    renderer.render( scene, camera );
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

オブジェクト

※ scene = new THREE.Scene(); のあとに記載します。

ライト (指向性)

参考: three.js docs - DirectionalLight (英語)

    // ライト
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );

箱

参考: three.js docs - BoxGeometry (英語)

    // 箱
    var cube = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
    cube.position.y = 100;
    scene.add( cube );

球体

参考: three.js docs - SphereGeometry (英語)

    // 球体
    var sphere = new THREE.Mesh( new THREE.SphereGeometry( 50, 32, 32 ), new THREE.MeshLambertMaterial( {color: 0xffff00} ) );
    sphere.position.y = 200;
    scene.add( sphere );

グリッド

参考: three.js docs - GridHelper (英語)

    // グリッド
    var gridHelper = new THREE.GridHelper( 300, 10 );
    scene.add( gridHelper );

コントロール

カメラ制御 (OrbitControls)

参考: three.js webgl - orbit controls (英語)

// webpack.config.js (resolve.alias 内。webpack 使用時)
            'three/OrbitControls': path.join(__dirname, 'node_modules/three/examples/js/controls/OrbitControls.js'),

// コード先頭 (webpack 使用時)
import 'three/OrbitControls';

// init() 内
    // カメラ制御
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;

// render() 内
    controls.update();

カメラ制御 (TracballControls)

参考: three.js webgl - trackball controls (英語)

// webpack.config.js (resolve.alias 内。webpack 使用時)
            'three/TrackballControls': path.join(__dirname, 'node_modules/three/examples/js/controls/TrackballControls.js'),

// コード先頭 (webpack 使用時)
import 'three/TrackballControls';

// init() 内
    // カメラ制御
    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

オブジェクトのドラッグ

参考: three.js webgl - draggable cubes (英語)

// webpack.config.js (resolve.alias 内。webpack 使用時)
            'three/DragControls': path.join(__dirname, 'node_modules/three/examples/js/controls/DragControls.js'),

// コード先頭 (webpack 使用時)
import 'three/DragControls';

// init() 内
// ※ objects は、箱や球体などのオブジェクトが格納された配列にします。
// ※ controlsが無い場合は dragstart, dragend は不要です。
    var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
    dragControls.addEventListener( 'dragstart', function ( event ) { controls.enabled = false; } );
    dragControls.addEventListener( 'dragend', function ( event ) { controls.enabled = true; } );

マウスピッキング

参考: three.js docs - Raycaster (英語)

// init() の前
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// init() 内など
    window.addEventListener( 'mousemove', onMouseMove, false );

// init() の後など
function onMouseMove( event ) {
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

// render() 内
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    if (intersects.length > 0) {
        var object = intersects[ 0 ].object; // ピックされた最初のオブジェクト
    }