gpt4 book ai didi

javascript - 旋转 .obj 文件 OBJMTLLoader three.js

转载 作者:行者123 更新时间:2023-11-29 18:17:03 27 4
gpt4 key购买 nike

我为一个 obj 文件使用了 OBJMTLLoader 类,并且通过使用 object.rotation.y -= 0.5 围绕对象上的一个固定点旋转效果很好。使用相同的代码(减去更改相机位置),我将 .obj 文件替换为另一个文件,并且旋转现在以圆周运动进行,就像围绕相机而不是停留在原地。知道为什么我使用相同的代码吗?

谢谢

编辑:

var OBJLoaded;    

function init()
{
container = document.getElementById('player');
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000);
camera.position.x = 110;
camera.position.z = -160;
camera.position.y = 15;

// camera.position.z = 40;
// camera.position.y = 2;

//scene
scene = new THREE.Scene();

var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 100, 90, 200 );
scene.add( directionalLight );

//model
var loader = new THREE.OBJMTLLoader();
//loader.load('./assets/Stereo_LowPoly.obj', './assets/Stereo_LowPoly.mtl', function(object)
loader.load('./assets/studio_beats.obj', './assets/studio_beats.mtl', function(object)
{
OBJLoaded = object;
console.log(object);
scene.add( object );
});

renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setClearColor(0x000000, 0);
renderer.setSize($('#player').width(), $('#player').height());
container.appendChild(renderer.domElement);

scene.add(camera);
}

function animateBoombox()
{
requestAnimationFrame(animateBoombox);
render();
}

function render()
{
var rotSpeed = 0.004;
if (OBJLoaded)
{
OBJLoaded.rotation.y -= rotSpeed;
}
renderer.render(scene, camera);
}

评论的部分(相机和对象加载)是针对上一个加载的对象。这工作正常,但未注释的部分工作不一样。

最佳答案

您加载的对象有一个来自模型创建软件的轴心点...您需要在使用 three.js 加载它之前更改对象的轴心点。

如果你不能,你应该像我在加载器回调中那样做:

            var loader = new THREE.OBJMTLLoader();
loader.load('your_file.obj', 'your_file.mtl', function (object) {
object.traverse(function (child) {
child.centroid = new THREE.Vector3();
for (var i = 0, l = child.geometry.vertices.length; i < l; i++) {
child.centroid.add(child.geometry.vertices[i].clone());
}
child.centroid.divideScalar(child.geometry.vertices.length);
var offset = child.centroid.clone();
child.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-offset.x, -offset.y, -offset.z));
child.position.copy(child.centroid);
child.geometry.computeBoundingBox();
});
});

然后旋转你的对象...

关于javascript - 旋转 .obj 文件 OBJMTLLoader three.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22277081/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com