当前位置：首页 > JavaScript

js实现3d架构包

2026-01-31 10:53:06JavaScript

使用 Three.js 实现 3D 架构包

Three.js 是一个流行的 JavaScript 3D 库，基于 WebGL，适合构建 3D 场景和模型。以下是一个基本实现方法：

安装 Three.js

npm install three

创建基础 3D 场景

import * as THREE from 'three';

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();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

加载 3D 模型

使用 GLTFLoader 加载外部模型：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('model.gltf', function (gltf) {
    scene.add(gltf.scene);
}, undefined, function (error) {
    console.error('An error happened:', error);
});

添加光照效果

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

响应式设计

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

性能优化技巧

使用 BufferGeometry 代替 Geometry 提高性能

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([...]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

实现 LOD (Level of Detail)

const lod = new THREE.LOD();
const highDetail = new THREE.Mesh(highDetailGeometry, material);
const lowDetail = new THREE.Mesh(lowDetailGeometry, material);
lod.addLevel(highDetail, 0);
lod.addLevel(lowDetail, 100);
scene.add(lod);

进阶功能

实现阴影效果

js实现3d架构包

renderer.shadowMap.enabled = true;
cube.castShadow = true;
const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(5, 5),
    new THREE.MeshStandardMaterial({ color: 0xffffff })
);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

这些代码示例展示了如何使用 Three.js 创建基本的 3D 架构包，包括场景设置、模型加载、光照和性能优化等方面。