three.js项目基操作

本文介绍了如何使用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();
      });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值