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

    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. 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.         
    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>

  • 相关阅读:
    去了家新公司，技术总监不让用 IntelliJ IDEA想离职了
    Spring Boot 实现统一异常处理：构建健壮的应用
    Go的简单入门：开始使用多模块的工作空间
    ARK Invest：比特币，一种被低估且独特的避险资产
    CGAL 入门基础
    手写本地缓存实战2—— 打造正规军，构建通用本地缓存框架
    【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境
    神经网络logistic回归模型,logistic回归的基本理论
    SENet 学习
    yo！这里是进程控制
  • 原文地址：https://blog.csdn.net/weixin_52479803/article/details/132276368