- 博客(70)
- 收藏
- 关注
RSS订阅原创 汇总：五个开源的Three.js项目
汇总：五个开源的Three.js项目。Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。其应用场景广泛，包括网页游戏、数据可视化、虚拟现实（VR）、增强现实（AR）、艺术展示和教育工具等，几乎覆盖了所有需要在网页中展示3D内容的领域。
2024-03-30 11:19:26
2992
原创 OpenGL，WebGL基于HTML5/WebGL的建模及构建3D场景
webgl、OpenGL，WebGL，定义了一套API，能够允许在网页中的canvas标签中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3D图形API。
2022-07-24 16:33:56
4210
2
翻译 Three.js开源库
Three.js是一个javascript库，它包装了浏览器提供的webgl接口，用于在网页上实现3d动画。特别是在VR/AR/MR/XR/元宇宙等开发上。都会用的到。下面小编分享下整理的一些Three.js开源库。
2022-01-15 16:50:11
1690
转载 React Three.js 增加hdr环境贴图和背景图片的方法
React Three.js 增加hdr环境贴图和背景图片的方法：import React, { Suspense, useEffect } from 'react'import { Canvas, useThree, useLoader } from '@react-three/fiber'import * as THREE from 'three'import { OrbitControls } from '@react-three/drei'import { RGBELoader }
2021-12-19 21:24:46
2710
翻译 WebGL技术研究：Threejs、SceneJS、ThingJS等框架优缺点对比分析
WebGL技术研究：Threejs、SceneJS、ThingJS等框架优缺点对比分析。WebGL研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址）。
2021-12-19 20:58:41
17267
转载 基于WebGL的10大开源框架及各自特点 | 整理
WebGL是基于OpenGL的JavaScript API /库，允许Web浏览器在浏览器中渲染3D / 2D图形，而无需安装额外的插件，桌面应用程序，任何第三方插件或浏览器扩展。WebGL框架和库用于创建交互式展示，基于浏览器的游戏，详细的科学和医学可视化/模拟，虚拟现实（VR）和混合现实（MR）应用程序。WebGL已在游戏，工程，数据分析，地理空间分析，科学和医学可视化与模拟等多个行业中使用。
2021-12-19 14:48:51
3325
翻译 基于Three.js的动效方案
目录背景Three 基础Camera 相机Scene 场景GroupGeometry 几何体Material 材质Mesh网格对象Renderer 渲染器物体动画Animations贴图动画粒子动画创建粒子粒子运动tween.js相机动画Controls相机动线小结参考资料背景Threejs（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化
2021-07-12 20:30:30
1849
1
翻译 Everpano 3D导航插件Navigator Plugin的一些理解实例
Everpano 3D导航插件： 曾经想过做360全景虚拟漫游项目让游览，更清晰，不需要用箭头弄乱全景漫游，允许用户自由浏览内容，所以这里是Everpano 3D导航插件Navigator Plugin可以满足。此插件允许一种新的用户交互方式，从现在开始，用户无需搜索热点，而同时又将您的全景图弄得一团糟，而只需单击到全景图中的任意点即可，以防万一我们可以提供场景，否则执行特定操作以使用户...
2019-11-23 00:43:01
3185
1
原创 krpano教程 - krpano中嵌入html页面，实现点击弹出html网页iframe窗口
krpano教程 - krpano中嵌入html页面，实现点击弹出html网页iframe窗口 这是krpano 1.19 版本之后的新扩展，就是可将html页面（iframe）作为热点放到3D空间中。你可以如封面那样放入一个youku的embed视频，或者像下图那样直接放入一个html页面。因为这个就是一个可以变形的iframe。要做到这种效果，需要哪些条件呢？基础代码：首...
2019-11-15 23:59:40
5429
1
转载 krpano教程 - 制作krpano项目启动画面
1、主logo启动说明 krpano项目启动画面是全景漫游中很抢眼球的一个环节，在视觉为先的时代，优秀的启动画面可能比好的导航还能加分。今天我们就来讲讲如何添加启动画面。首先告诉大家官方案例的位置。下面是在线观看官方案例。如果你下载了krpano安装包，其位置就在krpano 1.18.6。官方案例位置：/examples/xml-usage/introimage/introimage.ht...
2019-11-15 20:20:34
2040
原创 krpano和js怎样互通代码。krpano调用外部JS
1、js引用全景的xml文件，通过访问html打开全景<div id="pano" style="width:100%;height:100%;position: absolute;z-index:9;top:0px;"> <noscript><table style="width:100%;height:100%;"><tr style="ver...
2019-11-15 18:06:01
1227
1
原创 Krpano教程：kepano全景信息框的显示与关闭textfield插件的使用
Krpano教程：kepano全景信息框的显示与关闭textfield插件的使用。以下代码全部都写在<scene></scene>里面<!-- 文本框的属性 textfield.swf是文字插件，首先要让文本框的图层不可显示 --><layer name="hotspot_pos_info" url="%SWFPATH%/plugins/text...
2019-11-15 17:59:38
1338
原创 krpano1.20 - 深度图支持，深度图建模
什么是深度图？深度图通常是图像，其中像素颜色（通常是灰度）定义到特定表面的距离（或“深度”）。此处以球面全景图像为例，再加上相关的球面深度图图像-深度图图像中的灰色调越深，离表面越远：krpano1.20 - 深度图支持，深度图建模为什么选择深度图？知道像素的深度可以从图像生成新的视点。这意味着从与原始拍摄位置不同的相机位置查看图像。这可以做很多好事：...
2019-11-14 22:54:33
3758
7
翻译 krpano 1.20升级文中说明
深度图支持/ 3D游览（示例） 具有正常（非立体声）全景图像的感知深度的3D立体渲染。 6DoF（6自由度）支持-意味着在全景图像内的3D空间中查找和移动。 除“经典”深度图图像外，还支持3D几何模型以提供深度信息。 可与球形，立方和多分辨率立方全景图一起使用。 无缝的3D过渡。 改进的3D热点支持。 具有完整的VR支持：位置跟踪，VR控制器支持。 立体立体立体声支持...
2019-11-14 22:47:55
2428
原创 krpano教程 - 使用HTML元素作为krpano启动画面
krpano启动画面的内容，通常会在krpano代码内设计一个layer元素，且全屏覆盖在全景之上。当全景图加载完成或预览图加载完成时，则移除layer元素（让layer的visible为false，或者将其坐标位置设置到屏幕外）。 问题是，有时候加载krpano viewer文件（tour.js）以及分析krpano xml这个时间也比较长，导致该layer元素出现的时机较晚，没有...
2019-11-14 21:45:58
1850
翻译 three.js开发全景视频播放器的现实方法
业余弄弄three.js。想用three.js实现播放全景视频。研究了一段。搜索很多资料。感觉这一遍很棒。搜藏分享下。原理：将video标签拉伸显示在three.js场景的一个球模型上，用相机在中间播放渲染。基础：基于three.js官方案例中的全景视频播放（three.js webgl - equirectangular video panorama）操作过程：对官方demo进行视频...
2019-11-12 12:53:00
4798
原创 krpano教程之字幕添加，配合语音解说滚动字幕
目录说明：原理：效果截图：步骤及原理：说明： krpano字幕是指介绍语音的字幕，字幕随着语音的播放而滚动，随语音暂停而暂停。字幕添加的前提是用之前的方法添加过介绍语音。原理： 字幕层在溢出隐藏的父元素中向右滑动，当点击声音控制按钮时，字幕位置被固定，再次点击时继续右滑。效果截图：krpano滚动字幕添加 - 参考 91拓客...
2019-11-12 12:20:19
1472
1
原创 krpano教程之鼠标样式修改
krpano教程之鼠标样式修改，主要涉及cursors.js文件。可以定义多个鼠标样式。具体cursors.js代码：<krpano ><events onxmlcomplete="action(qtvrcursor);" /><!--鼠标样式样式属性开始 --> <!--（1）--> <action name="qtv...
2019-11-12 12:05:46
574
原创 krpano教程之 - 给krpano皮肤缩略图加上文本标题
效果： 在缩略图上添加文本，显示缩略图名称。方法：将皮肤中的skin_addthumbs 方法替换为一下代码。<action name="skin_addthumbs"> if(skin_settings.thumbs == false, set(layer[skin_btn_thumbs].visible,false); ...
2019-11-12 11:34:48
1329
原创 【KRpano360全景教程 】 - krpano地图导航radar插件的使用
1、krpano地图导航效果： 点击地图按钮时，小地图移入，再次点击时移出。 地图上显示表示场景位置的坐标点，和可控制场景观看方向的雷达区。2、krpano地图导航插件： radar.js（plugins） radar.swf（plugins）3、用到的图片素材： 1.地图开关按钮 2.场景小地图 3.雷达标点的选中和未选中两张图4、krpan...
2019-11-12 11:26:43
4021
1
原创 krpano教程 - 使用外部JS来控制背景音乐开关。
krpano教程 - 使用外部JS来控制背景音乐开关。<plugin name=″snd″ url=″soundonoff.png″ align=″leftbottom″ x=″10″ y=″10″ alpha=″0.25″ scale=″0.5″ onover=″tween(alpha,1);″ onout=″tween(alpha,0.25);″crop=″0|0|50|50″...
2019-11-11 21:35:43
658
原创 Krpano音乐控制按钮：实现对音乐的播放、暂停、关闭的控制
1.引入KRpano soundinterface插件<plugin name="soundinterface"url="%SWFPATH%/plugins/soundinterface.swf"alturl="%SWFPATH%/plugins/soundinterface.js"...
2019-11-11 20:24:51
1244
转载 Krpano 开启多边形编辑模式，Krpano多边形热区编辑器Editor插件用法
检查全景项目文件夹下的plugins文件夹内是否有editor.swf文件，没有的话，从主目录下面的viewer/plugins中拷贝过去企业号<plugin url="plugins/editor.swf" keep="true"/>进入tour_editor.html，在下方可以看到编辑按钮editor。Krpano多边形编辑器点击后显示其他按钮，hotspot...
2019-10-20 21:28:55
3610
转载 krpano 热点热区多点图片鼠标快速定位polygonal插件
在与tour.xml同级目录下创建polyPosition.xml文件。然后直接把polyPosition.xml插件引入tour.xml文件即可。即在tour.xml中<krpano>标签的第二行写入<include url="polyPosition.xml" />polyPosition.xml插件代码如下：<krpano> &l...
2019-10-19 19:28:46
674
原创 Web3D编程总结——Threejs 3D碰撞检测初探初探
自己动手写一个方法比分析他人的写的方法困难很多，由此而来的对程序的进一步理解也是分析别人的代码很难得到的。一、先来几张效果图：1、场景中有两个半径为1的球体，蓝色线段从球心出发指向球体的“正向”2、物体被选中后改变纹理图片和透明度，可以使用“w、s、a、d、空格、ctrl”控制物体相对于物体的正向“前、后、左、右、上、下”移动，按住按键时间越长移动速度越快，绿色线段由球心指向物体运...
2019-10-09 23:29:25
2664
2
原创 krpano教程 - autorotate自动旋转标签中文说明
krpano教程 - autorotate自动旋转标签中文说明<autorotate enabled="false" 是否开启自动旋转 waittime="1.5" 用户不对屏幕操作后，开始自动旋转的等待秒数 accel="1.0" 旋转扭曲的速度：角度/秒 speed="10....
2019-10-09 23:27:08
657
转载 Krpano使用Javascript Html5 Plugin 方法编写Krpano一键导览功能
1. 最终实现效果如下Krpano一键导览功能2、样式表.tour-wapper { pointer-events: none;}.tour-text-wapper { width: 100%; height: 80px;}.tour-wapper .tour-text { line-height: 80px; background:...
2019-09-23 17:49:51
1428
2
转载 krpano教程 -look参数 loadscene，looktohotspot，lookto，zoomto 跳转过渡场景介绍
krpano教程 -look参数 loadscene，looktohotspot，lookto，zoomto 跳转过渡场景介绍loadscene ：跳转热点 - 过渡效果，就是切换scene时，两个scene之间的过渡效果。loadscene(name,null,第三参数,第四参数) 第一参数：定义名称name = 名称可以是编号 第二参数：载入附带参数（如果没...
2019-09-21 17:13:44
1697
转载 Krpano全景：在javascript中动态添加/删除/修改（位置）热点（向后端写入）
目录接下来看在JS中的方法：1.手动添加热点（点击图上添加点）2.查找热点3.修改热点4.删除热点其他方法作为管理员，在管理全景时会涉及到各个标签的操作，本篇文章介绍在JS中对热点的操作，其数据可传到后端并写入数据库。首先先给一个在xml文件中的动态热点添加的方法，下面的代码直接把两个url图片换了就可以直接看效果：<hotspot name="mark...
2019-09-21 14:36:10
3055
1
原创 关于浏览器flash插件遇到的一些坑
在krpano开发的时候总会跟浏览器和flash打交道。网络收集整理一些遇到的坑。如果没安装好flash插件，将导致krpano软件自带的热点编辑器无法使用，例如热点添加、图片热点、视频热点、多边形热点都无法正常添加，小编建议您可以尝试以下步骤进行处理。1、更换浏览器，使用谷歌或火狐浏览器尝试。2、重装flash插件，后重启浏览器或重启电脑再试，请参考：flash浏览器插件官方下载...
2019-09-21 12:42:51
1153
转载 Krpano全景制作中，无法显示多边形/图形热点编辑器editor的解决办法
在krpano制作全景时，我们有时候会用到多边形选区。遇到过多边形选区不显示的问题。这多数是Flash导致的。下面整理了一些解决办法。1、首先我们是在代码中插入编辑器插件，准备编辑多边形热点或图片视频热点，但是发现编辑器没出现在网页中。<plugin url="%SWFPATH%/plugins/editor.swf" keep="true"/>2、我们应该检查一...
2019-09-21 12:23:32
1438
原创 krpano360全景 - 音乐控制（关闭暂停打开恢复）
1、引入声音控件在tour.xml加入导入插件代码<plugin name="soundinterface" url="%SWFPATH%/plugins/soundinterface.swf" alturl="%SWFPATH%/plugins/soundinterface.js" rootpath="" prelo...
2019-09-19 17:07:12
1478
转载 krpano（HTML5 viewer）中使用自定义字体样式
通常设备内置的字体是有限的，而且往往也不是我们想要的效果。我们需要也希望能够在krpano中（HTML5内核下）使用自定义的字体样式。下面是演示效果，一个是自定义的中文字体一个是英文字体。krpano（HTML5 viewer）中使用自定义字体样式第一步：下载字体假设我们想要安卓字体Roboto Regular。点连接下载字体。我们将字体压缩包解压，将TFF文件放在我们的项目...
2019-08-25 15:59:20
811
原创 KRpano：同一全景漫游场景下全局声音与多场景声音的添加
需求：背景音乐需要一直播放，无论切换场景与否，同时循环播放。另外每个场景都有自己的声音（解说词）。解决方案：<pre name="code" class="html"><krpano onstart="playsound(bg, backgroundmusic.mp3,0); loadscene(scene1,null,MERGE);"><plugin...
2019-08-22 16:57:23
1567
原创 krpano教程：背景音乐的添加与控制
步骤如下：1.添加音乐控制插件 <!-- START:音乐控制 --> <plugin name="soundinterface" url="%SWFPATH%/plugins/soundinterface.swf" alturl="%SWFPATH%/plugins/soundinterface.js" rootpath="" preload="true" k...
2019-08-22 16:54:48
2376
原创 krpano教程：Sound Interface声音插件中文说明
插件说明：声音插件可以让krpano增加声音、音乐和在xml文件中对声音进行控制. 插件必须一次加载全部音乐，没缓存加载. 通过插件动作控制声音播放和停止. HTML5 / iOS (iPhone/iPad) 不定一定可以播放mp3和mp4文件，可以用ogg或wav文件同时加载保证播放成功.语法：<plugin name="soundinterface" ur...
2019-08-16 04:49:07
1871
转载 krpano教程：Videoplayer插件中文说明
插件说明：用于插入视频到全景中的功能插件 通过<layer>插入视频, 通过 <hotspot>插入视频, 作为全景视频，设置<image>为全景视频参数.语法：1、普通layer形式插入视频: <layer name="video" url.flash="videoplayer.swf" url.html5...
2019-08-16 04:45:24
5165
6
原创 krpano让场景开始即展示图片，10秒后自动隐藏
krpano每个场景开始时都显示一张图片在正中央，然后图片在10秒后自动消失或用户可以自行点击图片隐藏。解决方案：为了让所显示的图片的自适应屏幕尺寸，首先在tour.xml插入下面的代码（不要放在scene标签内）：<action name="picture_resize"> <!-- 使用屏幕宽度或高度的百分之九十 --> div(aspect, l...
2019-08-15 00:02:12
862
原创 KRPANO - 点击按钮关闭全部场景的语音解说
KRPANO - 点击按钮关闭全部场景的语音解说stopallsounds(globalstop*)停止播放全部声音globalstop= true或false，默认false (*可选)默认下，在插件下播放的声音会停止，但通常会连同flash的声音也会一同停止，例如视频中的声音。...
2019-08-14 23:49:30
630
原创 krpano 全景视频，其UC和一部分浏览器播放并不起到作用，ios上面视频弹出播放，安卓上面黑屏播放，不支持,求解决方式
这里会用到：videoplayer插件完全解析解决安卓微信、QQ全景视频播放的视频插件，替换即可。下载第三方插件的文件 ：myvideoplayer.js/** * @return {[type]} [description] */var krpanoplugin = function() { function R(a) { return "boolean" =...
2019-08-14 23:47:20
1249
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人