devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【js&three.js】全景vr看房进阶版_vr js

作者：笔触狂放9 | 2024-02-16 18:21:43

赞

踩

vr js

three小结：

Scene场景

指包含了所有要渲染和呈现的三维对象、光源、相机以及其他相关元素的环境；场景可以被渲染引擎或图形库加载和处理，以生成最终的图像或动画

  • 常见属性：
  1. scene.background = new THREE.Color(0x000000); // 设置背景颜色为黑色
  2.  
  3. scene.fog = new THREE.Fog(0x000000, 0.1, 100); // 创建线性雾效，颜色为黑色，起始距离为0.1，结束距离为100
  • 常见方法:
  1. scene.add(mesh); // 将名为mesh的对象添加到场景中
  2.  
  3. scene.remove(mesh); // 从场景中移除名为mesh的对象
  4.  
  5. var obj = scene.getObjectByName('mesh'); // 获取名称为mesh的对象
  6.  
  7. scene.traverse(function(object) {
  8.   // 对每个对象执行的操作
  9.   console.log(object);
  10. });
  11.  
  12. scene.dispose(); // 清除场景及其相关资源

Geometry 几何体

指的是表示和描述三维对象形状的数据，描述了对象的形状

常用的Geometry（几何体）：

  • BufferGeometry   是three.js中高性能的几何体对象
  • BoxGeometry   表示立方体的几何体对象
  • SphereGeometry   表示球体的几何体对象
  • PlaneGeometry  表示平面的几何体对象
  • CylinderGeometry  表示圆柱体（包括圆柱体、圆锥体和管道）的几何体对象

Material 材质

指的是给定几何体表面外观的属性和特征，定义了对象的外观属性

常用的Material（材质）：

  • MeshBasicMaterial     是最简单的材质，不受场景光照的影响
  • MeshStandardMaterial      是一种基于物理渲染（PBR）的材质，提供了更真实和逼真的渲染效果
  • MeshPhysicalMaterial       是在MeshStandardMaterial基础上更进一步的物理材质

Mesh 网格模型

是由几何体和材质组合而成的实体，将几何体和材质组合成一个完整的实体

  • 方法举例:
  1. mesh.material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 设置网格的材质为红色基础材质
  2.  
  3. mesh.rotation.set(Math.PI / 2, 0, 0); // 设置网格绕X轴旋转90度
  4.  
  5. mesh.rotateY(Math.PI / 4); // 将网格绕Y轴旋转45度
  6.  
  7. mesh.position.set(0, 0, 0); // 设置网格的位置为原点
  8.
  • 属性举例： 
  1. mesh.visible = false; // 隐藏网格
  2.  
  3. mesh.material.opacity = 0.5; // 将网格材质的透明度设置为0.5

Camera 相机

用于模拟人眼视角和观察场景的虚拟设备

常用的Camera 相机：

  • PerspectiveCamera（透视相机）   模拟了人眼观察物体的效果，具有近大远小的特性
  • OrthographicCamera（正交相机）  以固定的大小渲染场景中的物体，不考虑距离远近而产生的透视效果

方法举例:

  1. camera.lookAt(new THREE.Vector3(0, 0, 0)); // 将相机对准场景原点
  2.  
  3. camera.updateProjectionMatrix(); // 更新相机的投影矩阵
  4.  
  5. const newCamera = camera.clone(); // 克隆相机

属性举例： 

  1. camera.position.set(0, 0, 10); // 设置相机在场景中的位置
  2.  
  3. camera.rotation.set(0, Math.PI / 2, 0); // 设置相机的旋转角度
  4.  
  5. camera.fov = 60; // 设置透视相机的视角大小为60度
  6.  
  7. camera.zoom = 2; // 将正交相机设置为缩放倍数为2

光源

 

AmbientLight（环境光）：环境光是一个均匀无方向的光源，用于模拟场景中无处不在的环境光照射。它不会产生阴影，对场景中的所有物体都产生均匀的照明效果。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光

