This repository has been archived by the owner on Aug 7, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
boilerplate_threejs.html
151 lines (124 loc) · 4.62 KB
/
boilerplate_threejs.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/third_party/three.js/three.min.js"></script>
<script src='js/third_party/three.js/OrbitControls.js'></script>
<script src="js/artoolkit.debug.js"></script>
<script src="js/artoolkit.api.js"></script>
<body><script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
var video = document.createElement('video');
// video.style.position = 'absolute'
document.body.appendChild(video)
video.src = 'Data/output_4.ogg';
video.autoplay = true;
video.webkitPlaysinline = true;
video.controls = false;
video.loop = true;
video.width = 640;
video.height = 480;
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( video.width, video.height );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.left = '8px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Comments
//////////////////////////////////////////////////////////////////////////////////
// Create a camera and a marker root object for your Three.js scene.
var camera = new THREE.Camera();
camera.matrixAutoUpdate = false;
scene.add(camera);
var arController = null;
// load camera parameters
var cameraParameters = new ARCameraParam();
cameraParameters.onload = function() {
arController = new ARController(video.width, video.height, cameraParameters);
arController.debugSetup();
var cameraMatrix = arController.getCameraMatrix();
camera.projectionMatrix.elements.set(cameraMatrix);
};
cameraParameters.load('Data/camera_para.dat');
// create the marker Root
var markerRoot = new THREE.Object3D();
markerRoot.markerMatrix = new Float64Array(12);
markerRoot.matrixAutoUpdate = false;
markerRoot.visible = false
scene.add(markerRoot);
onRenderFcts.push(function(){
if (!arController) return;
arController.detectMarker(video);
arController.debugDraw();
// update markerRoot with the found markers
var markerNum = arController.getMarkerNum();
if (markerNum > 0) {
if( markerRoot.visible === false ) {
arController.getTransMatSquare(0 /* Marker index */, 1 /* Marker width */, markerRoot.markerMatrix);
} else {
arController.getTransMatSquareCont(0, 1, markerRoot.markerMatrix, markerRoot.markerMatrix);
}
arController.transMatToGLMat(markerRoot.markerMatrix, markerRoot.matrix.elements);
}
// objects visible IIF there is a marker
if (markerNum > 0) {
markerRoot.visible = true;
} else {
markerRoot.visible = false;
}
})
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.z = geometry.parameters.height/2
markerRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,32,32);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.z = 0.5
markerRoot.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>