乐趣区

Threejs入门之上海外滩

THREE.js 入门之上海外滩

  • 最近入了 three.js 的坑,想用 three.js 做一些 demo 以便巩固自己最近所掌握的知识点,而且正好赶上国庆放假,随,有了这篇~
  • 预览地址:Three.js 之上海外滩 欢迎 start❤️~

本篇虽是关于 Three.js 入门的文章,但是太过入门的就不讲了。没意义,网上很多知识,本篇主要是把自己在写 demo 时候遇到的坑点给记录下来,有什么不懂的直接去查阅文档或者网上搜,这里要提一下:Three.js 的官方文档和例子对于开发者也是挺好的(有中文版!)


废话不多,先看下效果吧:

代码比较多,就不一一讲解了,本篇主要分为以下几个部分:

  • 初始化代码,创建场景,相机,渲染器,灯光,搭建不规则的地面几何体等
  • 搭建东方明珠
  • 搭建上海中心大厦
  • 搭建环球金融中心
  • 搭建金茂大厦
  • 随机算法搭建其他建筑物
  • 给所有建筑物进行贴图优化
  • 搭建黄浦江
  • 搭建 360 全景空间
退出移动版