Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
147 lines (124 sloc) 4.27 KB
<html>
<head>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="three.js"></script>
<script src="inflate.min.js"></script>
<script src="FBXLoader.js"></script>
<script>
let model;
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 1);
camera.lookAt(new THREE.Vector3());
scene = new THREE.Scene();
scene.matrixAutoUpdate = false;
// scene.background = new THREE.Color(0x3B3961);
const ambientLight = new THREE.AmbientLight(0x808080);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
/* (() => {
const geometry = new THREE.BoxBufferGeometry(0.1, 1, 0.1);
const material = new THREE.MeshPhongMaterial({
color: 0xE91E63,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 0.5;
mesh.frustumCuled = false;
scene.add(mesh);
})();
(() => {
const geometry = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshPhongMaterial({
color: 0x4CAF50,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 1 + 0.1;
mesh.frustumCulled = false;
scene.add(mesh);
})();
(() => {
const geometry = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshPhongMaterial({
color: 0x29B6F6,
});
const mesh = new THREE.Mesh(geometry, material);
// mesh.position.y = 0.1;
// mesh.position.z = -0.5;
mesh.frustumCulled = false;
scene.add(mesh);
})(); */
// console.log('load model 1');
const loader = new THREE.FBXLoader();
loader.load('exokit.fbx', object => {
// console.log('load model 2', !!object);
/* object.quaternion.setFromUnitVectors(
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0.5, 0, 1).normalize()
); */
object.scale.multiplyScalar(0.001);
object.matrix.compose(object.position, object.quaternion, object.scale);
object.updateMatrixWorld(true);
// object.frustumCulled = false;
object.traverse(child => {
child.frustumCulled = false;
});
// console.log(object);
model = object;
scene.add(object);
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.setAnimationLoop(animate);
}
function animate() {
if (model) {
const animationTime = 4000;
const f = ((Date.now() % animationTime) / animationTime) * (Math.PI * 2);
model.quaternion.setFromUnitVectors(
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(Math.cos(f), 0, Math.sin(f)).normalize()
);
model.updateMatrixWorld();
}
renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
}
init();
(async () => {
console.log('request device');
const display = await navigator.xr.requestDevice();
console.log('request session');
const session = await display.requestSession({
exclusive: true,
});
display.session = session;
console.log('request first frame');
session.requestAnimationFrame((timestamp, frame) => {
renderer.vr.setSession(session, {
frameOfReferenceType: 'stage',
});
const viewport = session.baseLayer.getViewport(frame.views[0]);
const width = viewport.width;
const height = viewport.height;
renderer.setSize(width * 2, height);
renderer.setAnimationLoop(null);
renderer.vr.enabled = true;
renderer.vr.setDevice(display);
renderer.vr.setAnimationLoop(animate);
console.log('running!');
});
})();
</script>
</body>
</html>
You can’t perform that action at this time.