Threejs制作虚拟房间效果-CFANZ编程社区

我们经常在装修的网站可以看到虚拟房间的效果，通过网站展示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制作虚拟房间效果_Threejs

完整代码如下：

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