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

简介: 一起来云赏月把!three.js实现vr赏月!

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

aa45926896533bfa43e020397e2ef792.gif

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


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


项目的初始化

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


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

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

cd01d5aff0c0332fd27e56c0cc3b386e.png

dea2fc1ef50a10dd4c98bf7023b1ac85.png


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

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

7b66e4840f006f610a3093eb5dda7a7e.png

image.png


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版本这次是假定在一个傍晚,我们在宽阔的视角下瞟见月亮缓缓爬上来。

image.png


  • 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,然后访问控制台输出的地址即可。

4b8e78dca2a5156e8c718ba222e86bfd.png

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


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

微信截图_20221123203151.png

相关文章
|
数据可视化 物联网 vr&ar
THREE.JS 实现看房自由(VR 看房)
目前随着元宇宙概念的爆火,THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台,今天我们主要基于THREE实现一个三维的VR看房小项目
2212 4
|
存储 前端开发 搜索推荐
基于threejs的商品VR展示平台的设计与实现思路
本设计针对目前互联网销售传统展示的现状,考虑当前市场形式,利用虚拟现实技术理论,结合计算机网络、交互设计实现一个以普通终端浏览器为载体的适用于用户或消费者需求的VR展示平台系统,打造一种全新的商品展示方式,拉近用户或者消费者于商品的距离,提供商品全面的信息,提高商品的可信度,降低交易失败的风险,带来一次愉快完美的购物体验。
930 1
基于threejs的商品VR展示平台的设计与实现思路
|
传感器 前端开发 vr&ar
三种前端实现VR全景看房的方案!说不定哪天就用得上!(上)
事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视频,图文等)... 我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。
563 0
三种前端实现VR全景看房的方案!说不定哪天就用得上!(上)
|
传感器 移动开发 数据可视化
三种前端实现VR全景看房的方案!说不定哪天就用得上! (下)
事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视频,图文等)... 我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。
1069 0
三种前端实现VR全景看房的方案!说不定哪天就用得上! (下)
|
机器学习/深度学习 人工智能 vr&ar