-
Notifications
You must be signed in to change notification settings - Fork 18
/
example2.html
88 lines (75 loc) · 2.6 KB
/
example2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<body>
<script src="three.js"></script>
<script>
let container, camera, scene, renderer, cubeMesh, session;
async function _enterXr() {
session = await navigator.xr.requestSession({
exclusive: true,
});
// console.log('request first frame');
session.requestAnimationFrame((timestamp, frame) => {
renderer.vr.setSession(session, {
frameOfReferenceType: 'stage',
});
const pose = frame.getViewerPose();
const viewport = session.baseLayer.getViewport(pose.views[0]);
// const width = viewport.width;
const height = viewport.height;
const fullWidth = (() => {
let result = 0;
for (let i = 0; i < pose.views.length; i++) {
result += session.baseLayer.getViewport(pose.views[i]).width;
}
return result;
})();
renderer.setSize(fullWidth, height);
console.log('loaded child in XR');
});
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
scene = new THREE.Scene();
// scene.background = new THREE.Color(0x3B3961);
const ambientLight = new THREE.AmbientLight(0x808080);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 4);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
cubeMesh = (() => {
const geometry = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshPhongMaterial({
color: 0x00FF000,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -1;
mesh.position.x = 0.1/4;
mesh.position.y = 0.1/4;
mesh.rotation.order = 'YXZ';
mesh.frustumCulled = false;
return mesh;
})();
scene.add(cubeMesh);
renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
_enterXr();
}
function animate() {
/* renderer.state.reset();
camera.fov = fov;
camera.aspect = window.innerWidth / window.innerHeight; */
cubeMesh.rotation.x += 0.02;
cubeMesh.rotation.y += 0.02;
renderer.render(scene, camera);
camera.updateProjectionMatrix();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>