-
Notifications
You must be signed in to change notification settings - Fork 0
/
cubo.html
136 lines (109 loc) · 5.35 KB
/
cubo.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
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="UTF-8">
<title>ℍ - Quatérnios</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/highlight.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="h-100" id="topo">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">ℍ - Quatérnios</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="gimbal_lock.html">Gimbal Lock<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="threejs.html">Three.js</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Cenas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="cubo.html">Cubo</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="rotacao.html">Rotação da Lua</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="espelho.html">Espelho</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="luzes.html">Luzes</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="panorama.html">Panorama</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="webcam.html">Webcam</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="referencias.html">Referências</a>
</li>
</ul>
</div>
</nav>
<div id="container"></div>
<pre>
<code class="javascript hljs">
/* CÓDIGO */
// criar uma cena
var scene = new THREE.Scene();
// criar uma nova câmera a partir dos seguintes parâmetros
// 1º parâmetro: campo de visão, extensão da cena em graus
// 2° parâmetro: resolução da câmera
// 3° parâmetro: plano de recorte próximo
// 4° parâmetro: plano de recorte distante
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// criar um renderizador WebGL
var renderer = new THREE.WebGLRenderer();
// configurar resolução do renderizador (largura e altura são as dimensões da janela do navegador)
renderer.setSize(window.innerWidth, window.innerHeight);
// adicionar o renderizador ao elemento da página HTML que possui id="container"
// o renderizador usa um elemento canvas para exibir a cena
container.appendChild(renderer.domElement);
// criar uma forma geométrica com pontos (vértices) e preenchimento (faces)
var geometry = new THREE.BoxGeometry(1, 1, 1);
// criar um material para colorir o objeto
var material = new THREE.MeshBasicMaterial({
color: 0x00ff80,
});
// criar um cubo com forma geométrica e material
var cube = new THREE.Mesh(geometry, material);
// adicionar o cubo a cena
scene.add(cube);
// posicionar a câmera
camera.position.z = 5;
// criar função para rotacionar o cubo continuamente (loop)
// o objeto é rotacionado 60 vezes por segundo após a renderização da cena
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
// animar a cena
animate();
</code>
</pre>
<h4 class="text-center mx-auto pb-4" style="width: 50px;">
<a class="badge badge-dark p-4" href="#topo">
▲
</a>
</h4>
<!-- Scripts -->
<script src="js/lib/three/three.js"></script>
<script src="js/cubo.js"></script>
<!-- Scripts Bootstrap -->
<script src="js/lib/jquery-3.5.1.slim.min.js"></script>
<script src="js/lib/popper.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<!-- Scripts Highlight -->
<script src="js/lib/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>