/
canvas.js
120 lines (86 loc) · 3.28 KB
/
canvas.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
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
var camera, cena, renderer, cubo;
// alvo da rotação no eixo X e Y
var targetRotationX = 0;
var targetRotationY = 0;
// alvo da rotação no eixo X e Y quando o mouse estiver pressionado
var targetRotationOnMouseDownX = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseY = 0;
var mouseXOnMouseDown = 0;
var mouseYOnMouseDown = 0;
var canvasWidth = 495;
var canvasHeight = 334;
var canvasHalfX = canvasWidth / 2;
var canvasHalfY = canvasHeight / 2;
init();
animate();
function init () {
var container = document.getElementById("canvas-container");
// criar a camera e define seu posicionamento
camera = new THREE.Camera(70, canvasWidth / canvasHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
// armazena as cores das faces
var arrayCor, materiais = new Array();
arrayCor = [0x0092BF, 0x0092BF, 0xd9d9d9, 0xd9d9d9, 0xF14A29, 0xF14A29];
// aplica as cores em cada uma das faces
for (var i = 0; i < 6; i++) {
materiais.push( [new THREE.MeshLambertMaterial( { color: arrayCor[i] } ) ] );
}
// mesh é um grafo tridimensional
var mesh = new THREE.Cube(250, 250, 250, 1, 1, 1, materiais);
// cria o cubo e seta os materiais relativos a ele
cubo = new THREE.Mesh(mesh, new THREE.MeshFaceMaterial() );
cubo.position.y = 150;
// cria a cena e adiciona o cubo nela
cena = new THREE.Scene();
cena.addObject(cubo);
// cria o renderizador
renderer = new THREE.CanvasRenderer();
renderer.setSize(canvasWidth, canvasHeight);
container.appendChild( renderer.domElement );
// adiciono os eventos no container
container.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown (event) {
event.preventDefault();
// adiciona os eventos
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('mouseup', onMouseUp, false);
document.addEventListener('mouseout', onMouseOut, false);
// posicao do mouse no eixo X e Y quando o mouse estiver clicado
mouseXOnMouseDown = event.clientX - canvasHalfX;
mouseYOnMouseDown = event.clientY - canvasHalfY;
targetRotationOnMouseDownX = targetRotationX;
targetRotationOnMouseDownY = targetRotationY;
}
function onMouseMove (event) {
// posicao do mouse no eixo X e Y quando o mouse estiver movendo
mouseX = event.clientX - canvasHalfX;
mouseY = event.clientY - canvasHalfY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;
targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
}
function onMouseUp (event) {
// removendo os eventos quando o mouse nao estiver clicado
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
dmateriaisoveEventListener('mouseout', onMouseOut, false);
}
function onMouseOut (event) {
// removendo os eventos quando o mouse deixar a tela
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
document.removeEventListener('mouseout', onMouseOut, false);
}
function animate () {
requestAnimationFrame(animate);
render();
}
function render () {
cubo.rotation.y += (targetRotationX - cubo.rotation.y) * 0.05;
cubo.rotation.x += (targetRotationY - cubo.rotation.x) * 0.05;
renderer.render(cena, camera);
}