在本文中,将介绍如何使用Three.js创建室内模型,并在场景中实现行走。为了实现这一目标,需要完成以下任务:
- 加载室内模型及材质贴图
- 实现摄像机控制,支持用户自由行走
- 添加光源,提高场景真实感
一、加载室内模型及材质贴图
加载三维模型和材质贴图是实现室内模型的第一步。在加载模型之前,需要先准备好模型和贴图,此处使用了blender软件制作模型,并使用GIMP进行材质贴图的编辑。
/*加载模型和材质*/ var mtlLoader = new THREE.MTLLoader(); mtlLoader.load('model/model.mtl', function(materials){ materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.load('model/model.obj', function(object){ scene.add(object); }); });
在代码中,首先使用MTLLoader加载材质,并使用OBJLoader加载模型。之后将模型添加到场景中。
二、实现摄像机控制,支持用户自由行走
为了让用户能够自由地行走在室内模型中,需要实现摄像机控制。可以使用OrbitControls类,或者实现自定义的摄像机控制。
/*实现自定义摄像机控制*/ var controls = new THREE.PointerLockControls(camera, document.body); scene.add(controls.getObject()); var moveForward = false; var moveBackward = false; var moveLeft = false; var moveRight = false; document.addEventListener('keydown', function(event){ switch(event.keyCode){ case 38: // up case 87: // w moveForward = true; break; case 37: // left case 65: // a moveLeft = true; break; case 40: // down case 83: // s moveBackward = true; break; case 39: // right case 68: // d moveRight = true; break; } }); document.addEventListener('keyup', function(event){ switch(event.keyCode){ case 38: // up case 87: // w moveForward = false; break; case 37: // left case 65: // a moveLeft = false; break; case 40: // down case 83: // s moveBackward = false; break; case 39: // right case 68: // d moveRight = false; break; } }); var controlsEnabled = false; function onPointerlockChange(){ if(document.pointerLockElement === document.body){ controlsEnabled = true; controls.enabled = true; }else{ controlsEnabled = false; controls.enabled = false; } } document.addEventListener('pointerlockchange', onPointerlockChange, false); function animate() { requestAnimationFrame(animate); if (controlsEnabled) { var time = performance.now(); var delta = (time - prevTime) / 1000; velocity.x -= velocity.x * 10.0 * delta; velocity.z -= velocity.z * 10.0 * delta; if (moveForward) velocity.z -= 400.0 * delta; if (moveBackward) velocity.z += 400.0 * delta; if (moveLeft) velocity.x -= 400.0 * delta; if (moveRight) velocity.x += 400.0 * delta; controls.getObject().translateX(velocity.x * delta); controls.getObject().translateZ(velocity.z * delta); prevTime = time; } renderer.render(scene, camera); } animate(); /*启动指针锁定*/ var element = document.body; var pointerlockchange = function(event){ if(document.pointerLockElement === element){ controlsEnabled = true; controls.enabled = true; }else{ controls.enabled = false; } }; var pointerlockerror = function(event){ console.log('pointer lock error'); }; element.addEventListener('click', function(event){ element.requestPointerLock(); }, false); document.addEventListener('pointerlockchange', pointerlockchange, false); document.addEventListener('pointerlockerror', pointerlockerror, false);
代码中使用PointerLockControls实现摄像机控制, 用户可以通过WASD键控制摄像机移动,并且可以通过鼠标进行摄像机旋转。此外,为了了解指针锁定的使用,需要在代码开头调用requestPointerLock()函数来启用指针锁定。
三、添加光源,提高场景真实感
场景中添加光源可以提高场景真实感。为了满足室内模型的真实感,可以添加两种类型的光源:环境光(AmbientLight)和点光源(PointLight)。
/*添加光源*/ var ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); var pointLight = new THREE.PointLight(0xffffff, 0.5); pointLight.position.z = 500; scene.add(pointLight);
代码中使用了AmbientLight来模拟全局光照,并使用PointLight来模拟室内灯光。
结论
至此,通过以上三个任务的完成,就可以实现一个基本的室内模型行走的three.js场景。