threejs导入obj校园模型,然后实现场景漫游

1. 导入OBJ模型

首先，需要将OBJ模型导入到three.js中。可以使用OBJLoader来实现，代码如下：

var loader = new THREE.OBJLoader();
loader.load( 'model.obj', function ( object ) {
  scene.add( object );
} );

其中，'model.obj'是OBJ模型的路径，scene是场景。

2. 场景漫游

实现场景漫游需要监听鼠标移动事件，通过改变相机的位置和朝向来实现。代码如下：

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var cameraDirection = new THREE.Vector3();
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;

function onMouseMove( event ) {
  // 计算鼠标位置
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  // 通过射线计算相机朝向
  raycaster.setFromCamera( mouse, camera );
  camera.getWorldDirection( cameraDirection );

  // 设置相机的朝向
  camera.lookAt( camera.position.clone().add( cameraDirection ) );
}

function onKeyDown( 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;
  }
}

function onKeyUp( 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;
  }
}

function animate() {
  requestAnimationFrame( animate );

  // 根据方向移动相机
  if ( moveForward ) {
    camera.position.add( cameraDirection.multiplyScalar( 0.1 ) );
  }
  if ( moveBackward ) {
    camera.position.sub( cameraDirection.multiplyScalar( 0.1 ) );
  }
  if ( moveLeft ) {
    camera.position.sub( cameraDirection.cross( camera.up ).multiplyScalar( 0.1 ) );
  }
  if ( moveRight ) {
    camera.position.add( cameraDirection.cross( camera.up ).multiplyScalar( 0.1 ) );
  }

  renderer.render( scene, camera );
}

在初始化时，需要将onMouseMove、onKeyDown、onKeyUp等事件监听添加到窗口上，如下所示：

window.addEventListener( 'mousemove', onMouseMove, false );
window.addEventListener( 'keydown', onKeyDown, false );
window.addEventListener( 'keyup', onKeyUp, false );

最后，需要在animate函数中调用renderer.render函数，渲染场景和相机。调用requestAnimationFrame函数实现循环渲染。