如何在three.js中缩放，将对象定位到正确的大小答案

【问题标题】：How to scale,position an object to the right size in three.js如何在three.js中缩放，将对象定位到正确的大小
【发布时间】：2021-11-25 20:08:13
【问题描述】：

我刚开始学习 three.js，我想测试使用 gltf 加载器的导入模型。当我加载某个 3d 模型时，我的场景看起来像这样，

但没有模型，背景看起来像这样（启用 alpha true 并将画布的 bg 更改为渐变后）

我试图加载的对象是这个，

我假设它与相机角度或物体比例有关，以下是我的完整js代码。

const loader = new GLTFLoader();
const gui = new dat.GUI()
loader.load('orange.glb', (gltf) => {
   browserscene.add(gltf.scene)
   gltf.scene.position.x = 10
   gltf.scene.position.y = 20
   gltf.scene.rotation.x = 0.2
   gltf.scene.rotation.z = 0.8
   gltf.scene.scale.x = 3
   gltf.scene.scale.y = 3

 });


  // Debug


  // Canvas
  const canvas = document.querySelector('canvas.webgl')

  // Scene
  const browserscene = new THREE.Scene()

  // Materials

   const material = new THREE.MeshBasicMaterial()
   material.color = new THREE.Color(0xFFFE00)

   // Lights

   var light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 10);
   browserscene.add(light);

   const sizes = {
     width: window.innerWidth,
     height: window.innerHeight
    }

     window.addEventListener('resize', () => {
      // Update sizes
      sizes.width = window.innerWidth
      sizes.height = window.innerHeight

       // Update camera
       camera.aspect = sizes.width / sizes.height
       camera.updateProjectionMatrix()

       // Update renderer
       renderer.setSize(sizes.width, sizes.height)
       renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
      })


      const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
      camera.position.x = 0
      camera.position.y = 0
      camera.position.z = 2
      browserscene.add(camera)


      const renderer = new THREE.WebGLRenderer({
         canvas: canvas, antialias: true, alpha: true
      })
      renderer.setSize(sizes.width, sizes.height)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

      const animate = () => {

      // Render
      requestAnimationFrame(animate)
      renderer.render(browserscene, camera)

    

     }

     animate()

【问题讨论】：

标签： javascript three.js web-deployment web-frontend gltf

【解决方案1】：

如果无法访问模型，我们可能无法告诉您应该为其提供什么尺寸或位置，但 glTF 模型旨在以米为单位。根据来源，模型可能会也可能不会遵守，例如它可能是从另一种没有单位的格式转换而来的，比如 OBJ。

您可以使用THREE.Box3.setFromObject(gltf.scene) 查找模型的尺寸并进行调整，因为您的相机距离原点 2m。

【讨论】：