three.js加载模型

var width = document.getElementById("models-container").clientWidth;
var height = document.getElementById("models-container").clientHeight;
debugger
//初始化场景
scene = new THREE.Scene();

//初始化相机
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(0, 62, 0);

//初始化灯光
var directional = new THREE.DirectionalLight(0xffffff, 0.15); //AmbientLight,影响整个场景的光源
directional.position.set(0, 100, 50);
scene.add(directional)

//初始化渲染器
renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    logarithmicDepthBuffer: true,
});
renderer.setSize(width, height);

document.getElementById("models-container").appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;

controls.enableDamping = true; //将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false
controls.dampingFactor = 0.5; //阻尼惯性有多大。 Default is 0.05。要使得这一值生效,你必须在你的动画循环里调用.update()。
controls.minDistance = 50; // 视角最小距离
controls.maxDistance = 200; // 视角最远距离


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    //labelRenderer.render(scene, camera);
    //scene.traverse(function (obj) { });
}

function loadSceneModel() {
    var fbxLoader = new THREE.FBXLoader();
    fbxLoader.load('../Content/models/scene.fbx', (object) => {
        // 设置模型比例
        var scale = 0.3;
        object.scale.set(scale, scale, scale);
        object.rotateX(- (Math.PI / 5));
        // 设置模型位置
        object.position.set(0, -2, -3);

        scene.add(object);
    });
}
loadSceneModel();
camera.lookAt(scene.position);
animate();
posted @ 2025-02-20 16:53  暖暖De幸福  阅读(23)  评论(0)    收藏  举报