Three.jsでXRを作ろう

はじめに

XRとは？

Three.jsとは？

準備

Python3をインストールする

エディタの用意

ターミナルを利用する練習

基礎の基礎

開発用フォルダの作成

基本となるファイルの作成

ページの表示

index.html について

program.js について

座標系について

動き回れるようにしよう

window.addEventListener("イベント名", 関数);

• マウスボタンが押され，
• 押されたままドラッグされ，
• 最後にマウスボタンが離される

const cameraContainer = new THREE.Object3D(); // コンテナを生み出す
cameraContainer.add(camera);// カメラをコンテナに入れる
cameraContainer.position.set(0, 0, 10);// コンテナの場所を移動する
scene.add(cameraContainer);// シーンにコンテナを追加

camera.position.set(0, 1.7, 0);// カメラの場所
camera.lookAt(0, 1.7, -1);// カメラの見る場所

// 前回のマウスの横の位置と，マウスを押しているかどうかのフラグを入れる変数
var pmouseX, mouseFlag;
// マウスボタンを押したときの処理
function moveStartFunc(e) {
  pmouseX = e.offsetX;// 前回のマウスの横の位置を入れておく
  mouseFlag = true;// マウスを押したフラグをたてる
}

// マウスボタンを離したときの処理
function moveEndFunc() {
  mouseFlag = false;// マウスを押したフラグを消す
}

// マウスドラッグ中の処理
function moveFunc(e) {
  if (mouseFlag) {// マウスが押されているなら
    var mouseX = e.offsetX;// 今のマウスの横方向の位置
    cameraContainer.rotation.y -= 0.001*(mouseX - pmouseX);// 前回との差をもとにY軸回りに回転
    pmouseX = mouseX;// 今の横の位置を，前回の横の位置にする (次回使うため)．
  }
}

window.addEventListener("mousedown", moveStartFunc);
window.addEventListener("mouseup", moveEndFunc);
window.addEventListener("mousemove", moveFunc);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  if (mouseFlag) {
    var r = cameraContainer.rotation.y;
    cameraContainer.position.x -= 0.02*Math.sin(r);
    cameraContainer.position.z -= 0.02*Math.cos(r);
  }
}

部屋を作ろう

部屋の作成

const room = new THREE.Mesh(
  new THREE.BoxGeometry(26,5,26),
  new THREE.MeshStandardMaterial({
    color: 0xdddddd,
    roughness: 0.1,
    side: THREE.DoubleSide,
  })
);
room.position.set(0, 3, 0);
scene.add(room);

ライトの調整

const alight = new THREE.AmbientLight(0xffffff, 0.2);

const plight = new THREE.PointLight(0xffffff, 1.0);

cameraContainer.position.x -= 0.05*Math.sin(r);
cameraContainer.position.z -= 0.05*Math.cos(r);

WebXRに対応しよう

importmapの修正

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.146.0/build/three.module.js",
      "vrbutton": "https://unpkg.com/three@0.146.0/examples/jsm/webxr/VRButton.js"
    }
  }
</script>

import * as THREE from 'three';
import { VRButton } from 'vrbutton';

var vrbutton = VRButton.createButton(renderer);
document.body.appendChild(vrbutton);

// レンダラの作成とサイズ調整
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas")
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.xr.enabled = true;// 追加

// お絵かきするループ(processingでいうところのdraw)
function animate() {
  //requestAnimationFrame(animate); // ここをコメントアウト
  renderer.render(scene, camera);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  if (mouseFlag) {
    var r = cameraContainer.rotation.y;
    cameraContainer.position.x -= 0.05*Math.sin(r);
    cameraContainer.position.z -= 0.05*Math.cos(r);
  }
}

//animate(); // ここをコメントアウト
renderer.setAnimationLoop(animate);// ここを追加

PCのIPアドレス:8000