当前位置：首页 > JavaScript

js实现3d架构包

2026-03-02 02:09:57JavaScript

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

Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和显示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>

基础3D场景搭建

创建一个基本的3D场景需要初始化渲染器、场景和相机：

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);

添加3D模型

可以使用几何体创建基本形状或加载外部模型：

js实现3d架构包

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(error);
});

光照效果

添加光源增强3D效果：

js实现3d架构包

const light = new THREE.AmbientLight(0x404040);
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

响应式设计

确保3D场景适应窗口大小变化：

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