以下是一个使用Three.js创建办公园区的简化示例，展示了如何使用Three.js的GLTFLoader来加载带有科技感的建筑模型，并将其置于场景中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Office Campus with Three.js</title>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/loaders/GLTFLoader.min.js"></script>
<script>
let camera, scene, renderer, model;
const clock = new THREE.Clock();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
scene = new THREE.Scene();
// 添加环境光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 加载GLTF模型
const loader = new THREE.GLTFLoader();
loader.load('models/office_campus.gltf', function (gltf) {
model = gltf.scene;
scene.add(model);
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if (model) {
// 如果模型已加载，可以在这里添加模型的动画控制逻辑
}
renderer.render(scene, camera);
}
</script>
</body>
</html>在这个例子中，我们首先导入了Three.js库和GLTFLoader插件。然后，我们初始化了相机、场景、渲染器，并添加了一个环境光源。最后，我们使用GLTFLoader加载了一个名为office_campus.gltf的模型，并将其添加到场景中。在动画循环中，我们调用renderer.render()来更新渲染。
注意：这个例子假设你有一个名为office_campus.gltf的建筑模型放在models文件夹中。你需要根据你的文件结构调整模型路径。此外，Three.js的版本和API可能随着时间而变化，请确保使用的是你所需要的版本。