我们经常在装修的网站可以看到虚拟房间的效果，通过网站展示3D房间的细节，并且点击可以进入到每个房间查看，今天就用threejs来实现类似的效果，其实就是类似天空盒子的功能，将房间的上下左右前后各拍一张图片，并且保证每个图片的交界处是衔接上的，最后组成一个正方体的盒子，将相机设置在盒子的中间，禁止拖动，就可以实现在房间里查看房间周围家具的效果。
首先第一步创建3D场景
function initScene() {
scene = new THREE.Scene();
}
// 初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 10);
}
// 初始化灯光
function initLight() {
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
directionalLight.color.setHSL(0.1, 1, 0.95);
directionalLight.position.set(0, 200, 0).normalize();
scene.add(directionalLight);
var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
ambient.position.set(0, 0, 0);
scene.add(ambient);
}
// 初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x4682B4, 1.0);
document.body.appendChild(renderer.domElement);
}
// 初始化轨迹球控件
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
然后找六张房间的图片，图片资源
然后将图片添加到场景中，并作为贴图贴在正方体的6个面上
function initHouse(){
const geometry = new THREE.BoxGeometry( 40, 40, 40)
// 立方体纹理加载
let arr = ['home_left','home_right','home_top','home_bottom','home_front','home_back'];
let boxMaterials = []
arr.forEach(item=>{
const texttrue = new THREE.TextureLoader().load('./images/'+item+'.jpg' ) // 纹理贴纸
boxMaterials.push(
new THREE.MeshBasicMaterial({
color:'#ffffff',
map:texttrue
})
)
})
const mesh = new THREE.Mesh(geometry,boxMaterials)
mesh.geometry.scale(1,1,-1) // 进入内部
scene.add(mesh)
}
然后就可以实现了，效果如下：
Threejs查看VR房间
这里不支持上传视频，我就只能上传个图片了，如果想看动态效果可以私我，我发给你视频，或者需要源码也可以给我私信
下面是完整代码
<!DOCTYPE html>
<html>
<head includeDefault="true">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>位置移动</title>
<script src="./ThreeJs/js/three.js"></script>
<script src="./ThreeJs/js/OrbitControls.js"></script>
</head>
<body>
<div class="container" ref="container"></div>
<script>
var camera, scene, renderer, controls;
function initScene() {
scene = new THREE.Scene();
}
// 初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 10);
}
// 初始化灯光
function initLight() {
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
directionalLight.color.setHSL(0.1, 1, 0.95);
directionalLight.position.set(0, 200, 0).normalize();
scene.add(directionalLight);
var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
ambient.position.set(0, 0, 0);
scene.add(ambient);
}
function initHouse(){
const geometry = new THREE.BoxGeometry( 40, 40, 40)
// 立方体纹理加载
let arr = ['home_left','home_right','home_top','home_bottom','home_front','home_back'];
let boxMaterials = []
arr.forEach(item=>{
const texttrue = new THREE.TextureLoader().load('./images/'+item+'.jpg' ) // 纹理贴纸
boxMaterials.push(
new THREE.MeshBasicMaterial({
color:'#ffffff',
map:texttrue
})
)
// }
})
const mesh = new THREE.Mesh(geometry,boxMaterials)
mesh.geometry.scale(1,1,-1) // 进入内部
scene.add(mesh)
}
// 初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x4682B4, 1.0);
document.body.appendChild(renderer.domElement);
}
// 初始控制
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function init() {
initScene();
initCamera();
initLight();
initHouse();
initRenderer();
initControls();
animate();
}
init();
</script>
</body>
</html>
