vue中利用中利用three.js实现全景图的完整示例实现全景图的完整示例
粗暴一点,直接上代码:
第一步第一步:
通过指令下载three.js
npm install three -S
第二步第二步:
在组件中引用
import * as THREE from 'three'
第三步第三步:
html部分
<div id="container"></div>
js部分
<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);
评论0