three.jsを試す - 2

OrbitControls(オービットコントロール)

サイトに3Dモデルを表示する試み②

静止していてるモデルをマウスで視点を変えて眺めるには:

前回のシーンにOrbitContolsを追加してマウスで色々な角度から眺められるようにします。

  • 左ドラッグ:回転
  • マウスホイールまたは中ドラッグ:縮小・拡大
  • 右ドラッグ:移動
<canvas id="myCanvas" style="width:100%;"></canvas>
<script src="/js/build/three.min.js"></script>
<script src="/js/examples/js/controls/OrbitControls.js"></script>
<script>
// ページの読み込みを待つ
window.addEventListener('load', main);

function main() {
    const canvas = document.querySelector('#myCanvas');
    const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
    renderer.setPixelRatio(2);
    const fov = 50;     // Field of View
    const aspect = 2;   // デフォルト
    const near = 0.1;
    const far = 500;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 3;

    // カメラコントロール
    const controls = new THREE.OrbitControls(camera, canvas);

    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 'whitesmoke' );

    // メッシュを作成
    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    const material = new THREE.MeshNormalMaterial();
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    tick();

    // 毎フレーム時に実行されるループイベント
    function tick() {
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
}
</script>

次はBlenderを使ってみます。

3D 

関連記事