threejs加载glb

three.js是一款用于创建和渲染3D图形的JavaScript库。要加载.glb文件（即包含3D模型和相关材质的文件），我们可以使用three.js提供的GLTFLoader加载器。

首先，我们需要在项目中引入three.js库以及GLTFLoader。通过在HTML文件中添加以下脚本标签，可以引入这两个资源：

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

接下来，我们可以在项目中创建一个canvas元素，用于显示3D场景：

<canvas id="canvas"></canvas>

然后，我们可以在JavaScript代码中使用以下方法来加载.glb文件并创建一个3D场景：

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("canvas")});
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建光源
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

// 使用GLTFLoader加载.glb文件
const loader = new THREE.GLTFLoader();
loader.load(
    'path/to/model.glb',
    function (gltf) {
        scene.add(gltf.scene);
    },
    undefined,
    function (error) {
        console.error(error);
    }
);

// 创建动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

在上述代码中，我们首先创建了一个场景、相机和渲染器。然后，我们创建了一个环境光源，并使用GLTFLoader加载.glb文件。加载成功后，我们将模型添加到场景中。最后，我们创建一个动画循环，来实时渲染场景。

需要注意的是，你需要将路径`'path/to/model.glb'`替换为你实际的.glb文件路径。

通过上述步骤，你就可以使用three.js加载和展示.glb文件了。