办公园区建筑科技风效果(html+threejs)

以下是一个使用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可能随着时间而变化，请确保使用的是你所需要的版本。

办公园区建筑科技风效果(html+threejs)

评论已关闭

推荐阅读