PointLight（点光源）：点光源是一个从一个点向四面八方发射光线的光源。会在场景中产生逐渐减弱的光照效果，并且可以投射阴影。通常用于模拟灯泡、蜡烛等点光源 

  1. const pointLight = new THREE.PointLight(0xff0000, 1, 10); // 红色点光源
  2. pointLight.position.set(0, 3, 0)

DirectionalLight（平行光）：平行光是一种无限远、平行的光源，模拟太阳光。它是从一个特定的方向射来的光，所有光线都是平行的。平行光可以产生阴影，对场景中的物体产生类似于自然光的直射效果 

  1. const directionalLight = new THREE.DirectionalLight(0x00ff00, 1); // 绿色平行光
  2. directionalLight.position.set(-1, 2, 4);

SpotLight（聚光灯）：聚光灯是一个从一个点射出的光锥，具有指定的方向和光束角度。它可以投射出锥形的光束，并且可以产生阴影。聚光灯通常用于模拟手电筒、舞台灯光等

  1. const spotLight = new THREE.SpotLight(0x0000ff, 1, 10, Math.PI / 4, 0.5); // 蓝色聚光灯
  2. spotLight.position.set(2, 3, 0);
  3. spotLight.target.position.set(0, 0, 0);

WebGLRenderer 渲染器

用于在Web浏览器中使用WebGL绘制和呈现3D图形

OrbitControls   相机控件工具

使用户可以通过鼠标或触摸手势来旋转、缩放和平移相机，以改变场景的视角

属性举例： 

  1. controls.enabled = true; // 启用控制器
  2.  
  3. controls.minZoom = 0.5; // 设置相机的最小缩放倍数为0.5
  4. controls.maxZoom = 2; // 设置相机的最大缩放倍数为2
  5.  
  6. controls.enableRotate = true; // 启用旋转操作
  7. controls.enableZoom = true; // 启用缩放操作
  8. controls.enablePan = true; // 启用平移操作

效果展示：

