[摘要]krpano提供了插入threejs的官方样例，效果如下：
由于是图片热点形式，支持VR模式内显示。
至于什么是threejs? 可以先了解一下, Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。(百度百科)
使用方法
1、插入threejs插件文件
|
1 2 |
<!-- add the custom ThreeJS plugin --> <plugin name="threejs" url="three.krpanoplugin.js" keep="true" /> |
2、找到插件文件，如下：
3、在插件文件中插入threejs模型对应的js，并设置热点位置与大小
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 读取threejs模型文件 load_object_json("monster.js", true, {ath:+30, atv:+15, depth:500, scale:0.1, rx:180, ry:60 ,rz:0, ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }}); load_object_json("flamingo.js", true, {ath:-110, atv:-20, depth:700, scale:1.0, rx:-10, ry:250, rz:180, ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }}); load_object_json("horse.js", true, {ath:-58, atv:+7, depth:1000, scale:1.0, rx:180, ry:233, rz:0, ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }}, function(obj){ obj.material.color.setHex(0xAA5522); } ); // 创建三维文字box box = new THREE.Mesh(new THREE.BoxGeometry(500,500,500), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture(resolve_url_path("box.jpg"))})); assign_object_properties(box, "box", {ath:160, atv:-3, depth:2000, ondown:function(obj){ obj.properties.scale *= 1.2; }, onup:function(obj){ obj.properties.scale /= 1.2; }}); scene.add( box ); // 增加场景光源 scene.add( new THREE.AmbientLight(0x333333) ); var directionalLight = new THREE.DirectionalLight(0xFFFFFF); directionalLight.position.x = 0.5; directionalLight.position.y = -1; directionalLight.position.z = 0; directionalLight.position.normalize(); scene.add( directionalLight ); |
案例下载地址
