vue中利用three.js实现全景图的完整示例
139 浏览量
2021-01-18
15:24:00
上传
评论 4
收藏 34KB PDF 举报
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);
资源评论
weixin_38613154
- 粉丝: 14
- 资源: 987
最新资源
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
- 基于C++实现的风力发电气动平衡监测系统+源代码+测量数据(高分课程设计)
- 毕业设计- 基于STM32F103C8T6 单片机，物联网技术的太阳能发电装置+源代码+文档说明+架构图+界面截图
- 基于 LSTM（长短期记忆）（即改进的循环神经网络）预测风力发电厂中风力涡轮机产生的功率+源代码+文档说明
- 基于stm32f103+空心杯电机+oled按键+运动算法
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
