粗暴一點,直接上代碼:
第一步:
通過指令下載three.js
|
1
|
npm install three -S |
第二步:
在組件中引用
|
1
|
import * as THREE from 'three' |
第三步:
html部分
|
1
|
<div id="container"></div> |
js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<script> 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); } }, }</script> |
到此這篇關于vue中利用three.js實現全景圖的文章就介紹到這了,更多相關vue用three.js實現全景圖內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_44271127/article/details/110681791
