いよいよ本番(斜め上)活用例から見るwebvrの使いドコロ @jsおじさん
TRANSCRIPT
![Page 1: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/1.jpg)
![Page 2: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/2.jpg)
![Page 4: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/4.jpg)
![Page 5: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/5.jpg)
![Page 6: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/6.jpg)
![Page 7: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/7.jpg)
![Page 8: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/8.jpg)
![Page 10: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/10.jpg)
![Page 11: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/11.jpg)
![Page 12: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/12.jpg)
![Page 13: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/13.jpg)
![Page 14: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/14.jpg)
![Page 15: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/15.jpg)
![Page 16: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/16.jpg)
![Page 17: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/17.jpg)
![Page 18: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/18.jpg)
![Page 20: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/20.jpg)
モバイルやPCなどの 垣根なくコンテンツを 提供する必要がある
![Page 21: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/21.jpg)
モバイル?
![Page 22: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/22.jpg)
最近ではこうしたゴーグル系も色々出てきた
![Page 23: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/23.jpg)
amazonのラインナップ
![Page 24: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/24.jpg)
厳密には
![Page 25: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/25.jpg)
WebVRではない
![Page 26: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/26.jpg)
けどジャイロセンサーを 使うことでだいぶそれっぽく見える
![Page 28: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/28.jpg)
![Page 29: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/29.jpg)
でもお高いんでしょ?
![Page 30: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/30.jpg)
(function () { 'use strict';
var width = window.innerWidth; var height = window.innerHeight;
// カメラ var camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000); camera.position.set(0, 10, 20); camera.lookAt(new THREE.Vector3(0, 0, 0))
// レンダラ var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width, height); renderer.setViewport(0, 0, width, height);
document.body.appendChild(renderer.domElement);
// シーン var scene = new THREE.Scene();
// キューブ var material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var geometory = new THREE.BoxGeometry(10, 10, 10); var mesh = new THREE.Mesh(geometory, material); mesh.position.set(0, -30, -30);
// ライト var light = new THREE.DirectionalLight(); light.position.set(0, 100, 100);
scene.add(light); scene.add(mesh);
// VRControls var controls = new THREE.VRControls(camera);
// VREffect var effect = new THREE.VREffect(renderer); effect.setSize(width, height);
// アニメーションループ (function loop() { mesh.rotation.y += 0.01; controls.update(); effect.render(scene, camera); requestAnimationFrame(loop); }());
// リサイズ window.addEventListener('resize', function () { width = window.innerWidth; height = window.innerHeight; effect.setSize(width, height); renderer.setSize(width, height); renderer.setViewport(0, 0, width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }, false);
// ボタンクリック document.getElementById('btn').addEventListener('click', function () { effect.setFullScreen(true); }, false);
}());
ちっさ
![Page 32: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/32.jpg)
Advent Calendarで WebVR入門の連載書いてるので
ぜひ読んでください♪http://qiita.com/edo_m18/items/793ef4d96b41adcf3db3
![Page 33: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/33.jpg)
![Page 34: いよいよ本番(斜め上)活用例から見るWebVRの使いドコロ @JSおじさん](https://reader031.vdocuments.mx/reader031/viewer/2022022203/5871b10d1a28abda6a8b69c3/html5/thumbnails/34.jpg)