使用gltf模型做一个VR地图
2024-06-16 01:41:55
做一个类似于https://my.matterportvr.cn/show/?m=WsQvZoxSg5d这样的，可以点击选择进入某某房间查看和观看楼层平面图以及楼层选择器的网页：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AR导航</title><style>*{padding: 0;margin: 0;}body{overflow: hidden;}.btn-container{position: absolute;left: 10px;top: 10px; z-index: 10;width: 100px;display: flex;justify-content: space-between;}.btn-container img{height: 40px;}ul{list-style: none;}li{text-align: center;padding: 5px 0px;}li:hover{background-color: rgba(0,0,0,0.3);cursor: pointer;}</style>
</head>
<body><div class="btn-container"><img class="reset-btn" title="查看楼层平面图" @click='reset' src="./imgs/map.png" alt=""><div class="layer-box"><img class="layer-btn" title="楼层选择器" @click='toggleLayerShow' src="./imgs/layer.png" alt=""><ul v-if = 'layerShow'><li v-for='(item,index) in layerData' v-bind:data-key='item.key' @click='selectLayer'>{{item.name}}</li></ul></div></div><div id="container"></div>
</body>
<script src="js/vue.js"></script>
<script src="js/three.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/renderers/CSS2DRenderer.js"></script>
<script src="js/libs/Tween.js"></script>
<script>(function(){const gltfLoader = new GLTFLoader();const modelUrl = 'https://houtaicdn.alva.com.cn/medias/resources/wechat/XiamenLieshi/model/GLTF3/XM.gltf';let scene,camera,renderer,controls,model;let sceneName = 'global';const origin = new THREE.Vector3(0,0,5), direction = new THREE.Vector3(0,0,5).normalize();let mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster(origin, direction);init();// addHelper();function init(){scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1,1000);camera.position.z = 5;initControls();// addResetBtn();gltfLoader.load(modelUrl,function(gltf){model = gltf.scene;// model.position.set(0,-30,150);model.scale.set(3,3,3);model.rotation.set(1.5,0,0);scene.add(model);initLight();});renderer = new THREE.WebGLRenderer({antialias: true,alpha: true,preserveDrawingBuffer: true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);animate()}document.body.addEventListener('mousedown',onDown,false);function onDown(event){event.preventDefault();mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects(model.children);if (intersects.length > 0 && sceneName === 'global') {// 如果点击到了某个房间，则进入此房间查看const name = intersects[0].object.name;console.log(name)goPart(name);}}function goPart(name){if (sceneName === 'Ani') return;sceneName = 'Ani';var sName = '';var tweenP = new TWEEN.Tween(model.position);// TWEEN过渡动画var tweenS = new TWEEN.Tween(model.scale);var tweenR = new TWEEN.Tween(model.rotation);tweenS.to(new THREE.Vector3(300,300,300),3000);tweenR.to(new THREE.Vector3(0,0,0), 1000);tweenP.easing(TWEEN.Easing.Quadratic.InOut);tweenS.easing(TWEEN.Easing.Quadratic.InOut);tweenR.easing(TWEEN.Easing.Quadratic.InOut);controls.reset();switch(name){case '房间1':// 正中sName = 'center';tweenP.to(new THREE.Vector3(0,40,0),3000);break;case '房间2':// 中左sName = 'center-left';tweenP.to(new THREE.Vector3(170,20,0),3000);break;case '房间3':// 中右sName = 'center-right';tweenP.to(new THREE.Vector3(-140,-30,0),3000);break;case '房间4':// 上左sName = 'top-left';tweenP.to(new THREE.Vector3(80,-30,150),3000);break;case '房间5':// 上右name = 'top-right';tweenP.to(new THREE.Vector3(-80,-30,150),3000);break;case '房间6':// 下sName = 'bottom';tweenP.to(new THREE.Vector3(0,0,-150),3000);break;}// tweenP.delay(2000);tweenP.start();tweenS.start();tweenR.start();tweenP.onComplete(() => {sceneName = sName;})}function initLight(){var aLight = new THREE.AmbientLight(0xffffff,0.2);scene.add(aLight)var dLight1 = new THREE.PointLight(0xffffff,1,100); dLight1.position.set(0,60,0);dLight1.target = model;scene.add(dLight1);var dLight2 = new THREE.PointLight(0xffffff,1,300); dLight2.position.set(170,40,0);dLight2.target = model;var dLight3 = new THREE.PointLight(0xffffff,1,300); dLight3.position.set(-140,-10,0);dLight3.target = model;scene.add(dLight3);var dLight4 = new THREE.PointLight(0xffffff,1,300); dLight4.position.set(80,-10,150);dLight4.target = model;scene.add(dLight4);var dLight5 = new THREE.PointLight(0xffffff,1,300); dLight5.position.set(0,20,-150);dLight5.target = model;scene.add(dLight5);}function animate(){requestAnimationFrame(animate);renderer.render(scene,camera);TWEEN.update();}function initControls(){controls = new THREE.OrbitControls(camera)controls.enableZoom = true//controls.autoRotate = true;controls.minDistance = 3;controls.maxDistance = 10;controls.enablePan = false;}function addHelper(){// var dir = new THREE.Vector3( 1, 2, 0 );// dir.normalize();// var origin = new THREE.Vector3( 0, 0, 0 );// var length = 1;// var hex = 0xffff00;// var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );// scene.add( arrowHelper );// 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.var axesHelper = new THREE.AxesHelper(250);scene.add(axesHelper);}function addResetBtn(){let labelRenderer = new CSS2DRenderer('img');labelRenderer.setSize( 60, 40 );// labelRenderer.domElement.style.pointerEvents = 'none';// 禁用事件labelRenderer.domElement.style.position = 'absolute';labelRenderer.domElement.style.top = '10px';labelRenderer.domElement.style.left = '10px';labelRenderer.domElement.src = './imgs/map.png';labelRenderer.domElement.alt = '平面图';labelRenderer.domElement.title = '平面图';labelRenderer.domElement.addEventListener('click',reset,false);labelRenderer.render( scene, camera );document.getElementById( 'container' ).appendChild( labelRenderer.domElement );}var vm = new Vue({el: '.btn-container',data: {layerData:[{name: '全部', key: '0'},{name: '一楼', key: '1'},{name: '二楼', key: '2'},],layerShow: false},methods:{toggleLayerShow(){this.layerShow = !this.layerShow;},selectLayer(e){this.layerShow = !this.layerShow;const { key } = e.srcElement.dataset;camera.layers.mask = Number(key);// 修改显示的楼层},reset(){// 查看平面图if (sceneName === 'Ani') return;sceneName = 'Ani';// model.position.set(0,0,0);// model.scale.set(3,3,3);// model.rotation.set(1.5,0,0);controls.reset();var tweenP = new TWEEN.Tween(model.position);tweenP.to(new THREE.Vector3(0,0,0), 2000);var tweenR = new TWEEN.Tween(model.rotation);tweenR.to(new THREE.Vector3(1.5,0,0), 2000);var tweenS = new TWEEN.Tween(model.scale);tweenS.to(new THREE.Vector3(3,3,3), 2000);tweenP.easing(TWEEN.Easing.Quadratic.InOut);tweenS.easing(TWEEN.Easing.Quadratic.InOut);tweenR.easing(TWEEN.Easing.Quadratic.InOut);tweenP.start(); tweenR.start(); tweenS.start();tweenP.onComplete(() => { sceneName = 'global';})}}});})()
</script>
</html>
使用gltf模型做一个VR地图相关推荐
- 怎样用cocos2d-x做一个基于地图块的游戏（Part One）
怎样用cocos2d-X做一个基于地图块的游戏 (Part One) 在这个分为上下两部分的教程中,我们将介绍如何使用Cocos2D-X和地图编辑器做一款基于地图块的游戏.在这个简单的地图块游戏里,一 ...
- vue 做一个定点地图的页面（定位到你想要的地点）
实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...
- 怎么通过Unity和谷歌纸盒做一个VR游戏？（译）
原文链接:点击打开链接 作者是用iPhone适配的,我是用的Android手机且由于SDK版本的关系所以会有些小细节不一样. 游戏工程地址:忍者飞镖 GoogleVR SDK for Unity:SD ...
- 做一个战役地图动态展示的网站
2019年末,无意间发现了一本2013年的架空历史军事穿越小说<晚明>,作者 柯山梦 . 故事背景发生在天启七年(1627)元月,走过259年的明王朝内忧外患,大乱将起.就在此时,一个脸皮 ...
- 【20171013】unity+cardboard做一个VR眼镜
一.搭建开发环境 1.下载unity: https://store.unity.com/cn免费版即可 2.下载Android SDK: http://tools.android-studio.org ...
- 【纯JAVA语言做RPG游戏】1.做个瓷砖地图生成器
开个坑,想做个JAVA游戏. 虽然现在有着各种游戏引擎,使得做游戏的效率提高了很多,但是用着别人的代码来做感觉对自己也没啥提升,而且在游戏的模式上也不得不去迎合别人的思维,所以露珠准备应用前面学到的所 ...
- Unity之如何实现一个VR任务(剧情)系统
一.前言 最近再做一个VR项目,里面有大量的剧情和VR操作任务. 比如: 1.张三说了什么话,干了什么事,然后,李四又说了什么,做了什么动画,完了之后,场景中某个物体高亮,让我们触摸或者射线点击(pc ...
- 【跟我一起学Unity3D】做一个2D的90坦克大战之地图编辑器
从10月20号到现在,Unity3D也学了10天了,对于Unity3D也有了一个大致的了解,有必要做一个小游戏来检测一下自己的学习成果了.经过两天的努力,终于总算是做出来了一个可以玩的坦克大战了.首先 ...
- 如何做一个园区的导航地图？园区楼宇地图导航如何实现？
如何做一个园区的导航地图?电子地图已成为智慧园区应用的重要组成部分和刚需,基于地图一方面为来园区人员进行导引,同时为园区内部的可视化设备设施.停车引导.物联数据的展示.园区物业资产管理等提供高效的管理 ...
最新文章
- java基础代码实例_基础篇：详解JAVA对象实例化过程
- GCD中的队列与任务
- html给页面整体添加左右边距_HTML嵌入页面的几种方法
- 安装logstash-7.9.3和filebeat-7.9.3
- spring mvc mvc:default-servlet-handler / 。
- UI设计中的图标分为哪些类型？
- 打开IE8总是提示欢迎使用？怎样使它不提示？
- python电脑录屏软件_可以推荐一款电脑录屏软件吗？
- [转]垂直搜索基础知识(1)
- 洛杉矶马拉松本周末开跑！27000名选手正常参赛
- 计算机看不了pdf,电脑打不开pdf格式文件怎么回事
- 字符编码-带你走出Unicode与UTF-8的误区
- 世界名牌CD机解码芯片大全
- sigar(System Information Gatherer And Reporter)简介
- 读《创业36条军规》（五）放下身段死缠烂打
- 基于can总线的A2L文件解析（1）
- Android+CS6：工业动画之变速变方向旋转齿轮
- 超级记忆法之110数字编码
- mysql left join 三表查询_MySql的join（连接）查询 （三表 left join 写法）
- 先电OpenStack搭建