Three.js - 无法更改加载的 JSON 位置答案

【问题标题】：Three.js - Can't change loaded JSON positionThree.js - 无法更改加载的 JSON 位置
【发布时间】：2014-06-19 21:11:51
【问题描述】：

我有一个用 Google Sketchup 制作的寺庙模型（.obj 文件）。我将其转换为 JSON 并将其加载到我的应用程序中。但问题是网格被移到了很远的位置，所以我看不到它。我试图改变它的立场，但到目前为止我失败了。下面是我的代码。你能告诉我有什么问题吗？我是 Three.js 的新手，不知所措

// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;

init();
animate();

// Sets up the scene.
function init() {

  // Create the scene and set the scene size.
  scene = new THREE.Scene();
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;

  // Create a renderer and add it to the DOM.
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.body.appendChild(renderer.domElement);

  // Create a camera, zoom it out from the model a bit, and add it to the scene.
  camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
  camera.position.set(0,16,0);
  scene.add(camera);

  // Create an event listener that resizes the renderer with the browser window.
  window.addEventListener('resize', function() {
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });

  // Set the background color of the scene.
  renderer.setClearColor(0x333F47, 1);

  // Create a light, set its position, and add it to the scene.
  var light = new THREE.PointLight(0xffffff);
  light.position.set(-100,200,100);
  scene.add(light);

  // Load in the mesh and add it to the scene.
  var loader = new THREE.JSONLoader();

  loader.load( "models/naos_apollona.js", function(geometry){
    var material = new THREE.MeshLambertMaterial({color: 0x55B663});
    mesh = new THREE.Mesh(geometry, material);
//mesh.position.set(1,1,1)
    scene.add(mesh);
  });

  // Add OrbitControls so that we can pan around with the mouse.
  controls = new THREE.OrbitControls(camera, renderer.domElement);

}

// Renders the scene and updates the render as needed.
function animate() {

  // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  requestAnimationFrame(animate);

  // Render the scene.
  renderer.render(scene, camera);
  controls.update();

}

【问题讨论】：

标签： json position three.js

【解决方案1】：

您真的不知道您的模型在太空中的哪个位置。所以你需要做的是使用模型的边界框，找到它的中心并从位置中减去它。

mesh = new THREE.Mesh ...;
mesh.geometry.computeBoundingBox ();
var bBox = mesh.geometry.boundingBox;
mesh.position.set (bBox.min.x-bBox.max.x, bBox.min.y-bBox.max.y, bBox.min.z-bBox.max.z);

还有一个边界框助手THREE.BoundingBoxHelper() 可以帮助您可视化模型的边界框。

【讨论】：

谢谢。我去看看