Construire la Terre avec Webgl et JavaScript

WebGL offre des possibilités passionnantes pour créer des expériences 3D immersives directement au sein des navigateurs Web. Ce tutoriel montre la construction d'un modèle de Terre 3D rotatif à l'aide de WebGL et de la bibliothèque Three.JS.

Concepts clés:

• Tireaging Three.js, un plugin WebGL, simplifie la création de modèle 3D.
• Le processus consiste à définir une scène, une caméra, un éclairage, un rendu et le modèle de terre lui-même dans un fichier JavaScript.
• Les visuels de Terre réalistes sont obtenus en utilisant des cartes diffuses et de bosse pour la texture de surface et la topographie.
• L'animation est implémentée par le biais de fonctions auto-allumées, tournant subtilement la Terre et rendant continuellement la scène.

Prérequis:

Ce tutoriel utilise la bibliothèque Three.js. Vous pouvez l'inclure via un CDN dans votre HTML:

<🎜>

un élément div servira de cible de rendu:

<🎜>

Configuration de l'environnement 3D:

Le fichier javascript (earth.js) initialise les composants essentiels:

var scene, camera, light, renderer, earthObject;

var WIDTH = window.innerWidth - 30,
    HEIGHT = window.innerHeight - 30;

var angle = 45,
    aspect = WIDTH / HEIGHT,
    near = 0.1,
    far = 3000;

var container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
camera.position.set(0, 0, 0);
scene = new THREE.Scene();

light = new THREE.SpotLight(0xFFFFFF, 1, 0, Math.PI / 2, 1);
light.position.set(4000, 4000, 1500);
light.target.position.set(1000, 3800, 1000);

// ... (Renderer setup and Earth mesh creation will follow)

Ce code met en place l'appareil photo, la scène et l'éclairage. Le renderer sera ajouté plus tard.

Création du maillage terrestre:

Une géométrie de sphère et un matériau phong sont utilisés pour créer le modèle de terre:

var earthGeo = new THREE.SphereGeometry(30, 40, 400),
    earthMat = new THREE.MeshPhongMaterial();

var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(-100, 0, 0);
earthMesh.rotation.y = 5;

scene.add(earthMesh);

Ajout de textures:

Les cartes diffuses et bosses améliorent le réalisme:

// Diffuse map
earthMat.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

// Bump map
earthMat.bumpMap = THREE.ImageUtils.loadTexture('images/elev_bump_16ka.jpg');
earthMat.bumpScale = 8;

N'oubliez pas de remplacer les espaces réservés par des chemins d'image réels.

Animation de la Terre:

Les fonctions animate() et render() créent l'effet de rotation:

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var clock = new THREE.Clock(),
        delta = clock.getDelta();

    earthMesh.rotation.y += rotationSpeed * delta; // rotationSpeed needs to be defined
    renderer.render(scene, camera);
}

animate(); // Start the animation

Exemple complet (illustratif): Un exemple complet et exécutable nécessiterait plus de code, y compris la configuration du rendu et des bibliothèques potentiellement supplémentaires pour les contrôles. Les extraits ci-dessus fournissent les éléments de base. Reportez-vous à l'article d'origine pour un exemple complet et fonctionnel.

Améliorations supplémentaires:

Le tutoriel suggère d'ajouter des fonctionnalités comme:

• commandes d'orbite pour la rotation interactive.
• un fond Starfield.
• Effets atmosphériques.

Cette réponse révisée fournit une explication plus structurée et détaillée du processus de création de modèle de Terre WebGL, tout en maintenant les informations de base et en évitant la répétition inutile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!