Hex Tunnel 0.2

Developer
Josep Antoni Bover Comas
Size
4,287 Kb
Views
28,336
  1. Hex Tunnel 0.2 Previews
  2. Hex Tunnel 0.2 HTML Codes
  3. Hex Tunnel 0.2 JS Codes

How do I make an hex tunnel 0.2?

Three.js experiment : infinite tunnel with hexadecimal columns. What is a hex tunnel 0.2? How do you make a hex tunnel 0.2? This script and codes were developed by Josep Antoni Bover Comas on 27 August 2022, Saturday.

Hex Tunnel 0.2 Previews
IQ Test

Hex Tunnel 0.2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hex Tunnel 0.2</title>
</head>
<body> <!-- THREE.JS 84 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>
<!-- Simplified object for 2D and THREE.js canvas (designed for my web page banners and for doing tests with them) -->
<!-- Can work in 2 ways, normal / test mode, and banner mode (for my web page headers) -->
<script src='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.js'></script>
<link rel='stylesheet' href='https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.css'></link> <script src="js/index.js"></script>
</body>
</html>

Hex Tunnel 0.2 - Script Codes JS Codes

/* Tunel hexadecimal. Creado por Josep Antoni Bover pare devildrey33.es el 06/04/2017 Vista por defecto en el Laboratorio de pruebas	devildrey33_Lab->Opciones->Vista = Preview; Ultima modificación el 17/04/2017
*/
var HexTunnel = function() { // Llamo al constructor del ObjetoBanner if (ObjetoCanvas.call(this, { 'Tipo' : 'THREE', 'Ancho' : 'Auto', 'Alto' : 'Auto', 'Entorno' : 'Normal', 'MostrarFPS' : true, 'BotonLogo' : true, 'BotonPantallaCompleta' : true, 'Idioma' : 'en', 'ElementoRaiz' : document.body, 'Pausar' : false, // Pausa el canvas si la pestaña no tiene el foco del teclado 'ColorFondo' : 0xCCCCCC }) === false) { return false; } // Se ha creado el canvas, inicio los valores de la animación ... this.Iniciar(); // Esconde la ventana que informa al usuario de que se está cargando la animación. (REQUERIDO) this.Cargando(false);
};
HexTunnel.prototype = Object.assign( Object.create(ObjetoCanvas.prototype) , { constructor : HexTunnel, // Función que se llama al redimensionar el documento Redimensionar : function() { }, // Función que se llama al hacer scroll en el documento Scroll : function() { }, // Función que se llama al mover el mouse por el canvas MouseMove : function(Evento) { }, // Función que se llama al presionar un botón del mouse por el canvas MousePresionado : function(Evento) { }, // Función que se llama al soltar un botón del mouse por el canvas MouseSoltado : function(Evento) { }, // Función que se llama al entrar con el mouse en el canvas MouseEnter : function(Evento) { }, // Función que se llama al salir con el mouse del canvas MouseLeave : function(Evento) { }, // Función que se llama al presionar una tecla TeclaPresionada : function(Evento) { }, // Función que se llama al soltar una tecla TeclaSoltada : function(Evento) { }, // Función que se llama al presionar la pantalla TouchStart : function(Evento) { }, // Función que se llama al soltar el dedo de la pantalla TouchEnd : function(Evento) { }, // Función que se llama al pausar el banner Pausa : function() { }, // Función que se llama al reanudar el banner Reanudar : function() { }, // Función que inicia el ejemplo Iniciar : function() { // Activo el mapeado de sombras this.Context.shadowMap.enabled	= true; // Creo la escena this.Escena = new THREE.Scene(); window.scene = this.Escena; // Three js inspector... // Creo la camara this.Camara = new THREE.PerspectiveCamera(75, this.Ancho / this.Alto, 0.5, 2000);
// this.Camara.Rotacion = { Grados : 0, Avance : (Math.PI / 180) / 3, Distancia : 20, MirarHacia : new THREE.Vector3(0, 0, 0), Animacion : true }; this.Camara.position.set(0, 0, 10); this.Camara.name = "Camara"; // Función para que la cámara rote alrededor de la escena this.Camara.Rotar = function() { if (this.Rotacion.Animacion === true) { this.Rotacion.Grados += this.Rotacion.Avance; this.position.x = this.Rotacion.Distancia * Math.cos(this.Rotacion.Grados); this.position.z = this.Rotacion.Distancia * Math.sin(this.Rotacion.Grados); this.lookAt(this.Rotacion.MirarHacia); } }; this.Escena.add(this.Camara);
// this.Camara.Rotar(); // Plano para el suelo this.Suelo = new THREE.Mesh( new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({ color: 0x555555, specular : 0x777777 })); this.Suelo.name = "Suelo"; this.Suelo.rotation.x = -Math.PI / 2; this.Suelo.position.y = -20;
// this.Suelo.position.z = -100; this.Suelo.castShadow = false; this.Suelo.receiveShadow = true; this.Escena.add(this.Suelo);
// var grado = (this.Constantes.PIx2 / 360); this.Avance = 0; this.CrearBloques(); this.CrearLuces();
// this.Camara.Rotar(); }, Bloques : [], CrearBloques : function() { this.Filas = 35; for (var i = 0; i < this.Filas ; i++) { var b = new this.Bloque(this.Escena, -24, 0, i * -20, 0, 0, 0); this.Bloques.push(b); var b2 = new this.Bloque(this.Escena, 24, 0, i * -20, 0, 0, 0); this.Bloques.push(b2); } }, Bloque : function(Escena, X, Y, Z, RotacionX, RotacionY, RotacionZ) { this.Buffer = new BufferCanvas(512, 1024); this.Textura = new THREE.Texture(this.Buffer.Canvas); this.Figura = new THREE.Mesh( new THREE.BoxGeometry( 20, 40, 10 ), new THREE.MeshStandardMaterial( { map: this.Textura, transparent : true, roughness: 0.5, opacity: 0.75 } )); Escena.add(this.Figura); this.Figura.position.set(X, Y, Z); this.Figura.rotation.set(RotacionX, RotacionY, RotacionZ); this.Figura.castShadow = true; this.Buffer.Context.fillStyle = "rgb(0, 0, 120)"; this.Buffer.Context.fillRect(0, 0, this.Buffer.Ancho, this.Buffer.Alto); this.Buffer.Context.font = "32px monospace"; // 512 - 60 / 26 (Ancho - Margen / Caracteres por linea) this.Buffer.Context.fillStyle = "rgb(95, 95, 95)";
// this.Buffer.Context.fillStyle = "rgb(255, 255, 255)"; for (var i = 1; i < 26; i++) {
// console.log(Math.random().toString(16).slice(2, 8).toUpperCase()); var HexStr = '0x' + Math.random().toString(16).slice(2, 8).toUpperCase() + ' 0x' + Math.random().toString(16).slice(2, 8).toUpperCase() + ' 0x' + Math.random().toString(16).slice(2, 8).toUpperCase(); this.Buffer.Context.fillText(HexStr, 30, i * 40); } this.Textura.needsUpdate = true; this.Actualizar = function() { this.Textura.needsUpdate = true; }; }, CrearLuces : function() { // Luz direccional /*this.DirLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); this.DirLight.name = "DirLight1"; this.DirLight.position.set( 12, 60, -180 ); this.DirLight.position.multiplyScalar( 20 ); this.DirLight.target = this.Suelo; this.DirLight.castShadow = true; this.DirLight.shadow.mapSize.width = 2048; this.DirLight.shadow.mapSize.height = 2048; var d = 40; this.DirLight.shadow.camera.left = -d; this.DirLight.shadow.camera.right = d; this.DirLight.shadow.camera.top = d; this.DirLight.shadow.camera.bottom = -d; this.DirLight.shadow.camera.far = 4500; this.Escena.add( this.DirLight ); this.Dlhelper = new THREE.CameraHelper(this.DirLight.shadow.camera); this.Escena.add(this.Dlhelper); this.Dlhelper.visible = true;*/ this.DirLight2 = new THREE.DirectionalLight( 0xffffff, 1.4 ); this.DirLight2.name = "DirLight2"; this.DirLight2.position.set( 3, 1, 50 ); this.DirLight2.position.multiplyScalar( 20 ); this.DirLight2.target = this.Suelo; this.DirLight2.castShadow = true; this.DirLight2.shadow.mapSize.width = 2048; this.DirLight2.shadow.mapSize.height = 2048; var d = 40; this.DirLight2.shadow.camera.left = -d; this.DirLight2.shadow.camera.right = d; this.DirLight2.shadow.camera.top = d; this.DirLight2.shadow.camera.bottom = -d; this.DirLight2.shadow.camera.far = 6500;
// this.DirLight.target = this.Cubo; this.Escena.add( this.DirLight2 ); this.Dlhelper2 = new THREE.CameraHelper(this.DirLight2.shadow.camera); this.Escena.add(this.Dlhelper2); this.Dlhelper2.visible = true; // Luz de ambiente this.HemiLight = new THREE.HemisphereLight( 0xeeeeee, 0xffffff, 1.2 ); this.HemiLight.color.setHSL( 0.6, 0.6, 0.6 ); this.HemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); this.HemiLight.position.set( 0, 0, 0 ); this.Escena.add( this.HemiLight ); }, Avanzar : function() {
// this.Avance -= 0.25;
/* this.Camara.position.z = this.Avance; this.DirLight.position.set( 12, 40, -120 - this.Avance ); this.DirLight2.position.set( 3, 10, 20 - this.Avance ); this.Suelo.position.z = this.Avance;*/ for (var i = 0; i < this.Filas * 2; i++) { if (this.Bloques[i].Figura.position.z > this.Camara.position.z + 100) { this.Bloques[i].Figura.position.z = this.Bloques[i].Figura.position.z - (20 * this.Filas); } else { this.Bloques[i].Figura.position.z += 0.07; } } }, // Función que pinta cada frame de la animación Pintar : function() { this.Avanzar(); this.Context.render(this.Escena, this.Camara); }
});
// Inicialización del canvas en el Load de la página
var Canvas = null;
window.addEventListener('load', function() { Canvas = new HexTunnel; });
Hex Tunnel 0.2 - Script Codes
Hex Tunnel 0.2 - Script Codes
Home Page Home
Developer Josep Antoni Bover Comas
Username devildrey33
Uploaded August 27, 2022
Rating 3.5
Size 4,287 Kb
Views 28,336
Do you need developer help for Hex Tunnel 0.2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Antoni Bover Comas (devildrey33) Script Codes
Name
ObjetoAnimacion
CSS menu concept 2
CSS menu concept
3D Audio Analyzer 0.2
3D Audio Analyzer
Hex Tunnel 1.0
3D Audio Analyzer 0.8
2D Space
Solitarie card game
3D Rgb Spyral
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!