viernes, 23 de septiembre de 2022

Jugando con Threejs

Three.js es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados por computadora en 3D en un navegador Web y puede ser utilizada en conjunción con el elemento canvas deHTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.

 

En el siguiente vídeo se puede ver una pequeña demostración de las cosas tan interesantes que podemos hacer con esta potente librería. 

Simplemente creé una superficie con una textura de madera sobre la que se apoya una caja “una especie de muro” al que podemos ir cambiando la textura seleccionando estas de unas pequeñas esferas que se muestran en la Interfaz y . Gracias al uso de OrbitControls podemos rotar y desplazarnos en los 3 ejes. 

 

Este sencillo ejemplo lo único que pretende es poner de manifiesto la potencia y la versatilidad de ThreeJs que nos permite introducir gráficos 3D en un navegador e interactuar con ellos. 

Dejo el código en mi github  a continuación 




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Room </title>
</head>
<body>
<div id="materials">
<input id="1" type="image" src="./assets/concreto.png" width="100px" height="100px" name="Concreto">
<input id="2" type="image" src="./assets/madera.png" width="100px" height="100px">
<input id="3" type="image" src="./assets/metal.png" width="100px" height="100px">
<input id="4" type="image" src="./assets/cristal.png" width="100px" height="100px">
<span><p class="green">Author: Juan José Miguel López | 2020 | Simulador de texturas para visualización Arquitectónica</p></span>
</div>
<!--Librerías JS-->
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
//EXP-SLK_V.0.0.1 - mezclando orbit controls + dat Gui
//___________________VARIABLES_____________________________________
var scene, renderer, camera;
var cube;
var controls;
let mat;
function init(){
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x3a3a3a, 1.0); //establece el color ambiente y la opacidad
renderer.physicallyCorrectLights = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio( window.devicePixelRatio );
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
//__________________CARGA DE TEXTURAS________________________
var texturaMadera = THREE.ImageUtils.loadTexture('./assets/suelo.png',{},function(){ renderer.render(scene, camera);});texturaMadera.needsUpdate = true;
var material4 = new THREE.MeshPhongMaterial(
{
color: 0x90abed,
map: texturaMadera,
transparent: true,
opacity:1});
//______________________PLANO________________________________________
var plano = new THREE.PlaneGeometry(40, 40);
var materialplano = new THREE.MeshLambertMaterial({color: 0xcccccc});
suelo = new THREE.Mesh (plano, material4);
suelo.receiveShadow = true;
suelo.rotation.x = -1.3;
suelo.position.y = 0;
suelo.position.z = 0;
scene.add(suelo);
//________________________CUBO_________________________________________
cube = new THREE.BoxGeometry(25, 1, 8);
var materialcubo = new THREE.MeshLambertMaterial({color: 0x90abed,});
caja = new THREE.Mesh(cube, materialcubo);
caja.castshadow = true;
caja.rotation.x = -1.3;
caja.position.x = 1;
caja.position.y = 4;
caja.position.z = 0;
caja.castShadow = true;
scene.add(caja);
//_______________________CAMARAS____________________________________
camera = new THREE.PerspectiveCamera (45, width/height, 1,1000);
camera.position.y = 16;
camera.position.z =30;
//camera.lookAt(new THREE.Vector3(0,0,0));
camera.lookAt(scene.position);
//______________________CONTROLES ORBITALES________________________
controls = new THREE.OrbitControls (camera, renderer.domElement);
//_____________________________LUCES________________________________
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);
var sol = new THREE.DirectionalLight(0xffffff,4,100,2);
sol.position.set(50,10,20);
sol.castShadow = true;
scene.add(sol);
}
function animate(){
requestAnimationFrame( animate );
//renderer.render(backgroundScene, backgroundCamera); <--SOLO PARA IMAGEN DE FONDO
renderer.render(scene, camera);
window.addEventListener('resize', reajustarDimensiones, false);
}
//_____________________________FUNCIONES_____________________________________________
function reajustarDimensiones(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function queMaterial(){
document.getElementById("1").addEventListener("click", function(){
//console.log(this.id);
scene.remove(caja);
var texturaApli1 = THREE.ImageUtils.loadTexture('./assets/cemento.jpg',{},function(){ renderer.render(scene, camera);});texturaApli1.needsUpdate = true;
var materialApli1 = new THREE.MeshPhongMaterial(
{
color: 0x90abed,
map: texturaApli1,
transparent: true,
opacity:1});
var cubo = new THREE.BoxGeometry(25, 1, 8);
caja = new THREE.Mesh(cubo, materialApli1);
caja.castshadow = true;
caja.rotation.x = -1.3;
caja.position.x = 1;
caja.position.y = 4;
caja.position.z = 0;
caja.castShadow = true;
scene.remove(caja);
scene.add(caja);
});
document.getElementById("2").addEventListener("click", function(){
//console.log(this.id);
scene.remove(caja);
var texturaApli2 = THREE.ImageUtils.loadTexture('./assets/abeto.jpg',{},function(){ renderer.render(scene, camera);});texturaApli2.needsUpdate = true;
var materialApli2 = new THREE.MeshPhongMaterial(
{
color: 0x90abed,
map: texturaApli2,
transparent: true,
opacity:1});
var cubo = new THREE.BoxGeometry(25, 1, 8);
caja = new THREE.Mesh(cubo, materialApli2);
caja.castshadow = true;
caja.rotation.x = -1.3;
caja.position.x = 1;
caja.position.y = 4;
caja.position.z = 0;
caja.castShadow = true;
scene.remove(caja);
scene.add(caja);
});
document.getElementById("3").addEventListener("click", function(){
//console.log(this.id);
scene.remove(caja);
var texturaApli3 = THREE.ImageUtils.loadTexture('./assets/metal.jpg',{},function(){ renderer.render(scene, camera);});texturaApli3.needsUpdate = true;
var materialApli3 = new THREE.MeshPhongMaterial(
{
color: 0x90abed,
map: texturaApli3,
transparent: true,
opacity:1});
var cubo = new THREE.BoxGeometry(25, 1, 8);
caja = new THREE.Mesh(cubo, materialApli3);
caja.castshadow = true;
caja.rotation.x = -1.3;
caja.position.x = 1;
caja.position.y = 4;
caja.position.z = 0;
caja.castShadow = true;
scene.remove(caja);
scene.add(caja);
});
document.getElementById("4").addEventListener("click", function(){
//console.log(this.id);
scene.remove(caja);
var materialApli4 = new THREE.MeshPhongMaterial(
{
color: 0x90abed,
transparent: true,
opacity:0.5});
var cubo = new THREE.BoxGeometry(25, 1, 8);
caja = new THREE.Mesh(cubo, materialApli4);
caja.castshadow = true;
caja.rotation.x = -1.3;
caja.position.x = 1;
caja.position.y = 4;
caja.position.z = 0;
caja.castShadow = true;
scene.add(caja);
});
}
//_______________________________INICIALIZACIONES____________________________________
queMaterial();
init();
animate();
view raw scripts.js hosted with ❤ by GitHub
en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)