- 作者:老汪软件技巧
- 发表时间:2024-12-29 10:05
- 浏览量:162
在这个信息爆炸的时代,互联网不仅连接了全球的人们,也为我们打开了通往无限可能的大门。想象一下,如果你能通过简单的代码,在网页上创建一个逼真的3D地球,让你的访客无需离开座位就能探索这个蓝色星球的每一个角落,那会是多么酷的一件事!今天,我们将一起踏上这段奇妙的编程之旅,利用JavaScript和Three.js的力量,从零开始打造一个互动式的3D地球模型。
无论是对于想要提升技能的前端开发者,还是对编程充满好奇的新手来说,这篇文章都将为你提供一步步的指导,带你深入浅出地了解如何将创意变为现实。我们不仅仅是在编写代码;我们正在创造一个窗口,透过它可以看到我们美丽的地球——用数字化的方式呈现其壮观的地貌、丰富的色彩以及动态的变化。
准备好迎接挑战了吗?让我们一起开启这段激动人心的旅程,探索如何使用现代Web技术来讲述地球的故事。接下来,我将向你展示整个项目的框架搭建过程,从最基本的HTML结构到复杂的3D图形渲染,一步一步教你如何构建属于你自己的3D地球。继续阅读,让我们的冒险现在就开始吧!✨
从零开始构建3D地球准备工作
首先,我们需要设置HTML文档的基本结构。这包括定义字符编码、视口设置以确保移动设备友好性,以及加载Three.js库——这是我们的主要工具,它让WebGL变得简单易用。我们还设置了页面标题为“3D 地球”,以便用户一眼就能知道这个页面的主题。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 地球title>
<script src="https://unpkg.com/three@0.128.0/build/three.min.js">script>
head>
构建3D环境
接下来,是时候创建我们的画布了,也就是3D地球将要展示的地方。我们通过元素来定义这个空间,并为其分配一个ID(如webglcanvas),以便稍后在JavaScript中引用。
<body>
<canvas id="webglcanvas">canvas>
body>
是一个HTML元素,它为网页提供了一个可以绘制图形的区域。这个元素本身并不显示任何内容,直到你使用JavaScript代码来操作它。 元素是HTML5引入的一个重要特性,允许开发者在网页上进行图形渲染、动画制作和其他视觉效果开发。
具体来说:
在这个上下文中, 被用来作为Three.js库的渲染目标。Three.js是一个用于创建和展示3D图形的JavaScript库,它内部使用WebGL(一种低级3D图形API)来进行高效的图形渲染。通过将Three.js的渲染器指向这个元素,我们可以在这个画布上呈现复杂的3D场景,如文章中提到的互动式3D地球。
当你结合Three.js与这个元素时,实际上是在告诉Three.js:“我想要在这个特定的HTML 元素内绘制我的3D内容。” 之后,所有由Three.js生成的3D图形都将被渲染到这个具有id="webglcanvas"的画布上,从而让访问者可以在网页上看到一个交互式的3D地球模型。
编写JavaScript代码1. 初始化全局变量
完整代码以及图片代码
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 地球title>
<script src="https://unpkg.com/three@0.128.0/build/three.min.js">script>
head>
<body>
<canvas id="webglcanvas">canvas>
<script>
// 3d 地球
// 3D 时间就是镜头拍出的世界,导演
let canvas, // 3d 容器
camera, // 镜头
scene, // 场景
renderer, // 渲染器
group; // 组
// 物品
let mouseX = 0, mouseY = 0; // mousemove 坐标
let windowHalfX = window.innerWidth / 2; // 球心
let windowHalfY = window.innerHeight / 2;
init();
animate();
// 准备
function init() {
canvas = document.getElementById('webglcanvas'); // DOM
camera = new THREE.PerspectiveCamera(60,
window.innerWidth / window.innerHeight, 1, 2000); // 实例化 相机
// 相机离scene场景
camera.position.z = 500;
scene = new THREE.Scene(); // 实例化 场景
scene.background = new THREE.Color(0xffffff); // 背景色
group = new THREE.Group();// 组
scene.add(group);
// 纹理加载器
let loader = new THREE.TextureLoader(); // 简单的加载器
loader.load('land_ocean_ice_cloud_2048.jpg', function (texture) {
let geometry = new THREE.SphereGeometry(200, 20, 20); // 球体
let material = new THREE.MeshBasicMaterial({ // 材质
map: texture
});
let mesh = new THREE.Mesh(geometry, material); // 网格
group.add(mesh);
// 渲染器 目标是canvas
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.render(scene, camera);
document.addEventListener('mousemove', onDocumentMouseMove, false);
})
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) * 10;
mouseY = (event.clientY - windowHalfY) * 10;
}
function animate() {
// 递归 屏幕的刷帧率 60帧/s
requestAnimationFrame(animate);
render();
}
function render() {
// 渲染
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (mouseY - camera.position.y) * 0.05;
camera.lookAt(scene.position);
group.rotation.y -= 0.005;
renderer.render(scene, camera);
// requestAnimationFrame(render);
}
script>
body>
html>
图片
结语
通过这些简单的步骤,我们就能够创建出一个令人惊叹的互动3D地球展示。Three.js的强大之处在于它不仅简化了WebGL编程,还提供了丰富多样的功能,使得即使是编程新手也能轻松制作出专业级的3D效果。希望这篇文章能激发你的灵感,去探索更多关于3D图形和Web开发的可能性!