Javascript DZI Openseadragon和三个js球形图像_Javascript_Three.js_Openseadragon

Javascript DZI Openseadragon和三个js球形图像

javascript three.js

Javascript DZI Openseadragon和三个js球形图像,javascript,three.js,openseadragon,Javascript,Three.js,Openseadragon,我使用下面的源代码（三个js）将平面图像转换为球形图像球面图像转换正文{边距：0；溢出：隐藏；背景色：#000；} var-viewer=openseadagon({ id:“openseadragon1”， wrapHorizontal：“真的”， wrapVertical：“正确”， “真的”， defaultZoomLevel:1，可见率：1， minZoomLevel:1，前缀：“openseadragon_2.0/images/”， tileSources:“球形天珠” })

我使用下面的源代码（三个js）将平面图像转换为球形图像


球面图像转换
正文{边距：0；溢出：隐藏；背景色：#000；}
var-viewer=openseadagon({
id:“openseadragon1”，
wrapHorizontal：“真的”，
wrapVertical：“正确”，
“真的”，
defaultZoomLevel:1，
可见率：1，
minZoomLevel:1，
前缀：“openseadragon_2.0/images/”，
tileSources:“球形天珠”
});
var sphereContainer=document.getElementById（'sphere'）；
变量宽度=window.innerWidth，
高度=窗内高度；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（75，宽/高，11000）；
摄像机位置x=0.1；
var renderer=Detector.webgl？new THREE.WebGLRenderer（）：new THREE.CanvasRenderer（）；
设置大小（宽度、高度）；
var sphere=新的三点网格(
新三种球墨法（100,20,20），
新的三网格基本材料({
map:THREE.ImageUtils.loadTexture（'sphere-image.jpg'））
})
);
sphere.scale.x=-1；
场景。添加（球体）；
var控制装置=新的三个轨道控制装置（摄像机）；
controls.noPan=true；
controls.noZoom=true；
appendChild（renderer.doElement）；
render（）；
函数render（）{
控件更新（）；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
MouseWheel上的函数（事件）{
event.preventDefault（）；
if（event.wheelDeltaY）{//WebKit
camera.fov-=event.wheelDeltaY*0.05；
}else if（event.wheelDelta）{//Opera/IE9
camera.fov-=event.wheelDelta*0.05；
}else if（event.detail）{//Firefox
camera.fov+=event.detail*1.0；
}
camera.fov=Math.max（40，Math.min（100，camera.fov））；
camera.updateProjectMatrix（）；
}
文件。添加了监听器（“mousewheel”，onMouseWheel，false）；
文件。addEventListener（'DOMMouseScroll'，onMouseWheel，false）；

此外，我还将高分辨率图像转换为深度缩放图像格式。因此，目前我有一个文件夹，其中包含已处理（分割）的图像和dzi格式文件（图像文件夹和image.dzi文件）

现在我需要集成openseadragon库，以便在缩放图像后获得更好的性能。这将在特定坐标下渲染文件夹中的平铺图像

请给我一个建议，我们怎样才能做到这一点

提前感谢。

您可能需要将OpenSeadragon画布与THREE.js材质结合起来。在OSD端，您可以使用

viewer.drawer.canvas

访问canvas DOM元素。我不知道如何做THREE.js端

另一个方面是告诉观众（大概你会在屏幕外看到）何时放大和缩小。这可以通过

viewer.viewport.zoomTo

或

viewer.viewport.zoomBy

处理

对不起，我没有更多的帮助，但我认为至少添加这些信息是值得的

基于iangilman的答案，下面是一个工作示例，它将openseadragon的画布显示为3JS几何体的纹理

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body style="background:#fff;">
    <div id="seadragon-viewer" style="width:800px; height:200px;"></div>
    <script src="http://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
    <canvas id="canvas"></canvas>
    <script id="jsbin-javascript">
    var duomo = {
        Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: "http://localhost:8000/images/duomo/duomo_files/",
            Format: "jpg",
            Overlap: "2",
            TileSize: "256",
            Size: {
                Width:  "13920",
                Height: "10200"
            }
        }
    };

    var viewer = OpenSeadragon({
        id: "seadragon-viewer",
        prefixUrl: "http://openseadragon.github.io/openseadragon/images/",
        tileSources: duomo
    });
    var width = window.innerWidth, height = window.innerHeight / 2;
    var size = 256;
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

    var camera, scene, renderer, geometry, texture, mesh;



    function init() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

      scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
        camera.position.z = 500;
        scene.add(camera);

        texture = new THREE.Texture(viewer.drawer.canvas);
        var material = new THREE.MeshBasicMaterial({ map: texture });
        geometry = new THREE.BoxGeometry( 300, 300, 300 );
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

    }

    function animate() {
        requestAnimationFrame(animate);

        texture.needsUpdate = true;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    init();
    animate();
    </script>
    </body>
    </html>


JS-Bin
var duomo={
图片：{
xmlns:“http://schemas.microsoft.com/deepzoom/2008",
Url:“http://localhost:8000/images/duomo/duomo_files/",
格式：“jpg”，
重叠：“2”，
瓷砖大小：“256”，
尺寸：{
宽度：“13920”，
高度：“10200”
}
}
};
var-viewer=openseadagon({
id:“seadragon查看器”，
前缀：http://openseadragon.github.io/openseadragon/images/",
瓷砖资源：大教堂
});
变量宽度=window.innerWidth，高度=window.innerHeight/2；
变量大小=256；
var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
摄像机、场景、渲染器、几何体、纹理、网格；
函数init（）{
renderer=new THREE.WebGLRenderer（）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（70，宽/高，11000）；
摄像机位置z=500；
场景。添加（摄影机）；
纹理=新的三点纹理（viewer.drawer.canvas）；
var material=new THREE.MeshBasicMaterial（{map:texture}）；
几何图形=新的3.BoxGeometry（300300300）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
}
函数animate（）{
请求动画帧（动画）；
texture.needsUpdate=true；
网格旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
}
init（）；
制作动画（）；

我还不知道我要用它做什么，但我把它放在了极端核心的可视化项目下并存档了+1.寻找灵感。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body style="background:#fff;">
    <div id="seadragon-viewer" style="width:800px; height:200px;"></div>
    <script src="http://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
    <canvas id="canvas"></canvas>
    <script id="jsbin-javascript">
    var duomo = {
        Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: "http://localhost:8000/images/duomo/duomo_files/",
            Format: "jpg",
            Overlap: "2",
            TileSize: "256",
            Size: {
                Width:  "13920",
                Height: "10200"
            }
        }
    };

    var viewer = OpenSeadragon({
        id: "seadragon-viewer",
        prefixUrl: "http://openseadragon.github.io/openseadragon/images/",
        tileSources: duomo
    });
    var width = window.innerWidth, height = window.innerHeight / 2;
    var size = 256;
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

    var camera, scene, renderer, geometry, texture, mesh;



    function init() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

      scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
        camera.position.z = 500;
        scene.add(camera);

        texture = new THREE.Texture(viewer.drawer.canvas);
        var material = new THREE.MeshBasicMaterial({ map: texture });
        geometry = new THREE.BoxGeometry( 300, 300, 300 );
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

    }

    function animate() {
        requestAnimationFrame(animate);

        texture.needsUpdate = true;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    init();
    animate();
    </script>
    </body>
    </html>