Category: three.js

[VR] A-FrameでVR開発の雰囲気を体感しよう

– VRは、C+やC#で開発することが多い
– Unityを使う
– JSのAPIであるWebVRでVRヘッドセットの位置・向き・傾きや加速度などの情報を取得できる
– VRコンテンツをWebで作る場合、ThreeJSを採用するしてWebGLで作っていくことが多い
– A-Frameというフレームワークがある

早速A-Frameを使っていきましょう。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A-Frame</title>
	<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
	<a-scene>
		<a-box position="-0.5 4 -3" rotation="0 45 0" color="#ffaaaa"></a-box>
		<a-plane position="0 0 -4" rotation="-84 177 -78" width="6" height="6" color="#aaaaff"></a-plane>
		<a-sky color="#ffffee"></a-sky>
		<a-camera position="0 2 3.7"></a-camera>
	</a-scene>
</body>
</html>

dynamic-bodyとstatic-bodyを追加

<a-box dynamic-body position="-0.5 8 -3" rotation="0 45 0" color="#ffaaaa"></a-box>
		<a-plane static-body position="0 0 -4" rotation="-84 177 -78" width="6" height="6" color="#aaaaff"></a-plane>

文字を追加する
a-textは日本語対応していないので、以下のサイトでfontを作成する必要がある
https://msdf-bmfont.donmccurdy.com/

<a-scene>
		<a-box src="" dynamic-body position="-0.5 8 -3" rotation="0 45 0" color="#fff4ee"></a-box>
		<a-plane static-body position="0 0 -4" rotation="-84 177 -78" width="6" height="6" color="#aaaaff"></a-plane>
		<a-text position="-5 1 -3" scale="2 2 2" value="ストップ安" font="custom-msdf.json"
        font-image="custom-msdf.png" color="black" negate="false"></a-text>
		<a-sky color="#ffff"></a-sky>
		<a-camera position="0 2 3.7"></a-camera>
	</a-scene>

コンポーネントは色々あるみたい。
どっちかというと、触ってみたいのは拡張現実の方かな。

new THREE.Scene();

%e7%84%a1%e9%a1%8c

%e7%84%a1%e9%a1%8c

%e7%84%a1%e9%a1%8c

three.jsで作成しまています。なにかunityと似てると思ったら、WebGLという技術ですね。

https://threejs.org/

reference
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>threejs</title>
</head>
<body>
	<div id="stage"></div>
  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script>
  (function(){
    'use strict'

    var scene;
    var person;
    var head;
    var body;
    var box;
    var sphere1;
    var sphere2;
    var sphere3;
    var plane;
    var light;
    var ambient;
    var camera;
    var gridHelper;
    var axisHelper;
    var lightHelper;
    var renderer;
    var width = 500;
    var height = 250;
    var controls;
    var theta = 0;
    var shadowHelper;
  // scene stage
    scene = new THREE.Scene();

  // mesh -geometry, material
    box = new THREE.Mesh(
      new THREE.BoxGeometry(20, 20, 20),
      new THREE.MeshLambertMaterial({
        color: new THREE.Color(0xff0000)})
    );
    box.position.set(0, 0, 0);
    scene.add(box);

    plane = new THREE.Mesh(
      new THREE.PlaneGeometry(200, 200),
      new THREE.MeshLambertMaterial({
        color: new THREE.Color(0x0096d6), side: THREE.DoubleSide})
    );
    plane.position.set(0, -50, 0);
    plane.rotation.x = 90 * Math.PI/180;
    scene.add(plane);


    // light
    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 100, 30);
    scene.add(light);
    // ambient
    ambient = new THREE.AmbientLight(0x404040);
    scene.add(ambient);

  // camera
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(200, 100, 300);
    camera.lookAt(scene.position);

    // helper
    gridHelper = new THREE.GridHelper(200, 50);
    scene.add(gridHelper);
    axisHelper = new THREE.AxisHelper(1000);
    scene.add(axisHelper);
    lightHelper = new THREE.DirectionalLightHelper(light, 20);
    scene.add(lightHelper);

    // controls
    controls = new THREE.OrbitControls(camera);
    // controls.autoRotate = true;

  // render
  renderer = new THREE.WebGLRenderer({ antialias: true});
  renderer.setSize(width, height);
  renderer.setClearColor(0xefefef);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);

  // shadow
  renderer.shadowMap.enabled = true;
  light.castShadow = true;
  light.shadow.camera.left = -200;
  light.shadow.camera.right = 200;
  light.shadow.camera.top = 200;
  light.shadow.camera.bottom = -200;
  shadowHelper = new THREE.CameraHelper(light.shadow.camera);
  scene.add(shadowHelper);
  box.castShadow = true;
  plane.receiveShadow = true;

  function render(){
    requestAnimationFrame(render);

    controls.update();
    renderer.render(scene, camera);
  }
  render();

  })();
  </script>
</body>
</html>