-
Notifications
You must be signed in to change notification settings - Fork 6
/
basic.html
114 lines (98 loc) · 4.1 KB
/
basic.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
<!DOCTYPE html>
<script src='vendor/three.js/build/three.min.js'></script>
<script src='vendor/three.js/examples/js/renderers/Projector.js'></script>
<script src='../threex.objcoord.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script>
var renderer = new THREE.WebGLRenderer();
// to test .devicePixelRatio
renderer.setPixelRatio(1)
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var onRenderFcts= [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 3;
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
var geometry = new THREE.SphereGeometry(0.1);
var material = new THREE.MeshNormalMaterial();
var meshParent = new THREE.Mesh( geometry, material );
meshParent.position.x= 0.5;
scene.add( meshParent );
var geometry = new THREE.SphereGeometry(0.1);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 1;
meshParent.add( mesh );
onRenderFcts.push(function(delta, now){
var angle = now * Math.PI * 2 * 0.4
mesh.position.x = Math.cos(angle)*0.6
mesh.position.y = Math.sin(angle)*0.3
mesh.position.z = Math.sin(angle*2)*0.3
})
// Create dom element
var element = document.createElement('div')
document.body.appendChild(element)
element.innerHTML = 'threex'
element.style.position = 'absolute'
var element = document.createElement('iframe')
document.body.appendChild(element)
element.src = 'http://githubbadge.appspot.com/jeromeetienne'
element.style.border = '0'
element.style.height = '142px';
element.style.width = '200px';
element.style.overflow = 'hidden'
element.style.position = 'absolute'
element.frameBorder = '0'
// move it at the object position
onRenderFcts.push(function(delta, now){
var position = THREEx.ObjCoord.cssPosition(mesh, camera,renderer)
var boundingRect= element.getBoundingClientRect()
element.style.left = (position.x - boundingRect.width/2) +'px';
element.style.top = (position.y - boundingRect.height/2 - 70)+'px';
})
// // log to debug
// onRenderFcts.push(function(delta, now){
// console.log('------------------------')
// console.log('world position', THREEx.ObjCoord.worldPosition(mesh))
// console.log('screen position', THREEx.ObjCoord.screenPosition(mesh, camera))
// console.log('css position', THREEx.ObjCoord.cssPosition(mesh, camera,renderer))
// })
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls
//////////////////////////////////////////////////////////////////////////////////
var mouse = {x : 0, y : 0}
document.addEventListener('mousemove', function(event){
mouse.x = (event.clientX / window.innerWidth ) - 0.5
mouse.y = (event.clientY / window.innerHeight) - 0.5
}, false)
onRenderFcts.push(function(delta, now){
return
camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner
//////////////////////////////////////////////////////////////////////////////////
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>