圣诞树内卷之3d树-快学会给女朋友做吧（附源码）

前言

当我还在敲着代码，突然收到女朋友发来的消息。

别人有的，我肯定要给她更好的，刚好这两天学到three.js,写个3d圣诞树🎄给她一个惊喜吧

项目体验地址

模型有点大，首次加载会需要点时间：demo.huabyte.com/christmas/

准备工作

为了给女朋友安排上一个浪漫的场景，首先我们先去3dwarehouse找到一棵漂亮的圣诞树模型，当然你要是为了表达诚意自己建模我也不敢说啥啊(卑微😂)，注意我这里下载模型为gltf格式。

感觉场景单调了点是不是，不能体现我浪漫的情感，于是有去网上收罗了一个雪花和场景贴图素材。

我们准备工作就基本差不多了，当然还有圣诞歌曲...接下来开始敲代码

代码实现

在场景、相机、灯光、渲染器都准备就绪的情况下，我们导入我们的模型

// 环境hdr贴图
  new THREE.RGBELoader()
  .load('./winter_evening_1k.hdr', (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping
    scene.background = texture
    scene.environment = texture
    animate()
​
    // 圣诞树gltf模型
    const loader = new THREE.GLTFLoader()
    loader.load('./scene.gltf', (gltf) => {
      overplay.remove()
      loading.remove()
      gltf.scene.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
          child.material.emissive =  child.material.color
          child.material.emissiveMap = child.material.map
          child.receiveShadow = true
          child.castShadow = true
        }
      });
      gltf.scene.position.y -= 2 
​
      scene.add(gltf.scene)
      // 模型大小调整
      gltf.scene.scale.set(0.008, 0.008, 0.008)
      animate()
    })

当然不能少了漫天的雪花❄️呀

// 雪花
  let textureOrgin = new THREE.TextureLoader().load('./fl.png')
  group = new THREE.Group()
  // 雪花数量
  for (let i =0; i< 5000; i++) {
    const spriteMaterial = new THREE.SpriteMaterial({
      map: textureOrgin
    })
    const sprite = new THREE.Sprite(spriteMaterial)
    group.add(sprite)
    // 雪花纹理的大小调整
    sprite.scale.set(0.1, 0.1, 0.1)
    let k1 = Math.random() - 0.5
    let k2 = Math.random() - 0.5
    // 场景中雪花的空间
    sprite.position.set(k1 * 100, 20 * (Math.random()-0.1), 100 * k2)
  }
  scene.add(group)

为了实现雪花下落的效果，我们设置它的位置不断下降，同时整个场景开始旋转，听起来就浪漫起来了有木有。

function animate() {
  // 雪花循环动画
  group.children.forEach(sprite => {
    // 调节雪花下降速度
    sprite.position.y -= 0.002
    if(sprite.position.y < -5) {
      sprite.position.y = 20
    }
  })
  
  // 场景自动旋转速度
  scene.rotation.y += 0.004
​
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

最后加上音乐和控制器，让女朋友在听着欢快的音乐的节奏下，观赏这颗为而她准备的圣诞树。🎉

function controler() {
  control = new THREE.OrbitControls(camera, renderer.domElement)
  control.addEventListener('change', animate)
  // 缩放开关
  control.enableZoom = false
  // 平移开关
  control.enablePan = false
​
  window.addEventListener('resize', onWindowResize)
}

总结

项目开源地址：github.com/AirHua-byte… (跪求star🌟)

以上就是3d圣诞树的实现啦，看到这里再次求个点赞和star吧(卑微)

也可以访问我的博客huabyte.com了解更多鸭