three.js开发3D地球

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)

然后,我们将添加一个渲染器来渲染我们的场景,确保设置alphatrue具有透明背景。稍后我们将在 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%);
}
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片