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

【js&three.js】全景vr看房进阶版_第1张图片

three小结:

Scene场景

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

  • 常见属性:
scene.background = new THREE.Color(0x000000); // 设置背景颜色为黑色

scene.fog = new THREE.Fog(0x000000, 0.1, 100); // 创建线性雾效,颜色为黑色,起始距离为0.1,结束距离为100
  • 常见方法:
scene.add(mesh); // 将名为mesh的对象添加到场景中

scene.remove(mesh); // 从场景中移除名为mesh的对象

var obj = scene.getObjectByName('mesh'); // 获取名称为mesh的对象

scene.traverse(function(object) {
  // 对每个对象执行的操作
  console.log(object);
});

scene.dispose(); // 清除场景及其相关资源

Geometry 几何体

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

常用的Geometry(几何体):

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

Material 材质

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

常用的Material(材质):

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

Mesh 网格模型

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

  • 方法举例:
mesh.material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 设置网格的材质为红色基础材质

mesh.rotation.set(Math.PI / 2, 0, 0); // 设置网格绕X轴旋转90度

mesh.rotateY(Math.PI / 4); // 将网格绕Y轴旋转45度

mesh.position.set(0, 0, 0); // 设置网格的位置为原点

  • 属性举例: 
mesh.visible = false; // 隐藏网格

mesh.material.opacity = 0.5; // 将网格材质的透明度设置为0.5

Camera 相机

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

常用的Camera 相机:

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

方法举例:

camera.lookAt(new THREE.Vector3(0, 0, 0)); // 将相机对准场景原点

camera.updateProjectionMatrix(); // 更新相机的投影矩阵

const newCamera = camera.clone(); // 克隆相机

属性举例: 

camera.position.set(0, 0, 10); // 设置相机在场景中的位置

camera.rotation.set(0, Math.PI / 2, 0); // 设置相机的旋转角度

camera.fov = 60; // 设置透视相机的视角大小为60度

camera.zoom = 2; // 将正交相机设置为缩放倍数为2

光源

 【js&three.js】全景vr看房进阶版_第2张图片

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

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

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

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

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

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

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

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

WebGLRenderer 渲染器

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

OrbitControls   相机控件工具

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

属性举例: 

controls.enabled = true; // 启用控制器

controls.minZoom = 0.5; // 设置相机的最小缩放倍数为0.5
controls.maxZoom = 2; // 设置相机的最大缩放倍数为2

controls.enableRotate = true; // 启用旋转操作
controls.enableZoom = true; // 启用缩放操作
controls.enablePan = true; // 启用平移操作

效果展示:

目录展示:

【js&three.js】全景vr看房进阶版_第3张图片【js&three.js】全景vr看房进阶版_第4张图片

 代码展示:

 path.js

function path() {
    return [{
        name: "中式",
        styleObj: {
            background: '#409EFF'
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: '#409EFF'
            },
            jpgNameArr: ["00125.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卫浴",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "书房",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "现代",
        styleObj: {
            background: null
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卫浴",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "新古典",
        styleObj: {
            background: null
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卫浴",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "欧式",
        styleObj: {
            background: null
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卫浴",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "美式",
        styleObj: {
            background: null
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "卫浴",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "北欧",
        styleObj: {
            background: null
        },
        children: [{
            name: "客餐厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        },{
            name: "卧室",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }, {
        name: "法式",
        styleObj: {
            background: null
        },
        children: [{
            name: "客厅",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }, {
            name: "餐厨",
            styleObj: {
                background: null
            },
            jpgNameArr: ["0011.jpg"]
        }]
    }]

}

index.html





    
    Three.js-webgl室内设计效果全景在线预览
    
    
    
    
    
    
    
    
    



    

你可能感兴趣的:(Javascript与ES6~,html5,&&,css3,&&,浏览器,vr,javascript,前端)