Three.js 加载 fbx 3D模型

最新推荐文章于 2024-08-26 11:49:50 发布

Oinguoguo

最新推荐文章于 2024-08-26 11:49:50 发布

阅读量1.4k

点赞数

文章标签： three.js webgl html css javascript

本文链接：https://blog.csdn.net/Oinguoguo/article/details/113846685

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <title>Three.js</title>
   <style>
      body {
         margin: 0;
      }
   </style>
</head>
<body>
<script type="module">

   import * as THREE from '../build/three.module.js';
   import { OrbitControls } from './jsm/controls/OrbitControls.js';
   import { FBXLoader } from './jsm/loaders/FBXLoader.js';

   const scene = new THREE.Scene();
   scene.background = new THREE.Color( 0xFFFFFF );

   const hemisphereLight = new THREE.HemisphereLight( 0xffffff, 0xFFD700 );
   hemisphereLight.position.set( 0, 200, 0 );
   scene.add( hemisphereLight );

   const directionalLight = new THREE.DirectionalLight( 0xFFD700 );
   directionalLight.position.set( 0, 200, 100 );
   scene.add( directionalLight );

   const perspectiveCamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
   perspectiveCamera.position.set( 0, 1, 1 );

   const texture = THREE.ImageUtils.loadTexture( 'Baking-mountain4K.jpg' );

   const fbxLoader = new FBXLoader();

   fbxLoader.load( 'models/fbx/scene.fbx', function ( object ) {

      object.traverse( function ( child ) {

         child.material = new THREE.MeshPhongMaterial( {
            map: texture
         } );
         if ( child.isMesh ) {

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

         }

      } );

      scene.add( object );

   } );

   const webGLRenderer = new THREE.WebGLRenderer();
   webGLRenderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( webGLRenderer.domElement );

   const orbitControls = new OrbitControls( perspectiveCamera, webGLRenderer.domElement );
   orbitControls.target.set( 0, 0, 0 );
   orbitControls.update();

   animate();

   function animate() {

      requestAnimationFrame( animate );

      webGLRenderer.render( scene, perspectiveCamera );

   }

</script>
</body>
</html>