360全景交互式三维模型panolens.js 实现

本文主要介绍在全景图中进行三维模型交互式操作，主要步骤如下：

1，加载核心js代码库

    <script src="js/three.min.js"></script><script src="js/panolens.min.js"></script><script src="js/ColladaLoader.js"></script>

2，创建全景容器

<div id="chair-container" class="container" style="display:none">

3，加载全景图及三维模型

加载全景照片

      path = 'img/cube/';format = '.jpg';panorama = new PANOLENS.CubePanorama( [path + 'px' + format, path + 'nx' + format,path + 'py' + format, path + 'ny' + format,path + 'pz' + format, path + 'nz' + format] );viewer = new PANOLENS.Viewer();viewer.add( panorama );

加载三维模型

      loader = new THREE.ColladaLoader();loader.load( './model/room/room.dae', function ( collada ) {dae = collada.scene;dae.scale.multiplyScalar( 15 );dae.position.set( -60, -20, 370 );dae.rotation.set( -Math.PI/2, 0, -1.9 );dae.traverse( child => {if ( child.material instanceof THREE.Material ) {const map = child.material.map;child.material = new THREE.MeshPhysicalMaterial({map, reflectivity: 0, metalness: 0});}} );// Get chair modeldae.children.map( function( object ) {if ( object.name === 'Chair-Desk' && object.material.name === 'Textile - Slate Blue' ) {chairModels.push( object );}} )panorama.add( dae );} );

4，实现三维模型交互体验

添加监听事件

 panorama.addEventListener( 'click', function( event ){if ( event.intersects.length > 0 ) {intersect = event.intersects[ 0 ].object;if ( !(intersect instanceof PANOLENS.Infospot) && intersect.material ) {if ( !intersect.previousMaterial ) {intersect.previousMaterial = intersect.material.clone();intersect.material = new THREE.MeshNormalMaterial();} else {intersect.material = intersect.previousMaterial;intersect.previousMaterial.dispose();intersect.previousMaterial = undefined;} }}} );

文章完整下载代码：360全景交互式三维模型panolens.js实现代码.zip-互联网文档类资源-CSDN下载

360全景交互式三维模型panolens.js 实现相关推荐

360全景热点panolens.js 实现代码
本片主要介绍360全景热点基于panolens.js 实现的代码,主要通过如下步骤实现: 1,引入核心js库 <script src="js/three.min.js"> ...
there.js移动端 IOS 安卓 360全景视频（vr）
360全景视频3D播放源码使用mxreality.js技术 <!DOCTYPE html> <html lang="en"><head>< ...
使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...
全景效果图html5,HTML5+JS实现可交互360°柱状全景图浏览
以前写文章总喜欢把自己折腾的过程和思路都写出来不知道为什么懒,现在都喜欢直接上干货了,大概是为了节约大家的时间吧看标题是不是以为我要手动canvas秒天秒地?别瞎想了就我这样的菜逼只有调库的份 ...
【Android开发VR实战】二.播放360°全景视频
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53924006 本文出自[DylanAndroid的博客] [Android开发 ...
电商产品展示，选360°全景还是3D展示？
近两年,随着互联网的全面普及,人们对信息质量和获取信息的方式似乎越来越"挑剔"了,图文.声音.视频/短视频已成不能满足现代营销的差异化需求,一些新的信息形式露出头角. 例如,人们有 ...
房地产360全景的制作方法
近日,360全景看房很火热,360全景有较强的动态三维表现力,同时具有实时的交互性,而且提供一个超酷炫的动态的效果,让客户手机上即可动态检查样板房的每个细节,完成感同身受的看房体会,提高了客户潜在的购 ...
目前最快的360°全景VR摄影方法
#SIGGRAPHAsia2020 号称革命性的拍摄技术!OmniPhotos, 目前最快的360°全景VR摄影方法.代码已开源. https://github.com/cr333/OmniPhoto ...
android 360状态栏显示,如何从Android应用程序显示360全景(How to display a 360 panorama from android application)...
如何从Android应用程序显示360全景(How to display a 360 panorama from android application) 我想从我的Android应用程序中显示一个全 ...

360全景交互式三维模型panolens.js 实现

360全景交互式三维模型panolens.js 实现相关推荐

最新文章

热门文章