threejs 第三天加载一个静态模型

最新推荐文章于 2025-05-31 10:41:33 发布

原创最新推荐文章于 2025-05-31 10:41:33 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

three.js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用Three.js库在Web上加载一个静态3D模型，包括模型格式的选择、导入库、创建场景、加载模型、设置相机和渲染器等关键步骤，帮助开发者实现3D可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="threejsBuild/build/three.js"></script>
    <script src="threejsBuild/examples/js/controls/OrbitControls.js"></script>
    <script src="threejsBuild/examples/js/libs/inflate.min.js"></script>
    <script src="threejsBuild/examples/js/WebGL.js"></script>
    <script src="threejsBuild/examples/js/libs/stats.min.js"></script>
    <script src="threejsBuild/examples/js/loaders/FBXLoader.js"></script>
</head>
<body>
<script>
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.set( 100, 200, 300 );
    var controls = new THREE.OrbitControls( camera );
    controls.target.set( 0, 100, 0 );
    controls.update();


    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);



   var  light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
    light.position.set( 0, 200, 0 );
    scene.add( light );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 200, 100 );
    light.castShadow = true;
    light.shadow.camera.top = 180;
    light.shadow.camera.bottom = - 100;
    light.shadow.camera.left = - 120;
    light.shadow.camera.right = 120;
    scene.add( light );

    var loader = new THREE.FBXLoader();
    loader.load( 'threejsBuild/examples/models/fbx/Samba Dancing.fbx', function ( object ) {

        mixer = new THREE.AnimationMixer(object);

        var action = mixer.clipAction(object.animations[0]);
        action.play();

        object.traverse(function (child) {

            if (child.isMesh) {

                child.castShadow = true;
                child.receiveShadow = true;

            }

        });

        scene.add( object );

    } );


    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    render();
</script>
</body>
</html>

结果