Letreiro 3D:
Aprenda a criar um impressionante letreiro 3D com este tutorial detalhado. Descubra como estruturar o texto em HTML, aplicar estilos e fazer a Lógica corretamente.
Veja o Letreiro 3D em funcionamento neste link. Letreiro 3D.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang= "pt-br" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Letreiro 3D - Linguagens de Programação </title>
<link rel= "stylesheet" href= "style.css" >
</head>
<body>
<!-- Letreiro 3D será renderizado aqui -->
<script src= "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" ></script>
<script src= "https://threejs.org/examples/jsm/loaders/FontLoader.js" ></script>
<script src= "https://threejs.org/examples/jsm/geometries/TextGeometry.js" ></script>
<script src= "script.js" ></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
canvas {
display: block;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
// Cena, câmara e renderizador
const scene = new THREE.Scene();
const camera = new THREE
.PerspectiveCamera(75, window
.innerWidth / window.innerHeight,
0.1, 1000);
const renderer = new THREE
.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth,
window.innerHeight);
document.body.appendChild(renderer
.domElement);
// Luzes
const light = new THREE
.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 2)
.normalize();
scene.add(light);
// Carregar a fonte e criar o letreiro 3D
const loader = new THREE.FontLoader();
loader.load(
'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',
function(font) {
const textGeometry = new THREE
.TextGeometry('JavaScript', {
font: font,
size: 1,
height: 0.5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelSegments: 5
});
const material = new THREE
.MeshPhongMaterial({
color: 0x00ff00
});
const textMesh = new THREE.Mesh(
textGeometry, material);
// Centralizar o texto
textGeometry.computeBoundingBox();
const centerOffset = -0.5 * (
textGeometry.boundingBox.max.x -
textGeometry.boundingBox.min.x);
textMesh.position.x =
centerOffset;
textMesh.position.y =
0;
textMesh.position.z = -5;
scene
.add(textMesh);
// Função de animação
function animate() {
requestAnimationFrame(animate);
// Rotacionar o letreiro
textMesh.rotation.x += 0.01;
textMesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
});
// Ajustar a câmara
camera.position.z = 10;
// Responsividade
window.addEventListener('resize',
() => {
renderer.setSize(window.innerWidth,
window.innerHeight);
camera.aspect = window.innerWidth /
window.innerHeight;
camera.updateProjectionMatrix();
});
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!