目录展示：

 代码展示：

 path.js

  1. function path() {
  2.     return [{
  3.         name: "中式",
  4.         styleObj: {
  5.             background: '#409EFF'
  6.         },
  7.         children: [{
  8.             name: "客餐厅",
  9.             styleObj: {
  10.                 background: '#409EFF'
  11.             },
  12.             jpgNameArr: ["00125.jpg"]
  13.         }, {
  14.             name: "客厅",
  15.             styleObj: {
  16.                 background: null
  17.             },
  18.             jpgNameArr: ["0011.jpg"]
  19.         }, {
  20.             name: "餐厨",
  21.             styleObj: {
  22.                 background: null
  23.             },
  24.             jpgNameArr: ["0011.jpg"]
  25.         }, {
  26.             name: "卧室",
  27.             styleObj: {
  28.                 background: null
  29.             },
  30.             jpgNameArr: ["0011.jpg"]
  31.         }, {
  32.             name: "卫浴",
  33.             styleObj: {
  34.                 background: null
  35.             },
  36.             jpgNameArr: ["0011.jpg"]
  37.         }, {
  38.             name: "书房",
  39.             styleObj: {
  40.                 background: null
  41.             },
  42.             jpgNameArr: ["0011.jpg"]
  43.         }]
  44.     }, {
  45.         name: "现代",
  46.         styleObj: {
  47.             background: null
  48.         },
  49.         children: [{
  50.             name: "客餐厅",
  51.             styleObj: {
  52.                 background: null
  53.             },
  54.             jpgNameArr: ["0011.jpg"]
  55.         }, {
  56.             name: "客厅",
  57.             styleObj: {
  58.                 background: null
  59.             },
  60.             jpgNameArr: ["0011.jpg"]
  61.         }, {
  62.             name: "餐厨",
  63.             styleObj: {
  64.                 background: null
  65.             },
  66.             jpgNameArr: ["0011.jpg"]
  67.         }, {
  68.             name: "卧室",
  69.             styleObj: {
  70.                 background: null
  71.             },
  72.             jpgNameArr: ["0011.jpg"]
  73.         }, {
  74.             name: "卫浴",
  75.             styleObj: {
  76.                 background: null
  77.             },
  78.             jpgNameArr: ["0011.jpg"]
  79.         }]
  80.     }, {
  81.         name: "新古典",
  82.         styleObj: {
  83.             background: null
  84.         },
  85.         children: [{
  86.             name: "客餐厅",
  87.             styleObj: {
  88.                 background: null
  89.             },
  90.             jpgNameArr: ["0011.jpg"]
  91.         }, {
  92.             name: "客厅",
  93.             styleObj: {
  94.                 background: null
  95.             },
  96.             jpgNameArr: ["0011.jpg"]
  97.         }, {
  98.             name: "餐厨",
  99.             styleObj: {
  100.                 background: null
  101.             },
  102.             jpgNameArr: ["0011.jpg"]
  103.         }, {
  104.             name: "卧室",
  105.             styleObj: {
  106.                 background: null
  107.             },
  108.             jpgNameArr: ["0011.jpg"]
  109.         }, {
  110.             name: "卫浴",
  111.             styleObj: {
  112.                 background: null
  113.             },
  114.             jpgNameArr: ["0011.jpg"]
  115.         }]
  116.     }, {
  117.         name: "欧式",
  118.         styleObj: {
  119.             background: null
  120.         },
  121.         children: [{
  122.             name: "客餐厅",
  123.             styleObj: {
  124.                 background: null
  125.             },
  126.             jpgNameArr: ["0011.jpg"]
  127.         }, {
  128.             name: "客厅",
  129.             styleObj: {
  130.                 background: null
  131.             },
  132.             jpgNameArr: ["0011.jpg"]
  133.         }, {
  134.             name: "餐厨",
  135.             styleObj: {
  136.                 background: null
  137.             },
  138.             jpgNameArr: ["0011.jpg"]
  139.         }, {
  140.             name: "卧室",
  141.             styleObj: {
  142.                 background: null
  143.             },
  144.             jpgNameArr: ["0011.jpg"]
  145.         }, {
  146.             name: "卫浴",
  147.             styleObj: {
  148.                 background: null
  149.             },
  150.             jpgNameArr: ["0011.jpg"]
  151.         }]
  152.     }, {
  153.         name: "美式",
  154.         styleObj: {
  155.             background: null
  156.         },
  157.         children: [{
  158.             name: "客餐厅",
  159.             styleObj: {
  160.                 background: null
  161.             },
  162.             jpgNameArr: ["0011.jpg"]
  163.         }, {
  164.             name: "客厅",
  165.             styleObj: {
  166.                 background: null
  167.             },
  168.             jpgNameArr: ["0011.jpg"]
  169.         }, {
  170.             name: "餐厨",
  171.             styleObj: {
  172.                 background: null
  173.             },
  174.             jpgNameArr: ["0011.jpg"]
  175.         }, {
  176.             name: "卧室",
  177.             styleObj: {
  178.                 background: null
  179.             },
  180.             jpgNameArr: ["0011.jpg"]
  181.         }, {
  182.             name: "卫浴",
  183.             styleObj: {
  184.                 background: null
  185.             },
  186.             jpgNameArr: ["0011.jpg"]
  187.         }]
  188.     }, {
  189.         name: "北欧",
  190.         styleObj: {
  191.             background: null
  192.         },
  193.         children: [{
  194.             name: "客餐厅",
  195.             styleObj: {
  196.                 background: null
  197.             },
  198.             jpgNameArr: ["0011.jpg"]
  199.         }, {
  200.             name: "客厅",
  201.             styleObj: {
  202.                 background: null
  203.             },
  204.             jpgNameArr: ["0011.jpg"]
  205.         },{
  206.             name: "卧室",
  207.             styleObj: {
  208.                 background: null
  209.             },
  210.             jpgNameArr: ["0011.jpg"]
  211.         }]
  212.     }, {
  213.         name: "法式",
  214.         styleObj: {
  215.             background: null
  216.         },
  217.         children: [{
  218.             name: "客厅",
  219.             styleObj: {
  220.                 background: null
  221.             },
  222.             jpgNameArr: ["0011.jpg"]
  223.         }, {
  224.             name: "餐厨",
  225.             styleObj: {
  226.                 background: null
  227.             },
  228.             jpgNameArr: ["0011.jpg"]
  229.         }]
  230.     }]
  231.  
  232. }

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Three.js-webgl室内设计效果全景在线预览</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden;
  11.         }
  12.  
  13.         #menu {
  14.             position: absolute;
  15.             bottom: 0px;
  16.             color: #fff;
  17.             background: rgba(0, 0, 0, 0.5);
  18.             padding: 10px;
  19.             z-index: 102;
  20.             width: 500px;
  21.             height: 80px
  22.         }
  23.  
  24.         #menu>div {
  25.             padding: 5px;
  26.         }
  27.  
  28.         #menu span {
  29.             display: inline-block;
  30.             padding: 5px 10px;
  31.             cursor: pointer;
  32.         }
  33.  
  34.         .el-button--danger {
  35.             font-size: 25px !important;
  36.             background: rgba(0, 0, 0, 0.5) !important;
  37.             border-width: 0px !important;
  38.             width: 50px !important;
  39.             height: 50px !important;
  40.         }
  41.  
  42.         [v-cloak] {
  43.             display: none;
  44.         }
  45.     </style>
  46.     <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
  47.     <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
  48.     <script src="http://www.yanhuangxueyuan.com/js/vue@2.5.16.min.js"></script>
  49.     <!-- 主要用于功能按钮 -->
  50.     <script src="http://www.yanhuangxueyuan.com/js/element-ui/index.js"></script>
  51.     <!-- 主要用于弹出框 -->
  52.     <link rel="stylesheet" href="http://www.yanhuangxueyuan.com/js/element-ui/index.css">
  53.     <script src="path.js"></script>
  54. </head>
  55.  
  56. <body>
  57.     <div id="app" z-index="105">
  58.         <!-- 底部选择栏 -->
  59.         <div id="menu" :style="{left:width/2 + -250+'px'}">
  60.             <div><span style="font-weight:bold;cursor:default;"> 风格:</span><span v-for="obj in styleArr"
  61.                     @click="styleClick(obj)" :style="obj.styleObj"> {{ obj.name }}</span></div>
  62.             <div><span style="font-weight:bold;cursor:default;"> 位置:</span><span v-for="obj in posArr"
  63.                     @click="posClick(obj)" :style="obj.styleObj" v-if="obj.jpgNameArr.length"> {{ obj.name }}</span>
  64.             </div>
  65.         </div>
  66.         <!-- 顶部功能栏 使用的element-->
  67.         <div style="position: absolute;right:20px;top:20px">
  68.             <el-button type="danger" circle @click="audioClick()"><i><img
  69.                         :src="(audioBoool)?('./UI/打开声音.png'):('./UI/关闭声音.png')" alt="" height="20"
  70.                         width="20"></i></el-button>
  71.             <el-button type="danger" circle @click="ScreenClick()"><i><img
  72.                         :src="(ScreenBoool)?('./UI/全屏5.png'):('./UI/退出全屏.png')" alt="" width="18"
  73.                         height="18"></i></el-button>
  74.             <el-button type="danger" circle @click="rotateClick()"><i><img
  75.                         :src="(rotateBoool)?('./UI/旋转.png'):('./UI/停止旋转.png')" alt="" width="20"
  76.                         height="20"></i></el-button>
  77.             <el-button type="danger" circle @click="questionClick()"><i><img src="./UI/帮助5.png" alt="" width="22"
  78.                         height="22"></i></el-button>
  79.         </div>
  80.     </div>
  81.     <script>
  82.         // 创建场景
  83.         var scene = new THREE.Scene();
  84.         // 创建一个球体（Sphere）几何体
  85.         var box = new THREE.SphereGeometry(25, 50, 50);
  86.         // 创建一个基本网格材质
  87.         var material = new THREE.MeshBasicMaterial({
  88.             color: 0xffffff,
  89.             side: THREE.BackSide,
  90.         });
  91.         // 创建了一个网格对象实例
  92.         var mesh = new THREE.Mesh(box, material);
  93.         // 将网格对象添加到场景中，以便在渲染时呈现出来
  94.         scene.add(mesh);
  95.         // 创建了一个纹理加载器实例
  96.         var textureLoader = new THREE.TextureLoader();
  97.         // 创建了一个音频监听器实例
  98.         var listener = new THREE.AudioListener();
  99.         // 创建一个用于播放音频的对象
  100.         var audio = new THREE.Audio(listener);
  101.         // 创建一个纹理加载器，并调用 load() 方法加载指定路径的纹理图像
  102.         var texture = textureLoader.load('./风格/中式/客餐厅/00125.jpg', function (obj) {
  103.             vm.loading.close();
  104.             // 创建一个音频加载器
  105.             var audioLoader = new THREE.AudioLoader();
  106.             audioLoader.load('./音乐/琵琶语.mp3', function (AudioBuffer) {
  107.                 // 将加载的音频数据设置给 audio 对象
  108.                 audio.setBuffer(AudioBuffer);
  109.                 // 设置音频循环播放
  110.                 audio.setLoop(true);
  111.                 // 设置音频音量
  112.                 audio.setVolume(0.3);
  113.                 // 开始播放音频
  114.                 audio.play()
  115.             });
  116.             // 执行渲染
  117.             render()
  118.         });
  119.         // 网格对象将使用加载的纹理作为材质的贴图
  120.         mesh.material.map = texture;
  121.         // 当前窗口的宽度
  122.         var width = window.innerWidth;
  123.         // 获取当前窗口的高度
  124.         var height = window.innerHeight;
  125.         // 计算宽高比
  126.         var k = width / height;
  127.         // 创建相机
  128.         var camera = new THREE.PerspectiveCamera(60, k, 1, 1000);
  129.         // 设置相机的缩放比例为 1。表示相机的视野不进行缩放
  130.         camera.zoom = 1;
  131.         // 修改相机的属性后，需要调用该方法来更新相机的投影矩阵，确保改变后的属性生效
  132.         camera.updateProjectionMatrix();
  133.         // 设置相机的位置坐标   通过设置相机的位置，可以决定场景中的视角
  134.         camera.position.set(-0.87, 0.03, 0.4);
  135.         // 设置相机的视线方向朝向场景的原点
  136.         camera.lookAt(scene.position);
  137.         // 创建一个基于 WebGL 的渲染器对象
  138.         var renderer = new THREE.WebGLRenderer({
  139.             // 开启抗锯齿效果，提高渲染的质量
  140.             antialias: true,
  141.         });
  142.         // 设置渲染器的输出画布大小为窗口的宽度和高度
  143.         renderer.setSize(width, height);
  144.         // 将渲染器的 canvas 元素添加到页面的 body 中
  145.         document.body.appendChild(renderer.domElement);
  146.         // 创建时钟对象  用于跟踪时间的流逝，可以用来控制动画和其他与时间相关的操作
  147.         var clock = new THREE.Clock();
  148.         // 表示每秒帧数，这里设置为 30 帧
  149.         var FPS = 30;
  150.         // 计算每帧的时间间隔
  151.         var 刷新时间 = 1 / FPS;
  152.         var timeS = 0;
  153.  
  154.         function render() {
  155.             // 浏览器执行下一次渲染时调用 render 函数
  156.             requestAnimationFrame(render);
  157.             // getDelta() 返回上一次调用之后的时间差，即两次渲染之间的时间间隔
  158.             var 渲染间隔 = clock.getDelta();
  159.             timeS = timeS + 渲染间隔;
  160.             // 总运行时间是否大于刷新时间
  161.             if (timeS > 刷新时间) {
  162.                 // 使用渲染器对象 renderer 来渲染场景 scene 和相机 camera
  163.                 renderer.render(scene, camera);
  164.                 if (vm.rotateBoool) {
  165.                     // mesh 沿 Y 轴旋转 0.002 弧度
  166.                     mesh.rotateY(0.002)
  167.                 }
  168.                 timeS = 0
  169.             }
  170.         }
  171.         render();
  172.         // 创建了一个控制器对象，用于控制相机的旋转、缩放和平移等操作
  173.         var controls = new THREE.OrbitControls(camera);
  174.         // 禁用 OrbitControls 控制器对象的平移功能
  175.         controls.enablePan = false;
  176.         // 获取本地数据
  177.         var styleObjArr = path();
  178.         var vm = new Vue({
  179.             el: "#app",
  180.             data: {
  181.                 loading: null,
  182.                 styleArr: styleObjArr,
  183.                 styleChoose: null,
  184.                 posArr: null,
  185.                 posChoose: null,
  186.                 width: window.innerWidth,
  187.                 height: window.innerHeight,
  188.                 classPath: '中式/客餐厅',
  189.                 path: '',
  190.                 audioBoool: true,
  191.                 ScreenBoool: true,
  192.                 rotateBoool: true,
  193.                 N: styleObjArr[0].children[0].jpgNameArr.length,
  194.                 num: 1,
  195.             },
  196.             methods: {
  197.                 audioClick: function () {
  198.                     // 播放音乐
  199.                     if (this.audioBoool) {
  200.                         this.audioBoool = false;
  201.                         audio.pause()
  202.                     } else {
  203.                         // 暂停音乐
  204.                         this.audioBoool = true;
  205.                         audio.play()
  206.                     }
  207.                 },
  208.                 // 全屏方法
  209.                 ScreenClick: function () {
  210.                     if (this.ScreenBoool) {
  211.                         this.ScreenBoool = false;
  212.                         requestFullScreen()
  213.                     } else {
  214.                         this.ScreenBoool = true;
  215.                         exitFullscreen()
  216.                     }
  217.                 },
  218.                 questionClick: function () {
  219.                     // element弹框的的this.$alert
  220.                     this.$alert('按住左键不放上下左右拖动，可以旋转整个场景', '旋转操作', {})
  221.                 },
  222.                 // 旋转
  223.                 rotateClick: function () {
  224.                     if (this.rotateBoool) {
  225.                         this.rotateBoool = false
  226.                     } else {
  227.                         this.rotateBoool = true
  228.                     }
  229.                 },
  230.                 nextClick: function () {
  231.                     if (this.num < this.N) {
  232.                         this.num += 1
  233.                     } else {
  234.                         this.num = 1
  235.                     }
  236.                 },
  237.                 upClick: function () {
  238.                     if (this.num > 1) {
  239.                         this.num -= 1
  240.                     } else {
  241.                         this.num = this.N
  242.                     }
  243.                 },
  244.                 // 风格选择
  245.                 styleClick: function (styleObj) {
  246.                     this.loading = this.$loading({
  247.                         lock: true,
  248.                         text: 'Loading',
  249.                         spinner: 'el-icon-loading',
  250.                         background: 'rgba(0, 0, 0, 0.7)'
  251.                     });
  252.                     this.num = 1;
  253.                     this.styleChoose.styleObj.background = null;
  254.                     this.posChoose.styleObj.background = null;
  255.                     this.styleChoose = styleObj;
  256.                     this.styleChoose.styleObj.background = '#409EFF';
  257.                     this.posArr = this.styleChoose.children;
  258.                     this.posChoose = this.posArr[0];
  259.                     this.posArr[0].styleObj.background = '#409EFF';
  260.                     this.N = this.posChoose.jpgNameArr.length;
  261.                     this.classPath = this.styleChoose.name + '/' + this.posChoose.name;
  262.                     this.path = this.classPath + '/' + this.posChoose.jpgNameArr[this.num - 1];
  263.                     var texture = textureLoader.load('./风格/' + this.path, function (obj) {
  264.                         // 关闭加载中的提示框
  265.                         vm.loading.close();
  266.                         render()
  267.                     });
  268.                     mesh.material.map = texture
  269.                 },
  270.                 // 位置选择
  271.                 posClick: function (posObj) {
  272.                     this.loading = this.$loading({
  273.                         lock: true,
  274.                         text: 'Loading',
  275.                         spinner: 'el-icon-loading',
  276.                         background: 'rgba(0, 0, 0, 0.7)'
  277.                     });
  278.                     this.num = 1;
  279.                     this.posChoose.styleObj.background = null;
  280.                     this.posChoose = posObj;
  281.                     this.N = this.posChoose.jpgNameArr.length;
  282.                     this.posChoose.styleObj.background = '#409EFF';
  283.                     this.classPath = this.styleChoose.name + '/' + this.posChoose.name;
  284.                     this.path = this.classPath + '/' + this.posChoose.jpgNameArr[this.num - 1];
  285.                     var texture = textureLoader.load('./风格/' + this.path, function (obj) {
  286.                         vm.loading.close();
  287.                         render()
  288.                     });
  289.                     mesh.material.map = texture
  290.                 }
  291.             },
  292.             watch: {
  293.                 num: function (value) {
  294.                     this.loading = this.$loading({
  295.                         lock: true,
  296.                         text: 'Loading',
  297.                         spinner: 'el-icon-loading',
  298.                         background: 'rgba(0, 0, 0, 0.7)'
  299.                     });
  300.                     this.path = this.classPath + '/' + this.posChoose.jpgNameArr[this.num - 1];
  301.                     console.log(this.path);
  302.                     var texture = textureLoader.load('./风格/' + this.path, function (obj) {
  303.                         vm.loading.close();
  304.                         render()
  305.                     });
  306.                     mesh.material.map = texture;
  307.                     render()
  308.                 }
  309.             },
  310.             created() {
  311.                 this.posArr = styleObjArr[0].children;
  312.                 this.styleChoose = this.styleArr[0];
  313.                 this.posChoose = styleObjArr[0].children[0];
  314.                 this.loading = this.$loading({
  315.                     lock: true,
  316.                     text: 'Loading',
  317.                     spinner: 'el-icon-loading',
  318.                     background: 'rgba(0, 0, 0, 0.7)'
  319.                 })
  320.             }
  321.         });
  322.  
  323.         window.onresize = onresizeFun;
  324.         function onresizeFun() {
  325.             renderer.setSize(window.innerWidth, window.innerHeight);
  326.             // 设置相机的视图比例（即宽高比）
  327.             camera.aspect = window.innerWidth / window.innerHeight;
  328.             // 修改相机的属性后，需要调用该方法来更新相机的投影矩阵，确保改变后的属性生效
  329.             camera.updateProjectionMatrix();
  330.             vm.width = window.innerWidth;
  331.             vm.height = window.innerHeight;
  332.         };
  333.  
  334.         function requestFullScreen() {
  335.             // 获取文档的根元素
  336.             var de = document.documentElement;
  337.             // 检查当前浏览器是否支持 requestFullscreen 方法
  338.             if (de.requestFullscreen) {
  339.                 // 全屏显示模式
  340.                 de.requestFullscreen()
  341.             } else if (de.mozRequestFullScreen) { //进一步检查当前浏览器是否支持 mozRequestFullScreen 方法
  342.                 de.mozRequestFullScreen()
  343.             } else if (de.webkitRequestFullScreen) { //再进一步检查当前浏览器是否支持 webkitRequestFullScreen 方法
  344.                 de.webkitRequestFullScreen()
  345.             }
  346.         }
  347.         // 与上相反 退出全屏
  348.         function exitFullscreen() {
  349.             var de = document;
  350.             if (de.exitFullscreen) {
  351.                 de.exitFullscreen()
  352.             } else if (de.mozCancelFullScreen) {
  353.                 de.mozCancelFullScreen()
  354.             } else if (de.webkitCancelFullScreen) {
  355.                 de.webkitCancelFullScreen()
  356.             }
  357.         }
  358.     </script>
  359. </body>
  360.  
  361. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/96044
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号