Membina Bumi dengan WebGL dan JavaScript

WebGL menawarkan kemungkinan menarik untuk mewujudkan pengalaman 3D immersive secara langsung dalam pelayar web. Tutorial ini menunjukkan membina model Bumi 3D berputar menggunakan WebGL dan Tiga.js perpustakaan.

Konsep Utama:

memanfaatkan tiga.js, plugin webgl, memudahkan penciptaan model 3D.
Proses ini melibatkan menentukan adegan, kamera, pencahayaan, penerima, dan model Bumi sendiri dalam fail JavaScript.
visual bumi yang realistik dicapai menggunakan peta meresap dan benjolan untuk tekstur permukaan dan topografi.
Animasi dilaksanakan melalui fungsi panggilan diri, secara halus berputar bumi dan terus memberikan tempat kejadian.

Prasyarat:

Tutorial ini menggunakan perpustakaan Three.js. Anda boleh memasukkannya melalui CDN di HTML anda:

<🎜>

elemen

akan berfungsi sebagai sasaran rendering: div

<🎜>

Menyediakan persekitaran 3D:

Fail JavaScript () memulakan komponen penting:

earth.js

Kod ini menetapkan kamera, adegan, dan pencahayaan.

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)

akan ditambah kemudian.

renderer

Membuat mesh bumi:

Geometri sfera dan bahan Phong digunakan untuk mencipta model bumi:

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);

Menambah tekstur:

peta meresap dan benjolan meningkatkan realisme:

ingat untuk menggantikan ruang letak dengan laluan imej sebenar.

// 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;

animasi bumi:

fungsi

dan

membuat kesan putaran: animate() render() Contoh Lengkap (Illustrative):

Contoh yang penuh, boleh dilancarkan memerlukan lebih banyak kod, termasuk persediaan penanam dan perpustakaan tambahan untuk kawalan. Coretan di atas memberikan elemen teras. Rujuk artikel asal untuk contoh yang lengkap dan berfungsi.

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

Penambahbaikan lebih lanjut:

tutorial mencadangkan penambangan ciri seperti:

kawalan orbit untuk putaran interaktif.

latar belakang Starfield.

• kesan atmosfera.
Tanggapan yang disemak ini memberikan penjelasan yang lebih berstruktur dan terperinci mengenai proses penciptaan model WebGL Earth, sambil mengekalkan maklumat teras dan mengelakkan pengulangan yang tidak perlu.

Atas ialah kandungan terperinci Membina Bumi dengan WebGL dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!