Criando Modelo 3D HTML com X3DOM
Six6 :: Programação :: Web Programação
Página 1 de 1
Criando Modelo 3D HTML com X3DOM
por ThalysWebDesigner Dom Mar 11, 2012 8:45 pm
Tutorial Inicial
Para iniciar esse tutorial necessitamos importar os arquivos principais do framework x3dom.css e x3dom.js para que nossa página tenha acesso a estilos e função. Copie o código a baixo e cole entre as tags <head></head>.
<link rel="stylesheet" type="text/css"
href="http://www.x3dom.org/x3dom/release/x3dom.css">
</link>
<script type="text/javascript"
src="http://www.x3dom.org/x3dom/release/x3dom.js">
</script>
Adicione o script Javascript na sua página HTML em qualquer lugar, mas o mais adequado é nas tags <head></head>.
<script type="text/javascript">
var zoomed = false;
function toggle(button) {
var new_size;
var x3d_element;
x3d_element = document.getElementById("the_element");
title = document.getElementById("title")
body = document.getElementById("body")
if (zoomed) {
new_size = "50%";
button.innerHTML = "Zoom";
title.style.display = "block"
body.style.padding = "10px"
} else {
new_size = "100%";
button.innerHTML = "Unzoom";
title.style.display = "none"
body.style.padding = "0"
}
zoomed = !zoomed;
x3d_element.style.width = new_size;
x3d_element.style.height = new_size;
}
</script>
Agora adicione o código CSS na página HTML em qualquer lugar, mas o mais adequado é nas tags <head></head>.
<style>
#the_element {
width: 50%;
height: 50%;
border: none;
display: block;
position:relative;
background:#000 url(http://www.x3dom.org/x3dom/example/texture/solarSystem/starsbg.png);
}
#toggler {
position: absolute;
float: left;
z-index: 1;
top: 0px;
left: 0px;
width: 10em;
height: 2em;
border: none;
background-color: #202021;
color: #ccc;
}
#toggler:hover {
background-color:blue;
}
</style>
E por fim o código HTML que deve estár entre as tags <body></body>. A tag <x3d></x3d> não é própria do HTML, porém ele é interpretado graças ao x3dom.js. Criamos uma cena dentro dela e colocamos os objetos através da tag <transform> com sua posição declarada no atributo translation. No atributo translation colocamos 3 números referentes aos eixos X, Y, Z. O primeiro número é o X, o segundo é referente ao Y e o último o Z. A tag <button> serve para dar zoom na cena com uma função em javascript.
<x3d id="the_element" showlog="false" showstat="false">
<button id="toggler" onclick="toggle(this); return false;">Zoom</button>
<scene>
<transform translation="0 0 0">
<shape>
<appearance>
<material diffuseColor="red"></material>
</appearance>
<box></box>
</shape>
</transform>
<transform translation="3 0 -5">
<shape>
<appearance>
<material diffuseColor="blue"></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</scene>
</x3d>
<!-- Cordenadas(X Y Z)-->
Na tag <appearance> declaramos o formato da imagem, cor e todos as características do objeto em questão.
É importante ressaltar que você só verá essa imagem 3D se o seu computador tiver suporte a webGL. Outro detalhe importante. É possível dar zoom com scroll do mouse e mover o ambiente em torno do eixo central graças ao próprio framework, sem a necessidade de acrescentar mais códigos no HTML.
É importante ressaltar que você só verá essa imagem 3D se o seu computador tiver suporte a webGL. Outro detalhe importante. É possível dar zoom com scroll do mouse e mover o ambiente em torno do eixo central graças ao próprio framework, sem a necessidade de acrescentar mais códigos no HTML.
ThalysWebDesigner- Coordenador
- Mensagens : 3
Data de inscrição : 11/03/2012
Six6 :: Programação :: Web Programação
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|