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 @   暖暖De幸福  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
历史上的今天:
2024-02-20 threejs 如何设置自己想要的初始角度和大小
2024-02-20 three.js 使用 html div 给 Three.js 场景添加背景图的方法实现
2024-02-20 blender资源
点击右上角即可分享
微信分享提示