【js&three.js】全景vr看房进阶版
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
光源
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; // 启用平移操作
效果展示：
目录展示：
代码展示：
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室内设计效果全景在线预览
![]()
![]()
![]()
