计算机系统应用教程网站

网站首页 > 技术文章 正文

three.js开发3D地球

btikc 2024-11-27 11:56:32 技术文章 21 ℃ 0 评论

Three.js是开源的宠儿，这是有充分理由的。它彻底改变了我们在网络上处理 3D 的方式，并且自r12013 年发布以来一直在不断发展。使用该库开发 3D 世界确实非常简单，但当您突破 2D 限制时，它仍然感觉像是一个神奇的补充网络。我们先建立一个基地。

根据

首先，我们需要一个场景来容纳我们的世界。

// 初始化场景
  const scene = new THREE.Scene()

然后，我们可以添加一个透视相机并将其向后一点。

// 初始化相机
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight.0.1, 60)// 重新定位相机
camera.position.set(6, 0, 0)

然后，我们将添加一个渲染器来渲染我们的场景，确保设置alpha为true具有透明背景。稍后我们将在 CSS 中添加一个简单的天空渐变。我们将调整渲染器的大小以适合我们的浏览器窗口，然后将其附加到<body>.

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ 
  alpha: true, 
  antialias: true 
})// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)// 将渲染器附加到正文
document.body.appendChild(renderer.domElement)

最后，我们将设置一个轨道控件，让用户可以缩放、平移和旋转相机。

// 初始化控件
const controls = new THREE.OrbitControls(camera, renderer.domElement)

现在，让我们添加我们的世界！

世界

首先，我们将加载以 Lee O' Connor 的艺术作品为特色的世界纹理。然后，我们将建立球体几何形状和材质。然后使用几何和材质来启动世界网格本身，然后将其添加到我们的场景中。

// 加载世界纹理
const worldTexture = new THREE.TextureLoader().load("world.jpg") 
      
// 初始化世界几何
const worldGeometry = new THREE.SphereGeometry(1, 40, 40) 
      
// 初始化世界材质
const worldMaterial = new THREE.MeshBasicMaterial({ 
  map: worldTexture 
}) 
      
// 初始化世界
const world = new THREE.Mesh(worldhGeometry, worldMaterial)// 将地球添加到场景中
scene.add(world)

接下来，我们将添加一些云。

云

我们将像处理世界一样处理云，除了我们将球体半径稍大一些，使其位于世界球体的顶部。此外，我们将确保材料是透明的，这样我们就可以通过云层的缝隙看到世界。

//    加载云纹理
const cloudTexture = new THREE.TextureLoader().load("clouds.png") 
      
// 初始化云几何
const cloudGeometry = new THREE.SphereGeometry(1.01, 40, 40) 
      
// 初始化云材质
const cloudMaterial = new THREE.MeshBasicMaterial({ 
  map: cloudTexture, 
  transparent: true 
}) 
      
// 初始化云
const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial) 
      
// 添加云到场景
scene.add(clouds)

现在，让我们渲染和动画我们的小世界。

动画

渲染我们的场景就像请求一个动画帧并调用render我们渲染器的方法一样简单。对于动画，我们将向一个方向旋转世界，在另一个方向旋转我们的云，稍微快一点。

// 准备动画循环
function animate() { 
  // 请求动画帧
  requestAnimationFrame(animate) 
        
  // 旋转世界
  world.rotation.y += 0.0005 
        
  // 旋转云
  clouds.rotation.y -= 0.001 
        
  // 渲染场景
  renderer.render （场景，相机）} 
      
// 动画
animate()

瞧。你有一个旋转的小世界！当用户调整浏览器大小时，我们还要处理刷新我们的相机和渲染器。

调整大小

由于我们的相机和渲染器是使用初始浏览器的宽度和高度设置的，因此任何浏览器调整大小都会导致我们的场景出现视觉问题。为了解决这个问题，我们可以监听任何调整大小，然后更新相机方面、投影矩阵和渲染器大小。

// 监听窗口大小调整
window.addEventListener('resize', () => { 
  // 更新相机纵横
  camera.aspect = window.innerWidth / window.innerHeight 
        
  // 更新相机投影矩阵
  camera.updateProjectionMatrix() 
        
  // 调整渲染器大小
  renderer.setSize(window.innerWidth, window.innerHeight)})

背景

最后但同样重要的是，让我们<body>使用 CSS径向渐变为背景添加一个漂亮的白色到蓝色渐变。我喜欢这个，因为它为我们的小世界增添了一种美妙的氛围。

body{
   background: radial-gradient(circle at center, white, rgba(113,129,191,0.5) 50%);
}

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表