Last active
April 6, 2024 16:28
-
-
Save salvatorecapolupo/4473fb19ea89a30ee83e0299922dad42 to your computer and use it in GitHub Desktop.
Realizzare testo 3D in HTML con three.js - Semplicissimo :-) Vedi anche: https://trovalost.it/creare-testo-3d/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello Three.js</title> | |
| <style> | |
| body { margin: 0; } | |
| canvas { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| // Create a scene | |
| const scene = new THREE.Scene(); | |
| // Create a camera | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Create a renderer | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.shadowMap.enabled = true; // Enable shadows | |
| document.body.appendChild(renderer.domElement); | |
| // Create ambient light | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light | |
| scene.add(ambientLight); | |
| // Create directional light | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // White light | |
| directionalLight.position.set(10, 10, 10); | |
| directionalLight.castShadow = true; // Enable casting shadows | |
| scene.add(directionalLight); | |
| // Create text | |
| const loader = new THREE.FontLoader(); | |
| loader.load('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/fonts/helvetiker_regular.typeface.json', function (font) { | |
| const geometry = new THREE.TextGeometry('Ciao mondo', { | |
| font: font, | |
| size: 1, | |
| height: 0.1, | |
| curveSegments: 12, | |
| bevelEnabled: true, | |
| bevelThickness: 0.05, // Increase bevel thickness | |
| bevelSize: 0.03, // Increase bevel size | |
| bevelOffset: 0, | |
| bevelSegments: 5 | |
| }); | |
| const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); // Standard material for shadows | |
| const textMesh = new THREE.Mesh(geometry, material); | |
| textMesh.castShadow = true; // Enable casting shadows | |
| textMesh.position.x = -2; | |
| scene.add(textMesh); | |
| }); | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment