当前位置：网站首页>Three. JS introductory learning notes 19: how to import FBX static model

Three. JS introductory learning notes 19: how to import FBX static model

2022-07-07 15:51:00 【Jiang Duoduo_ Mostly Harmless 】

Reference material ：https://www.jianshu.com/p/906072e60197

1. stay JS The following two files are introduced in

  <script type="text/javascript" src="js/FBXLoader.js"></script>
  <script type="text/javascript" src="js/inflate.min.js"></script>

2. introduce fbx file ,fbx The file is placed in the same level folder of the page
Insert picture description here

var loader = new THREE.FBXLoader();
    loader.load("fbx/dijifbx.FBX", function(objectBottom) {
    
    objectBottom.traverse(function(child) {
    
        if (child instanceof THREE.Mesh) {
    
            child.material.side = THREE.DoubleSide; 
        }
    });
        objectBottom.scale.multiplyScalar(0.5);//0.5 Multiple size  
        objectBottom.position.set(0,0,0);
        objectBottom.rotation.y = -Math.PI;// rotate 180 degree 
        scene.add(objectBottom);
    });

Complete code record

<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!--  The adaptive  -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
    
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script> 
<script type="text/javascript" src="js/OrbitControls.js"></script> 
<script type="text/javascript" src="js/FBXLoader.js"></script> 
<script type="text/javascript" src="js/inflate.min.js"></script> 
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script> 
<script>
        	var stats, light;
			var camera, scene, raycaster, renderer;

			var mouse = new THREE.Vector2(), INTERSECTED;// Intersecting 
			var radius = 100, theta = 0;
        
        init();
        animate();
        
        function init() {
    
            
            
             // init scene
            scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );
            
            
           camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
           camera.position.set(12, 13, 12);
// camera.lookAt( scene.position );
           camera.lookAt( new THREE.Vector3(0, 0, 0));
           scene.add(camera);    
            
      
            
             //light
            
          	   light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 5, 10, 16 ).normalize();
                 // Vector attribute vector is converted to unit vector , Set the direction to be the same as the original vector , The length is 1
                light.intensity=1.2;// Strength 
				scene.add(light);
 
     // base 
    var loader = new THREE.FBXLoader();
    loader.load("fbx/dijifbx.FBX", function(objectBottom) {
    
    objectBottom.traverse(function(child) {
    
        if (child instanceof THREE.Mesh) {
    
            child.material.side = THREE.DoubleSide; 
        }
    });
        objectBottom.scale.multiplyScalar(0.5);//3 Multiple size  
// var mesh1 = objectBottom; 
        objectBottom.position.set(0,0,0);
        objectBottom.rotation.y = -Math.PI;// rotate 180 degree 
        scene.add(objectBottom);
    });   
              
 
     // Machine tool 
    var loader = new THREE.FBXLoader();
    loader.load("fbx/5000fbxnew.FBX", function(object1) {
    
    object1.traverse(function(child) {
    
        if (child instanceof THREE.Mesh) {
    
            child.material.side = THREE.DoubleSide; 
        }
    });
        object1.scale.multiplyScalar(0.5);//3 Multiple size  
// var mesh1 = objectBottom; 
        object1.position.set(-3,-4,-3);
    object1.rotation.x = -Math.PI*0.5;// rotate 180 degree 
    object1.rotation.z = Math.PI;
        scene.add(object1);
    });   
            
            
       var loader = new THREE.FBXLoader();
    loader.load("fbx/7000fbxnew.FBX", function(object2) {
    
    object2.traverse(function(child) {
    
        if (child instanceof THREE.Mesh) {
    
            child.material.side = THREE.DoubleSide; 
        }
    });
        object2.scale.multiplyScalar(0.5);//3 Multiple size  
// var mesh1 = objectBottom; 
        object2.position.set(4,-5.8,-3);
       object2.rotation.x = -Math.PI*0.5;// rotate 180 degree 
       object2.rotation.z = Math.PI;
        scene.add(object2);
    });                  
            
     
  // Van 
    var loader = new THREE.FBXLoader();
    loader.load("fbx/xuanzhuanbanyuenche.FBX", function(object3) {
    
    object3.traverse(function(child) {
    
        if (child instanceof THREE.Mesh) {
    
            child.material.side = THREE.DoubleSide; 
        }
    });
        object3.scale.multiplyScalar(0.5);//3 Multiple size  
// var mesh1 = objectBottom; 
        object3.position.set(0,0,4.2);
// objectBottom.rotation.x = -Math.PI;// rotate 180 degree 
        scene.add(object3);
    });   

            // ray 
            raycaster = new THREE.Raycaster();
          /* var raycaster = new THREE.Raycaster(); var mouseVector = new THREE.Vector3();*/
            
            
            //renderer
				renderer = new THREE.WebGLRenderer({
     antialias: true });
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
           // monitor 
           document.addEventListener( "mousedown", onDocumentMouseDown, false );
           
           // Window changes 
           window.addEventListener( "resize", onWindowResize, false );
            
            
            // plug-in unit 
    var controls = new THREE.OrbitControls( camera, renderer.domElement );//camera and render The variable of is consistent with the variable set by the camera and renderer 

        //  If you use animate When the method is used , Delete this function 
        //controls.addEventListener( 'change', render );
        //  Make the animation rotate or damp when cycling   Does the meaning have inertia 
        controls.enableDamping = true;
        // Dynamic damping coefficient   It's the mouse drag rotation sensitivity 
        //controls.dampingFactor = 0.25;
        // Can I zoom 
        controls.enableZoom = true;
        // Whether to rotate automatically 
        controls.autoRotate = true;
        // Set the maximum distance from the camera to the origin 
        controls.minDistance  = 1;
        // Set the maximum distance from the camera to the origin 
        controls.maxDistance  = 200;
        // Whether to turn on right-click drag and drop 
        controls.enablePan = true; 

        }//function end 
        
        // Window changes 
        function onWindowResize() {
    

				camera.aspect = window.innerWidth / window.innerHeight;
// camera.updateProjectionMatrix();

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

			}
        
        // Coordinate transformation 
       function onDocumentMouseDown( event ) {
    

				event.preventDefault();
               
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
           
           
                 //  Update the ray with camera and mouse position 
	     raycaster.setFromCamera( mouse, camera );

	      //  Calculate the focus of objects and rays 
	     var intersects = raycaster.intersectObjects( scene.children ,true);
            

        if ( intersects.length > 0 ) {
    // When there are objects 
         

					if ( INTERSECTED != intersects[ 0 ].object ) {
    // The last selection is not equal to the current selection , It's time to replace ,intersects[ 0 ] Is the current selection   At the front , It is automatically sorted 
						if ( INTERSECTED ) 
                            if( INTERSECTED.material .length==undefined){
    
                            INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );// The last selected material should be replaced with the original material 
                            }
						INTERSECTED = intersects[ 0 ].object;
                       if( INTERSECTED.material .length==undefined){
    
						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();// Save the current materials 
						INTERSECTED.material.emissive.setHex( 0xff0000 );// Color change 
                    }
					}
				} else {
    // When selecting the blank space 
//
					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
					INTERSECTED = null;
				}
			}
    	function animate() {
    
				requestAnimationFrame( animate );
				render();
			}
        
        function render() {
    
	      renderer.render( scene, camera );
          }
    </script>
</body>
</html>

原网站

版权声明
本文为[Jiang Duoduo_ Mostly Harmless ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130610086847.html

当前位置：网站首页>Three. JS introductory learning notes 19: how to import FBX static model

Three. JS introductory learning notes 19: how to import FBX static model

边栏推荐

猜你喜欢

随机推荐