1:首先创建一个vue的基础项目
vue create demo
2:启动并打开项目
3:在生成的public文件夹下找到Index.html,然后在script标签中引入three.js
<script src="https://cdn.jsdelivr.net/npm/three@0.93.0/build/three.min.js"></script>
4:在template模块中创建一个div,并绑定一个id
<div ref="container" id="container" style="width: 100%; height: 100%"></div>
其次,需要给html,body,默认的容器#app这三类元素设定宽高(必须)
5:在data中定义全局变量
data() {
return {
sceneUrl: '', // 需要预览的图片绝对路径
camera: null,
scene: null,
renderer: null,
isUserInteracting: false,
onPointerDownPointerX: 0,
onPointerDownPointerY: 0,
lon: 0,
onPointerDownLon: 0,
lat: 0,
onPointerDownLat: 0,
phi: 0,
theta: 0,
target: new THREE.Vector3()
}
}
6:在methods中写入方法
methods: {
init() {
let textureLoader = new THREE.TextureLoader();
textureLoader.load(this.sceneUrl, (texture) => {
texture.mapping = THREE.UVMapping;
this.initImg(texture);
this.render();
});
},
initImg(texture) {
let container, mesh;
// 容器宽度、高度
let containerWidth = this.$refs.container.offsetWidth;
let containerHeight = this.$refs.container.offsetHeight;
container = document.getElementById('container');
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
// this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setSize(containerWidth, containerHeight);
let childs = container.childNodes;
if (container.childNodes.length > 0) {
container.removeChild(childs[0]);
container.appendChild(this.renderer.domElement);
} else {
container.appendChild(this.renderer.domElement);
}
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(60, containerWidth / containerHeight , 1, 1000);
mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(500, 32, 16), new THREE.MeshBasicMaterial({ map: texture }));
mesh.geometry.scale(-1, 1, 1);
this.scene.add(mesh);
container.addEventListener('mousedown', this.onDocumentMouseDown, false);
container.addEventListener('mousemove', this.onDocumentMouseMove, false);
container.addEventListener('mouseup', this.onDocumentMouseUp, false);
container.addEventListener('mousewheel', this.onDocumentMouseWheel, false);
container.addEventListener('touchstart', this.onDocumentTouchStart, false);
container.addEventListener('touchmove', this.onDocumentTouchMove, false);
},
onDocumentMouseDown(event) {
event.preventDefault();
this.isUserInteracting = true;
this.onPointerDownPointerX = event.clientX;
this.onPointerDownPointerY = event.clientY;
this.onPointerDownLon = this.lon;
this.onPointerDownLat = this.lat;
},
onDocumentMouseMove(event) {
if (this.isUserInteracting) {
this.lon = (this.onPointerDownPointerX - event.clientX) * 0.1 + this.onPointerDownLon;
this.lat = (event.clientY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;
this.render();
}
},
onDocumentMouseUp(event) {
this.isUserInteracting = false;
this.render();
},
onDocumentMouseWheel(event) {
this.camera.fov -= event.wheelDeltaY * 0.05;
this.camera.updateProjectionMatrix();
event = event || window.event;
if (event.stopPropagation) { // 这是取消冒泡
event.stopPropagation();
} else {
event.cancelBubble = true;
};
if (event.preventDefault) { // 这是取消默认行为
event.preventDefault();
} else {
event.returnValue = false;
};
this.render();
},
onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
this.onPointerDownPointerX = event.touches[0].pageX;
this.onPointerDownPointerY = event.touches[0].pageY;
this.onPointerDownLon = this.lon;
this.onPointerDownLat = this.lat;
}
},
onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
this.lon = (this.onPointerDownPointerX - event.touches[0].pageX) * 0.1 + this.onPointerDownLon;
this.lat = (event.touches[0].pageY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;
this.render();
}
},
render() {
this.lon += 0.15;
this.lat = Math.max(-85, Math.min(85, this.lat));
this.phi = THREE.Math.degToRad(90 - this.lat);
this.theta = THREE.Math.degToRad(this.lon);
this.camera.position.x = 100 * Math.sin(this.phi) * Math.cos(this.theta);
this.camera.position.y = 100 * Math.cos(this.phi);
this.camera.position.z = 100 * Math.sin(this.phi) * Math.sin(this.theta);
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
}
7:在mounted初始化中调用init方法
mounted() {
this.init()
}
8:最重要的一点,不要忘记在data中找到sceneUrl这个全局变量,它的值就是需要展示的图片路径。如果不引入就没有图片哦。
PS:当时做这个项目的时候也是第一次,借鉴了这位大佬的文章
https://blog.csdn.net/Thurmanwang/article/details/105495000
大家写完的时候可以多看看three.js和这个思路,挺不错的~