三维城市模型展示与交互应用

2023-09-25 16:25:28

three.js导入3D模型

首先，我们需要导入three.js库。我们可以直接通过CDN的方式来引入，也可以通过npm包的形式来安装。

<script src="https://unpkg.com/three@0.125.2/build/three.min.js"></script>

导入three.js库之后，我们就可以开始创建3D场景了。

var scene = new THREE.Scene();

接下来，我们需要创建一个相机。相机是用来观察场景的虚拟设备。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

然后，我们需要创建一个渲染器。渲染器是用来将场景中的物体渲染到屏幕上的设备。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

最后，我们需要将相机和渲染器添加到HTML文档中。

document.body.appendChild(renderer.domElement);

加载3D模型

接下来，我们需要加载3D模型。three.js支持多种3D模型格式，例如：OBJ、GLTF、FBX等。在本篇文章中，我们将使用一个OBJ格式的3D模型。

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

添加交互功能

为了使我们的城市模型更加生动有趣，我们可以添加一些交互功能。例如：高亮显示建筑物和弹出房型信息。

高亮显示建筑物

我们可以使用three.js的Raycaster类来实现高亮显示建筑物的功能。Raycaster类可以用来检测鼠标光标与3D模型的交点。

var raycaster = new THREE.Raycaster();
renderer.domElement.addEventListener('mousemove', function (event) {
  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    var object = intersects[0].object;
    object.material.color.set(0xff0000);
  }
});

弹出房型信息

我们可以使用three.js的LabelRenderer类来实现弹出房型信息的功能。LabelRenderer类可以用来在3D模型中添加标签。

var labelRenderer = new THREE.LabelRenderer();
var label = new THREE.Label('房型信息');
label.position.set(0, 0, 1);
labelRenderer.addLabel(label, object);