当前位置：首页 > JavaScript

房屋3d js实现

2026-03-01 21:38:10JavaScript

使用Three.js实现房屋3D模型

Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和展示3D图形。以下是通过Three.js实现房屋3D模型的关键步骤。

基础环境搭建

安装Three.js库，可以通过npm或直接引入CDN链接：

npm install three

或直接在HTML中引入：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

初始化场景和相机

创建一个场景、相机和渲染器：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建房屋结构

使用几何体和材质构建房屋的基本结构：

// 墙体
const wallGeometry = new THREE.BoxGeometry(10, 5, 0.2);
const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
scene.add(wall);

// 屋顶
const roofGeometry = new THREE.ConeGeometry(8, 3, 4);
const roofMaterial = new THREE.MeshBasicMaterial({ color: 0xA52A2A });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = 3;
roof.rotation.y = Math.PI / 4;
scene.add(roof);

添加光照效果

为场景添加光源以增强视觉效果：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7);
scene.add(directionalLight);

实现交互功能

通过OrbitControls库实现鼠标控制视角：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

渲染循环

使用动画循环持续渲染场景：

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

优化与扩展

纹理贴图：使用THREE.TextureLoader加载墙面或屋顶的纹理图片。
模型导入：通过GLTFLoader导入外部3D模型文件（如.glb或.gltf格式）。
响应式设计：监听窗口大小变化并调整渲染器和相机参数。

示例代码整合

完整示例代码：

房屋3d js实现

<!DOCTYPE html>
<html>
<head>
    <title>3D House with Three.js</title>
    <style> body { margin: 0; } </style>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 房屋结构
        const wall = new THREE.Mesh(
            new THREE.BoxGeometry(10, 5, 0.2),
            new THREE.MeshStandardMaterial({ color: 0x8B4513 })
        );
        scene.add(wall);

        const roof = new THREE.Mesh(
            new THREE.ConeGeometry(8, 3, 4),
            new THREE.MeshStandardMaterial({ color: 0xA52A2A })
        );
        roof.position.y = 3;
        roof.rotation.y = Math.PI / 4;
        scene.add(roof);

        // 光照
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5, 10, 7);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        // 控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        camera.position.z = 15;

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>