Javascript實現(xiàn)360度全景

發(fā)布日期：2022/6/16 19:24:13      瀏覽量：

    360 全景瀏覽是一種性價比很高的虛擬現(xiàn)實解決方案，給人一種全新的瀏覽體驗，讓你足不出戶就能身臨其境地感受到現(xiàn)場的環(huán)境。該技術被廣泛地應用在房產、酒店、家居等領域。

    下面我們使用三種方法討論一個 360 全景的實現(xiàn)。

一、CSS3

• 利用 CSS 中的變換、旋轉等屬性就可以實現(xiàn)一個 360 全景。實現(xiàn)的基本思路如下：
• 利用 CSS3 做出一個 3D 立方體。

• 在立方體的 6 個面設置目標圖片（利用全景工具導出的圖片，一共有 6 張）。
• 使用 perspective、translateZ、transform-style: preserve-3d 等屬性改變視圖的大小。

• 添加觸摸事件改變 translateX、translateY 的角度數(shù)即可實現(xiàn)一個基本的全景圖效果。
• 通過調整容器樣式的 perspective 屬性值，將視角放置在立方體中。將每個面的尺寸放大，添加上全景圖切出的 6 面圖，添加上鼠標事件，便可實現(xiàn) 360 全景效果。

• https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/404b79d0218c4144bf17375cff666cfe~tplv-k3u1fbpfcp-zoom-1.image
• https://www.cnblogs.com/yanggeng/p/11285856.html

二、WebGL3D引擎

3D引擎先搭一個基本的3D場景，下面的演示使用three.js，同類的3D引擎還有babylon.js，playcanvas

var scene, camera, renderer; function initThree(){ //場景 scene = new THREE.Scene(); //鏡頭 camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
    camera.position.set(0, 0, 0.01); //渲染器 renderer = new THREE.WebGLRenderer();
    renderer.setSize(document.body.clientWidth, document.body.clientHeight); document.getElementById("container").appendChild(renderer.domElement); //鏡頭控制器 var controls = new THREE.OrbitControls(camera, renderer.domElement); //一會兒在這里添加3D物體 loop();
} //幀同步重繪 function loop() { requestAnimationFrame(loop);
    renderer.render(scene, camera);
} window.onload = initThree;

三、CSS3D

css3d-engine 輕量引擎

window.onload=initCSS3D; function initCSS3D(){ var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).update(); document.getElementById(’container’).appendChild(s.el); var box = new C3D.Skybox();
    box.size(954).position(0, 0, 0).material({ front: {image: "images/scene_front.jpeg"}, back: {image: "images/scene_back.jpeg"}, left: {image: "images/scene_right.jpeg"}, right: {image: "images/scene_left.jpeg"}, up: {image: "images/scene_top.jpeg"}, down: {image: "images/scene_bottom.jpeg"},

    }).update();
    s.addChild(box); function loop() {
        angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
        angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;

        s.camera.rotation(angleY, -angleX, 0).updateT(); requestAnimationFrame(loop);
    } loop(); var lastMouseX = 0; var lastMouseY = 0; var curMouseX = 0; var curMouseY = 0; var lastAngleX = 0; var lastAngleY = 0; var angleX = 0; var angleY = 0; document.addEventListener("mousedown", mouseDownHandler); document.addEventListener("mouseup", mouseUpHandler); function mouseDownHandler(evt) {
        lastMouseX = curMouseX = evt.pageX;
        lastMouseY = curMouseY = evt.pageY;
        lastAngleX = angleX;
        lastAngleY = angleY; document.addEventListener("mousemove", mouseMoveHandler);
    } function mouseMoveHandler(evt) {
        curMouseX = evt.pageX;
        curMouseY = evt.pageY;
    } function mouseUpHandler(evt) {
        curMouseX = evt.pageX;
        curMouseY = evt.pageY; document.removeEventListener("mousemove", mouseMoveHandler);
    }
}