forked from WebRTCGame/flocking
-
Notifications
You must be signed in to change notification settings - Fork 0
/
elementover3d.html
102 lines (83 loc) · 3.56 KB
/
elementover3d.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
<!DOCTYPE html>
<script src='threejs/three.min.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'>
<script>
var renderer = new THREE.WebGLRenderer();
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;
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;
});
var element = document.createElement('div');
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.style.backgroundColor = "red";
element.innerHTML = "fun times";
element.frameBorder = '0';
var cssPosition = function(object3d, camera, renderer) {
object3d.updateMatrixWorld();
var vector = new THREE.Vector3().setFromMatrixPosition(object3d.matrixWorld).project(camera);
return {
x: ((vector.x / 2 + 0.5)) * renderer.domElement.width,
y: (1 - (vector.y / 2 + 0.5)) * renderer.domElement.height
};
};
// move it at the object position
onRenderFcts.push(function(delta, now) {
var position = cssPosition(mesh, camera, renderer);
element.style.left = (position.x - element.offsetWidth / 2) + 'px';
element.style.top = (position.y - 70 - element.offsetHeight / 2) + 'px';
});
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) {
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);
});
onRenderFcts.push(function() {
renderer.render(scene, camera);
})
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>