一起来云赏月把！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";

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

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

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

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;
});

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);

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

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

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

一起来云赏月把！three.js实现vr赏月！相关推荐

Vue 云开发-结合survey.js+boostrapVue
新建一个vue项目并配置脚手架版本为3.0.4 首先创建一个新的vue项目并且安装router.boostrapVue.survey.js(都安装默认安装 ) vue create survey v ...
Oculus + Node.js + Three.js 打造VR世界
Oculus + Node.js + Three.js 打造VR世界 Oculus Rift 是一款为电子游戏设计的头戴式显示器.这是一款虚拟现实设备.这款设备很可能改变未来人们游戏的方式. 周五Ha ...
EasyPlayer.js支持VR视频播放，TSINGSEE青犀视频全力打造网页VR生态圈
由于VR行业的火热已经蔓延到除音视频外的各项行业中,我们也不断在网页视频实现VR播放上面投入开发.目前TSINGSEE青犀视频前段时间刚刚攻克了网页视频播放器EasyPlayer.JS实现VR视频播放 ...
原生JS实现VR看图特效
现在很多看车或是看房的网站都有VR看图的效果,看起来比较高端,类似于下面这样的效果: 那么这种效果是如何实现的呢?其实原理很简单,就是连续拍摄了多个角度的图片, 然后根据用户的操作加载不同角度的图片. ...
阿里云ECS部署node.js及防火墙80端口开启
第一篇竟然是node.js在阿里云ECS上的部署遇到的小问题记录. 很多时候我们排除故障都会掉进小坑,但别小看是小坑,有时候挺烦人挺难缠的,主要还是基础知识匮乏导致思路混乱造成的,在这里记录下,给自己 ...
centos 云服务器部署Node.js项目
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用来方便地搭建快速的易于扩展的网络应用.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又 ...
【微信小程序云开发】使用云函数（node.js）实现多张图片转成pdf的功能，且pdf带水印
最近在做项目的时候,碰到一个功能需要多张图片转成pdf的功能,首先,在网上找了很多资料,都没有一个合适的. 后来,就自己动手使用云函数写了一个处理图片转成pdf的云函数,而且需带水印. 直奔主题,使用 ...
js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
微信小程序超出代码大小限制，使用云开发调用文件+js动态调取（实例）
微信小程序代码上传大小有限制(可能是因为个人),但是提供了方便的云开发,有云数据库.数据存放.云函数,等功能.基础版还是免费的! 我在页面中需要调用13张图片,但是上传.预感.真机调试时都以" ...
爬虫有道云翻译中的js加密（2021年8月3日）-python3爬虫
有道云翻译链接https://fanyi.youdao.com/ 通过抓包发现Post的信息为其中salt,sign,lts,bv就是反爬虫机制,每次信息不同. 打开开发者工具-network,可以 ...

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

项目的初始化

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

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

一起来云赏月把！three.js实现vr赏月！相关推荐

最新文章

热门文章