-
Notifications
You must be signed in to change notification settings - Fork 0
/
main_AR.js
89 lines (77 loc) · 2.58 KB
/
main_AR.js
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
89
import * as THREE from "./three_js/three.module.js"; // Three js import
import { GLTFLoader } from "./three_js/GLTFLoader.js"; // model loader import
import { DRACOLoader } from "./three_js/DRACOLoader.js"; // decoder import
import { ARButton } from "./three_js/ARButton.js"; // AR button import
//Create scene
let scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
10000
);
//create renderer
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true; // Virtual reality content enabled
document.body.appendChild(renderer.domElement);
document.body.appendChild(ARButton.createButton(renderer)); // Add AR button to the main page
// Hemisphere Light
let hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 0, 0);
scene.add(hemiLight);
// Directional Light
let dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(0, 0, 0);
scene.add(dirLight);
// Ambient Light
let ambientLight = new THREE.AmbientLight(0xfffff0);
ambientLight.position.set(0, 0, 0);
scene.add(ambientLight);
// On Select
let onSelect = () => {
let loader = new GLTFLoader(); // Model Loader
let dracoLoader = new DRACOLoader(); // decoder
loader.setDRACOLoader(dracoLoader);
let mesh;
loader.load(
"./model/gisday_rysy.gltf", // model path
function (gltf) {
mesh = gltf.scene;
mesh.material = new THREE.MeshLambertMaterial();
mesh.material.flatShading = true;
mesh.material.metalness = 0;
mesh.position.set(0, -10, -20).applyMatrix4(controller.matrixWorld);
mesh.quaternion.setFromRotationMatrix(controller.matrixWorld);
mesh.scale.set(0.01, 0.01, 0.01);
mesh.rotateY(90);
scene.add(mesh);
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.log("An error happened");
}
);
};
// VR AR controller
let controller = renderer.xr.getController(0);
controller.addEventListener("select", onSelect);
scene.add(controller);
// window scaling
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener("resize", onWindowResize, false);
//rendering in the scene
function animate() {
renderer.setAnimationLoop(render);
}
function render() {
renderer.render(scene, camera);
}
animate();