全景图 three.js VR 3D全景 VUE组件

引入three.js

#ltz{

width: 500px;

height: 300px;

background-color: #fff;

}

</style>

<div>

</div>

</template>

export default {

data(){

return{

renderer:'',

camera:'',

scene:'',

light:'',

stats:'',

controls:'',

gui:'',

mesh:'',

url:'../../../static/img/tencen.jpg'

}

methods:{

initRender() {

this.renderer = new THREE.WebGLRenderer({antialias: true});

//this.renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色

this.renderer.setSize(400, 300);

let ltzdom = document.getElementById('ltz')

console.log( ltzdom,'this.renderer')

ltzdom.appendChild(this.renderer.domElement);

initCamera() {

this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);

this.camera.position.set(10, 0, 0) //设置相机位置

this.camera.target = new THREE.Vector3( 0, 0, 0 );

initScene() {

this.scene = new THREE.Scene();

initModel() {

//轴辅助（每一个轴的长度）

var object = new THREE.AxesHelper(500);

this.scene.add(object); //坐标轴确定

//声明一个球体

var geometry = new THREE.SphereBufferGeometry( 500, 32, 32 );

// 反转X轴上的几何图形，使所有的面点向内。

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

//声明球体纹理

var material = new THREE.MeshBasicMaterial( {

map: new THREE.TextureLoader().load(this.url) //加载一整张纹理图片

} );

this.mesh = new THREE.Mesh( geometry, material );

this.scene.add( this.mesh );

//初始化性能插件

initStats() {

this.stats = new Stats();

let ltzdom = document.getElementById('static/img/tencen.jpg')

// console.log(this.stats,'document.getElementById()')

// ltzdom.appendChild(this.stats.dom);

//用户交互插件鼠标左键按住旋转，右键按住平移，滚轮缩放

initControls() {

this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

// 如果使用animate方法时，将此函数删除

//this.controls.addEventListener( 'change', render );

// 使动画循环使用时阻尼或自转意思是否有惯性

this.controls.enableDamping = true;

//动态阻尼系数就是鼠标拖拽旋转灵敏度

//this.controls.dampingFactor = 0.25;

//是否可以缩放

this.controls.enableZoom = true;

//是否自动旋转

this.controls.autoRotate = false;

//设置相机距离原点的最远距离

this.controls.minDistance = 20;

//设置相机距离原点的最远距离

this.controls.maxDistance = 10000;

//是否开启右键拖拽

this.controls.enablePan = false;

//生成gui设置配置项

// initGui() {

// //声明一个保存需求修改的相关数据的对象

// this.gui = {

// };

// var datGui = new dat.GUI();

// //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）

// },

render() {

this.renderer.render(this.scene, this.camera);

//窗口变动触发的函数

onWindowResize() {

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

this.camera.updateProjectionMatrix();

this.render();

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

animate() {

//更新控制器

this.controls.update();

this.render();

//更新性能插件

// this.stats.update();

requestAnimationFrame(this.animate);

init(){

this.initRender();

this.initScene();

this.initCamera();

this.initModel();

this.initControls();

// this.initStats();

// this.initGui();

this.animate();

// window.onresize = onWindowResize;

}

created(){

this.$nextTick(()=>{

this.init()

})

}

</script>

</style>

https://blog.csdn.net/qq_30100043/article/details/79069954

全景图 three.js VR 3D全景 VUE组件相关推荐

Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
vue 把组件挂载到视图_vue.js中，在一个vue组件中，想通过点击按钮，才加载另外一个目标vue组件，要怎么实现？...
展开全部 { data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } } Vue.js( ...
html调用手机陀螺仪,前端基于THREE.js的3D全景，支持鼠标控制和手机陀螺仪的切换...
/p> 'use strict' ;(function(_window) { var navigatorUserAgent = navigator.userAgent var iPhone = ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
Three.js打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
vue 项目使用three.js 实现3D看房效果
0.前言该教程能帮助直接写出vue项目的3D看房效果!!! 先上效果图 1.安装依赖 npm i three 2.vue代码这里文件名为three.vue <template>< ...
Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
3d全景的市场如何？该如何做好3d全景图？
我们现在看图片或者是看电视已经不仅仅是看清楚这么简单了,随着品味的上升,我们不再以简单的标清为标准,而开始追求高清以及超清画质.图片更加接近实物,就更加让人喜欢,因此很多行业对3d全景更加青睐.在互联 ...

全景图 three.js VR 3D全景 VUE组件

全景图 three.js VR 3D全景 VUE组件相关推荐

最新文章

热门文章