Three.js es una librería escrita completamente en JavaScript que nos ayuda a mostrar objetos en 3D dentro de un control HTML llamado <canvas></canvas>, su pagina oficial se encuentra en https://threejs.org/ ahí podemos ver algunas de las cosas que podemos lograr con esta librería, les muestro aquí un ejemplo muy básico de lo que podemos crear con ella.
A grandes rasgos lo que nos permite esta librería es escribir directamente a la tarjeta de video del cliente y así poder aprovechar la potencia grafica de la misma, llegando a crear cosas realmente impresionantes.
Para poder llegar a programar y usar esta librería tendremos que pensar en 3D definitivamente
Texto creado en 3D con Three.js
Puedes mover con el mouse las letras de “Markits;” que giran en la pantalla anterior, ampliarlo y reducirlo con el scroll del mouse.
Para la creación del ejemplo anterior utilizamos las siguientes librerías three.js, OrbitControls.js y FontLoader.js, además una fuente llamada: helvetiker_regular.typeface.json
Les dejo el código completo
<html lang="en"><head>
<title>Ejemplo three.js webgl - Solo texto</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
background-color: #ffffff;
color: #ff0000;
}
a {
color: #08f;
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { FontLoader } from 'https://threejs.org/examples/jsm/loaders/FontLoader.js';
let camera, scene, renderer;
init();
function init( ) {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, -400, 600 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
const loader = new FontLoader();
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
const color = 0xff0000;
const matDark = new THREE.LineBasicMaterial( {
color: color,
side: THREE.DoubleSide
} );
const matLite = new THREE.MeshBasicMaterial( {
color: color,
transparent: true,
opacity: 0.4,
side: THREE.DoubleSide
} );
const message = 'Markits;';
const shapes = font.generateShapes( message, 100 );
const geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();
const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, 0, 0 );
// make shape ( N.B. edge view not visible )
const text = new THREE.Mesh( geometry, matLite );
text.position.z = - 100;
scene.add( text );
// make line shape ( N.B. edge view remains visible )
const holeShapes = [];
for ( let i = 0; i < shapes.length; i ++ ) {
const shape = shapes[ i ];
if ( shape.holes && shape.holes.length > 0 ) {
for ( let j = 0; j < shape.holes.length; j ++ ) {
const hole = shape.holes[ j ];
holeShapes.push( hole );
}
}
}
shapes.push.apply( shapes, holeShapes );
const lineText = new THREE.Object3D();
for ( let i = 0; i < shapes.length; i ++ ) {
const shape = shapes[ i ];
const points = shape.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints( points );
geometry.translate( xMid, 0, 0 );
const lineMesh = new THREE.Line( geometry, matDark );
lineText.add( lineMesh );
}
scene.add( lineText );
render();
} ); //end load function
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.update();
controls.addEventListener( 'change', render );
window.addEventListener( 'resize', onWindowResize );
} // end init
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
scene.rotation.x += 0.01;
scene.rotation.y += 0.01;
scene.rotation.z += 0.01;
renderer.render( scene, camera );
}
</script>
</body></html>
Otro ejemplo
Cubo creado con una imagen en las 6 caras y Three.js, puedes moverlo con el mouse, ampliarlo o reducir su tamaño
Y aquí el código:
<html lang="en"><head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
let camera, scene, renderer;
let mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, .1, 100 );
camera.position.z = 2;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
const texture = new THREE.TextureLoader().load( 'LOGO MARKITS REDES.jpg' );
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.update();
controls.addEventListener( 'change', render );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
renderer.render( scene, camera );
}
</script>
</body></html>
Lo complejo viene en la programación de los objetos que deseamos mostrar en nuestra pantalla definida para eso.
Para poder utilizar estas librerías definitivamente debes de tener un conocimiento muy profundo de JavaScript así como de diseño y programación en 3D.
Conclusiones
En definitiva la librería es muy extensa y contiene muchas posibilidades para poder dibujar nuestros objetos creados en 3D, te recomiendo visitar la página del autor si deseas profundizar en este tema.
¿Ya sabes cuales son nuestros servicios?
¿Conocías este tipo de diseño? coméntanoslo
¿Necesitas ayuda con tu desarrollo web o con el marketing de tu negocio? contáctanos
Jesús Serrano
Desarrollador web con amplia experiencia en diferentes lenguajes de programación, Servidores de Bases de datos y servidores web.
Recuerda: El secreto es la Paciencia
Contactar
Si necesitas ayuda con tu desarrollo de software o el marketing de tu negocio no dudes en ponerte en contacto con nosotros.
Teléfono: 4772288223
