几何中心重置到坐标原点

有时模型的默认中心并不是几何中心,需要自己调整

// 重置几何中心 
mesh1.geometry.computeBoundingBox();
mesh1.geometry.center();

完整代码

createScene(){
      const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
      const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
      const camera = new THREE.PerspectiveCamera(50, width / height, 1, 3000);
      camera.position.set(150,0,150);
      camera.lookAt(0,0,0);

      const scene = new THREE.Scene;
      // let modelUrl = "http://47.100.63.79:8002/profile/upload/2023/03/30/baiji_20230228162245A005.FBX"
      let modelUrl = this.modelUrl;
      const manager = new THREE.LoadingManager();
      // add handler for TGA textures
      manager.addHandler(/\.tga$/i, new TGALoader());
      const fbxLoader = new FBXLoader(manager);
      let mesh1;
      let myReq;
      let _this = this
      fbxLoader.load(modelUrl,function (fbx) {
        console.log('控制台查看加载fbx文件返回的对象结构', fbx)
        // console.log('fbx对象场景属性',fbx.scene)\

        mesh1 = fbx.children[0].clone();
        mesh1.position.set(0,0,0)
        // mesh1.translate(0,0,0)
        // 重置几何中心
        mesh1.geometry.computeBoundingBox();
        mesh1.geometry.center();
        scene.add(mesh1);

        //mesh:模型
        const box = new THREE.Box3().setFromObject( mesh1 );
        const size = box.size();
        console.log("size:", size)
        const light = fbx.children[1].clone();
        scene.add(light);

        // _this.computerCameraPos(camera,mesh1);
        // scene.add(fbx.scene)
        function render() {
          // renderer.render(scene, camera);
          mesh1.rotateY(0.01);
          myReq = requestAnimationFrame(render);
          // console.log("console.log(myReq)",myReq)
        }
        myReq = requestAnimationFrame(render);
        /*停止动画*/
        // console.log("myReq",myReq)
        // cancelAnimationFrame(myReq);
      })




      // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
      // 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
      // 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
      camera.updateProjectionMatrix();
      console.log(camera.position)
      // renderer.render(scene,camera);

      const axesHelper = new THREE.AxesHelper(200);
      scene.add(axesHelper);

      const light = new THREE.AmbientLight( 0x404040 ); // soft white light
      scene.add( light );
      const pointLight = new PointLight(0xffffff,1);
      pointLight.position.set(100,100,150)
      scene.add(pointLight);
      const light2 = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
      scene.add( light2 );

      /* 点光源辅助 */
      const spherSize = 5;
      const pointLightHelper = new THREE.PointLightHelper(pointLight, spherSize);
      // scene.add(pointLightHelper);

      const renderer = new THREE.WebGLRenderer( {
        //增加下面两个属性,可以抗锯齿
        antialias:true,
        alpha:true
      });
      // 获取当前窗口的像素比 设置像素比
      renderer.setPixelRatio( window.devicePixelRatio );
      //设置背景颜色
      renderer.setClearColor(0xBFBFBF, 1);
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.toneMappingExposure = 1;
      renderer.outputEncoding = THREE.sRGBEncoding;
      renderer.render(scene,camera);
      const orbitControls = new OrbitControls(camera,renderer.domElement);
      orbitControls.addEventListener("change", function () {
        renderer.render(scene, camera)
        // 浏览器控制台查看相机位置变化
        // console.log('camera.position', camera.position);

      })
      orbitControls.minDistance = 50;
      orbitControls.maxDistance = 400;
      // orbitControls.target.set( 0, 0, 0);
      orbitControls.update();

      //解决加载gltf格式模型颜色偏差问题
      // renderer.outputEncoding = THREE.sRGBEncoding;
      // 渲染循环
      console.log('mesh1', mesh1);
      console.log('scene', scene);
      console.log('meshBaiJi', scene.children[6]);
      let reqID;
      function render() {
        renderer.render(scene, camera);
        // meshBaiJi.rotateX(0.01);
        reqID = requestAnimationFrame(render);
      }
      reqID = requestAnimationFrame(render);
      console.log("reqID",reqID)
      // renderer.render(scene,camera);
      // document.getElementById('webgl').appendChild(renderer.domElement);
      this.$refs.three_canvas.appendChild(renderer.domElement);
    },
    // 计算摄像机位置
    computerCameraPos(camera, mod) {
      var boxHelper = new THREE.BoxHelper();
      boxHelper.setFromObject(mod);
      var center = boxHelper.geometry.boundingSphere.center;
      var radius = boxHelper.geometry.boundingSphere.radius;
      var cameraPos = new THREE.Vector3(
          center.x + mod.position.x,
          center.y + mod.position.y,
          radius * 1.2 + center.z + mod.position.z
          // radius * 1.2 + center.z + mod.position.z
      );

      // threeScene.minCameraZ = cameraPos.z - 100;
      // threeScene.maxCameraZ = cameraPos.z + 100;
      camera.position.copy(cameraPos);

      let lookPos = new THREE.Vector3(
          center.x + mod.position.x,
          center.y + mod.position.y,
          center.z + mod.position.z
      );
      return lookPos;
    }

  }

group 居中

给这个group设置一个包围盒
让包围盒居中,然后设置group平移到与包围盒的位置相等
包围盒设置.getCenter()就可以居中
拿到包围盒的中心点坐标后,调用.distance()方法就得到两点直接的距离,根据距离平移group的xyz就可以实现居中了
group.translate -x -y -z

const box = new Box3().setFromObject(model);
    const size = box.getSize(new Vector3());
    const center = box.getCenter(new Vector3());
      // 计算缩放比例
    const maxSize = Math.max(size.x, size.y, size.z);
    const targetSize = 75; // 目标大小
    const scale = targetSize / (maxSize > 1 ? maxSize : 0.5);
    model.scale.set(scale, scale, scale);
    // 设置模型位置
    // model.position.sub(center.multiplyScalar(scale));
    // 设置控制器最小缩放值
    controls.maxDistance = size.length() * 10;
    // 设置相机位置
    camera.position.set(150, 0, 150);
    // 设置相机坐标系
    camera.lookAt(center);
    camera.updateProjectionMatrix();
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值