这是我第一次在stackoverflow上发帖...几天来,我一直在尝试使用javascript库Three.js(实际版本号为n° r99),我成功地加载了3D模型,但当我看到它被加载时,它是从后面看到的而不是居中于视口,我该如何修复它?
代码如下:
这是目前的线框屏幕:
实际线框
感谢您提前提供任何答案。
代码如下:
<script>
var scene = new THREE.scene();
var camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 15;
var render = new THREE.WebGLRenderer();
renderer.setSize ( window.InnerWidth, window.InnerHeight );
document.body.appendChild (renderer.domElement);
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize( width, height );
camera.aspect = width / height;
camera.updateProjectMatrix();
});
controls = new THREE.OrbitControls ( camera, renderer.domElement );
var loader = new THREE.ObjectLoader();
loader.load("/models/teschio.json",function (obj)
{
scene.add( obj );
});
var animate = function (){
requestAnimateFrame ( animate );
renderer.render (scene, camera);
}
animate();
</script>
THREE.Box3()
是AABB(轴对齐包围盒)。你可以从加载的对象中设置它。然后使用.getCenter()
方法获取其中心点,最后从对象的默认位置中减去中心的向量即可。你可以在文档中阅读所有相关内容 :) 如果这个答案解决了你的问题,请将其标记为已接受 :) - prisoner849