three.js导入glb/gltf模型

subsistent

已于 2023-08-29 15:03:22 修改

阅读量1k

点赞数 3

分类专栏： WebGL 文章标签： javascript 开发语言 ecmascript

于 2023-03-24 19:25:43 首次发布

本文链接：https://blog.csdn.net/m0_65121454/article/details/129757053

版权

WebGL 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

这段代码演示了如何在web环境中使用THREE.js库加载GLTF模型，调整其大小、位置，并进行动画处理。它创建了一个WebGLRenderer，设置了场景背景和环境光，然后加载GLTF模型并添加到场景中，同时应用了OrbitControls和AnimationMixer来实现视角控制和模型动画播放。

摘要由CSDN通过智能技术生成


    function createGLTFModel (modelUrl, size, px, py, pz) {
        new THREE.GLTFLoader().load(modelUrl, function (gltf) {
            gltf.scene.rotation.y = Math.PI / 4
            gltf.scene.scale.set(size, size, size)
            gltf.scene.position.set(px, py, pz)
            scene.add(gltf.scene);
        });
    }


let mixer;
const clock = new THREE.Clock();
const container = document.getElementById('container');
const stats = new Stats();
container.appendChild(stats.dom);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfe3dd);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(5, 2, 8);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');
const loader = new THREE.GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('LittlestTokyo.glb', function (gltf) {
    const model = gltf.scene;
    model.position.set(1, 1, 0);
    model.scale.set(0.01, 0.01, 0.01);
    scene.add(model);
    mixer = new THREE.AnimationMixer(model);
    mixer.clipAction(gltf.animations[0]).play();
    animate();
}, undefined, function (e) {
    console.error(e);
});
window.onresize = function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
};
function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    mixer.update(delta);
    controls.update();
    stats.update();
    renderer.render(scene, camera);
}