当前位置：首页 > JavaScript

房屋3d js实现

2026-01-31 06:26:12JavaScript

3D房屋建模与展示的JavaScript实现方法

使用JavaScript实现3D房屋建模和展示可以通过多种库和技术完成。以下是几种主流方法：

Three.js基础实现

Three.js是流行的WebGL库，适合创建3D场景：

房屋3d js实现

// 初始化场景、相机和渲染器
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 geometry = new THREE.BoxGeometry(4, 2, 3);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const house = new THREE.Mesh(geometry, material);
scene.add(house);

// 添加屋顶（三角棱柱）
const roofGeometry = new THREE.ConeGeometry(3, 1, 4);
const roof = new THREE.Mesh(roofGeometry, material);
roof.position.y = 2;
scene.add(roof);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

Babylon.js实现

Babylon.js提供更高级的3D功能：

房屋3d js实现

// 创建引擎和场景
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

// 创建相机
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// 创建光源
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// 创建房屋
const house = BABYLON.MeshBuilder.CreateBox("house", {width: 4, height: 2, depth: 3}, scene);
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameterTop: 0, diameterBottom: 4, height: 2, tessellation: 4}, scene);
roof.position.y = 2;
roof.rotation.y = Math.PI/4;

// 渲染循环
engine.runRenderLoop(() => {
    scene.render();
});

使用3D建模软件导出模型

对于复杂房屋结构，建议使用专业建模工具后导出：

使用Blender、3ds Max等工具创建房屋模型
导出为glTF或OBJ格式
通过Three.js加载器导入：

// 使用GLTFLoader加载模型
const loader = new THREE.GLTFLoader();
loader.load('house.gltf', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error('加载错误:', error);
});

交互功能增强

添加房屋交互功能：

// 鼠标点击事件
window.addEventListener('click', (event) => {
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('点击了房屋部件');
    }
});