粗暴一點,直接上代碼:

第一步:

通過指令下載three.js

npm install three -S

第二步:

在組件中引用

import * as THREE from 'three'

第三步:

html部分

js部分

import * as THREE from 'three';

var camera;

var renderer;

var scene;

export default {

name: 'panorama',

data() {

return {

bigImg: require("../../../../../images/項目案例/001.jpg"),//全景圖圖片路徑

}

},

mounted() {

// 調用全景圖函數

this.$nextTick(() => {

this.init();

this.animate();

})

},

methods: {

// 全景圖配置函數---------------

init() {

var container = document.getElementById('container');

// 創建渲染器

renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio(window.devicePixelRatio);

// 設置畫布的寬高

renderer.setSize(window.innerWidth, window.innerHeight);

// 判斷容器中子元素的長度

let childs = container.childNodes;

if (container.childNodes.length > 0) {

container.removeChild(childs[0]);

container.appendChild(renderer.domElement);

} else {

container.appendChild(renderer.domElement);

}

// container.appendChild(renderer.domElement);

// 創建場景

scene = new THREE.Scene();

// 創建相機

camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);

camera.position.set(0, 0, 0);

var material = new THREE.MeshBasicMaterial();//材質

var texture = new THREE.TextureLoader().load(this.bigImg);

material.map = texture;

var skyBox = new THREE.Mesh(

new THREE.SphereBufferGeometry(100, 100, 100),

material

);

skyBox.geometry.scale(1, 1, -1);

scene.add(skyBox);

window.addEventListener('resize', this.onWindowResize, false);

var bMouseDown = false;

var x = -1;

var y = -1;

// 添加鼠標事件

container.onmousedown = function (event) {

event.preventDefault();//取消默認事件

x = event.clientX;

y = event.clientY;

bMouseDown = true;

}

container.onmouseup = function (event) {

event.preventDefault();

bMouseDown = false;

}

container.onmousemove = function (event) {

event.preventDefault();

if (bMouseDown) {

skyBox.rotation.y += -0.005 * (event.clientX - x);

skyBox.rotation.x += -0.005 * (event.clientY - y);

if (skyBox.rotation.x > Math.PI / 2) {

skyBox.rotation.x = Math.PI / 2

}

if (skyBox.rotation.x < -Math.PI / 2) {

skyBox.rotation.x = -Math.PI / 2

}

x = event.clientX;

y = event.clientY;

}

}

container.onmousewheel = function (event) {

event.preventDefault();

if (event.wheelDelta != 0) {

camera.fov += event.wheelDelta > 0 ? 1 : -1;

if (camera.fov > 150) {

camera.fov = 150;

}

else if (camera.fov < 30) {

camera.fov = 30;

}

camera.updateProjectionMatrix();

}

}

},

onWindowResize() {

// 窗口縮放的時候,保證場景也跟著一起縮放

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

},

animate() {

requestAnimationFrame(this.animate);

renderer.render(scene, camera);

}

},

}

到此這篇關于vue中利用three.js實現全景圖的文章就介紹到這了,更多相關vue用three.js實現全景圖內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！

總結

以上是生活随笔為你收集整理的html 全景图three,vue中利用three.js实现全景图的完整示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。