three.js项目基操作

最新推荐文章于 2024-12-23 15:46:50 发布

原创最新推荐文章于 2024-12-23 15:46:50 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #javascript

本文介绍了如何使用Three.js进行3D模型的加载与基本操作，包括模型的旋转、缩放、位置调整等，并提供了初始化相机及场景设置的示例代码。

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

1, 新建一个模型数组(可存放多个模型)

var objectTotle = new THREE.Object3D();

2, 场景中删除一个模型

scene.remove(objectTotle);

3, 位置, 旋转, 缩放

// 旋转
objectTotle.rotation.x = 0.01;
objectTotle.rotation.y = -0.01;
objectTotle.rotation.z = 0;
// 位置 (基于x,y,z均等于0的初始位置)
objectTotle.position.y = 1.8;
// 缩放
cloth.scale = 0.1;
cloth.scale.x = 0.1;

4, 初始化相机(切换3d模型要调用这个函数)

window.initCrame = function(){
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
  camera.position.set( 0, 0, 500 );
  controls = new OrbitControls( camera, renderer.domElement );
  controls.addEventListener( 'change', render );
  controls.minDistance = 0;
  controls.maxDistance = 10;
  controls.target.set( 0, 0, 0 );
  controls.update();
  renderer.render(scene,camera);
}

4, 导入模型

/*========================================================*/
/* fbx模型
/*========================================================*/
var loader = new FBXLoader();
loader.load( '/web/cloth/glb/module/001.fbx', function ( object ) {
  console.log(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;
    }
  } );
  object.position.y = -100;
  scene.add( object );
} );
/*========================================================*/
/* gltf/glb模型
/*========================================================*/
new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setPath( '/web/haiNan/model' )
.load( '/bg/002_blue.hdr', function ( texture ) {

  const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
  scene.background = "rgba(255,255,255,0)";
  scene.environment = envMap;
  texture.dispose();
  pmremGenerator.dispose();
  render();
  const roughnessMipmapper = new RoughnessMipmapper( renderer );
      const loader = new GLTFLoader().setPath( '/web/cloth/glb/module/' );
      loader.load( 'threeBall.glb', function ( gltf ) {// qt08.glb
        gltf.scene.traverse( function ( child ) {
          if ( child.isMesh ) {
            // child.material.emissive =  child.material.color;
            // child.material.emissiveMap = child.material.map ;
          }
        } );
        console.log("我是3d模型",gltf)
        // mixer = new THREE.AnimationMixer( gltf.scene);
        // var action = mixer.clipAction( gltf.animations[ 0 ] );
        // console.log("我是action",action)
        // action.timeScale=0.8;
        // action.setLoop( THREE.LoopOnce )
        // action.clampWhenFinished = true
        // action.enable = true 
        // action.play();
        // var objectTotle = new THREE.Object3D();
        // objectTotle.add(gltf.scene);
        scene.add( gltf.scene);

        render();
      });
});