Three.js 中心 3d 模型

Question

这是我第一次在 stackoverflow 上写文章...几天后，我尝试使用 javascript 库 Three.js （实际上版本为 n\xc2\xb0 r99），我正确地输入了 3D 模型，但是当我看到它加载是从后面看到的，而不是在视口的中心，我该如何修复它？

\n\n

代码是这样的：

\n\n

\r\n

\r\n

<script>\r\n\r\nvar scene = new THREE.scene();\r\n\r\nvar camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000);\r\n\r\ncamera.position.z = 15;\r\n\r\nvar render = new THREE.WebGLRenderer();\r\nrenderer.setSize ( window.InnerWidth, window.InnerHeight );\r\ndocument.body.appendChild (renderer.domElement);\r\nwindow.addEventListener(\'resize\', function(){\r\nvar width = window.innerWidth;\r\nvar height = window.innerHeight;\r\nrenderer.setSize( width, height );\r\ncamera.aspect = width / height;\r\ncamera.updateProjectMatrix();\r\n});\r\n\r\ncontrols = new THREE.OrbitControls ( camera, renderer.domElement );\r\n\r\nvar loader = new THREE.ObjectLoader();\r\nloader.load("/models/teschio.json",function (obj)\r\n{\r\nscene.add( obj );\r\n});\r\n\r\nvar animate = function (){\r\nrequestAnimateFrame ( animate );\r\nrenderer.render (scene, camera);\r\n}\r\nanimate();\r\n\r\n</script>

\r\n

\r\n

\r\n

\n\n

这是当前的线框屏幕：\n实际线框

\n\n

预先感谢您的任何答复。

\n

Answer 1

像这样的东西：

var loader = new THREE.ObjectLoader();
loader.load("/models/teschio.json",function (obj)
{
  var box = new THREE.Box3().setFromObject( obj );
  var center = new THREE.Vector3();
  box.getCenter( center );
  obj.position.sub( center ); // center the model
  obj.rotation.y = Math.PI;   // rotate the model
  scene.add( obj );
});