一起来云赏月把！three.js实现vr赏月！

值此中秋佳节，陶人在此祝大家中秋快乐！同样也预祝国庆快乐！

---

十五的月亮十六圆,奈何再圆再大的月亮，我发现都没办法看的清清楚楚，没办法月亮实在是离得太远。还有一个痛点就是，由于实际的种种情况，有很多小伙伴没能回去跟家人一起团圆、一起赏月。那如果说能让月亮同时离我们很近，近到我们可以看清他的一颦一笑，近到不管我们身在何处都能实时的跟亲人分享再同一个月亮下的故事。

于是为了把月亮拉近，通过Three.js的技术可以完美地帮助我们！得益于Three.js框架的高性能，让我们能快速的实现各种三维的酷炫效果，于是这次我们来做一个VR云赏月。

---

项目的初始化

• 开发环境：node v12.18.0,npm v6.14.4
• 开发工具：HBuilder X

创建新项目，并引入相应的组件

• 1、自我创建相应的目录文件以及使用npm init生成package.json文件。

• 2 、借助parcel打包工具–执行npm install parcel-bundler --save-dev,为dev环境配置parcel环境

了解更多可访问parcel官方文档【https://www.parceljs.cn/getting_started.html】

• 3、安装three.js ： npm install three --save

汇总一下 npm install 所相关的命令极其作用

• npm install -g 将依赖进行全局安装
• npm install --save 将依赖写入dependencies文件中
• npm install --dev-save 将依赖写入devDependencies文件中
• npm install 只会将模块安装到nodemoudles中

• 4、 gsap库实现动态丝滑动画

// 导入动画库
import gsap from "gsap";
1
2

• 5、 导入轨道控制器实现自由拖动

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
1
2

---

准备相应素材，编写相应功能

• 1、 准备好环境的HDR图片素材，将其放在dist/texture/hdr目录下（dist目录是在执行npm run dev命令后自动生成的，再其中创建texture文件夹然后直接将图片放入，这样可以使得程序再编写的过程中可以直接调用，而不需要填入相对路径）。

云赏月V1.0版本这次是假定在一个傍晚，我们在宽阔的视角下瞟见月亮缓缓爬上来。

• 2、加载环境，渲染气氛。

// 目标：设置环境纹理
// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("textures/hdr/003.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});
1
2
3
4
5
6
7
8
9
10

• 3、 绘制月球，引入灯光并且确定出现位置。

const sphereGeometry = new THREE.SphereBufferGeometry(10, 20, 20);
const material = new THREE.MeshStandardMaterial({
  metalness: 0.1,
  roughness: 0.6,
  envMap: envMapTexture,
});
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -100
sphere.position.z = 100
sphere.position.y = 300
scene.add(sphere);

// 给场景添加背景
scene.background = envMapTexture;
// 给场景所有的物体添加默认的环境贴图
scene.environment = envMapTexture;

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.1); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
directionalLight.position.set(100, 100, 100);
scene.add(directionalLight);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

• 4、编写结束后执行命令： npm run dev，然后访问控制台输出的地址即可。

感谢各位大佬看到这里，需要源码的小伙伴可以直接私聊我！

---

目前是赏月V1.0版本，后续会继续实现月亮的动态变化，喜欢的话记得帮我点赞哦！！更多酷炫的效果敬请期待！