Question

我有一个用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();

}

Answer 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()，可帮助您可视化模型的边界框。

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

1 个答案: