小编MrG*_*tto的帖子

当旋转超过90度时,Three.js setFromRotationMatrix奇怪的行为

我有每个旋转轴都有一个单独父对象的对象(1表示X旋转,1表示Y旋转,1表示Z旋转.它们也按顺序相互关联:X旋转对象是Y旋转对象的子节点.Y旋转对象是Z旋转对象的子节点.

我正在尝试创建一个允许用户一起旋转场景中所有对象的功能(它们都包含在一个Object3D中).当旋转Object3D时,程序必须找到所有对象相对于世界的绝对位置和旋转,以便程序可以为每个对象输出新值.

要做到这一点,我目前设置移动对象,使其在"场景旋转器"(Object3D)内的位置设置为相对于世界的绝对位置.现在,我试图使对象的旋转成为对象相对于世界的绝对旋转,以便在"场景旋转器"的旋转改变时它相应地改变.此外,当我尝试在子对象上运行一次时,setFromRotationMatrix方法无法正常工作,所以相反,我必须为每个父对象再次运行它,并相应地从它们获取每个单独的旋转

这是我目前拥有的代码,它应该获得对象相对于世界的绝对旋转:

var beforeRotForX = new THREE.Euler();
beforeRotForX.setFromRotationMatrix(objects[i].parent.matrixWorld, "ZYX");

var beforeRotForY = new THREE.Euler(); // Had to be a separate one for some reason...
beforeRotForY.setFromRotationMatrix(objects[i].parent.parent.matrixWorld, "ZYX");

var beforeRotForZ = new THREE.Euler(); // And apparently this one has to be separate too
beforeRotForZ.setFromRotationMatrix(objects[i].parent.parent.parent.matrixWorld, "ZYX");

// Absolute before rotation
objects[i].userData.sceneBeforeRotAbs = {
    x: beforeRotForX.x,
    y: beforeRotForY.y,
    z: beforeRotForZ.z
};
Run Code Online (Sandbox Code Playgroud)

然后,它必须将该绝对旋转应用于对象的相对旋转

objects[i].parent.rotation.x = objects[i].userData.sceneBeforeRotAbs.x;
objects[i].parent.parent.rotation.y = objects[i].userData.sceneBeforeRotAbs.y;
objects[i].parent.parent.parent.rotation.z = objects[i].userData.sceneBeforeRotAbs.z;
Run Code Online (Sandbox Code Playgroud)

当第二个父级的Y旋转在-90到90之间时,这一切都正常

// Results of absolute world rotation when the Y-rotation of …
Run Code Online (Sandbox Code Playgroud)

javascript parents euler-angles degrees three.js

8
推荐指数
1
解决办法
832
查看次数

Three.js隐形平面不能与raycaster.intersectObject一起使用

我正在尝试制作可拖动的对象,如下例所示:https://www.script-tutorials.com/demos/467/index.html

应该可拖动的对象位于数组objectMoverLines中.

我已经使用以下代码在我的场景中添加了一架飞机:

plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8), new THREE.MeshBasicMaterial({color: 0x248f24, alphaTest: 0}));
plane.visible = false;
scene.add(plane);
Run Code Online (Sandbox Code Playgroud)

问题发生在onDocumentMouseDown函数下.出于某种原因,如果平面可见性设置为false(plane.visible = false),那么在某个点,将不会填充intersectsobjmovers.但是,如果平面的可见性设置为true,它将正常工作(但很明显,这会导致巨大的飞机妨碍一切):

function onDocumentMouseDown(event) {
    // Object position movers
    var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
    var intersectsobjmovers = raycaster.intersectObjects(objectMoverLines);
    if (intersectsobjmovers.length > 0) {
        console.log('clicking an object mover');
        // Disable the controls
        controls.enabled = false;
        // Set the selection - first intersected object
        objmoverselection = intersectsobjmovers[0].object; …
Run Code Online (Sandbox Code Playgroud)

javascript three.js raycasting

4
推荐指数
1
解决办法
1818
查看次数

Three.js 从其子对象获取父对象(一组)

在我的场景中,有许多对象组 (Object3D),我设置了一个系统,用于单击/悬停在它们上以执行某些操作。当它使用 raycaster 查找鼠标下方的对象时,它返回单个对象,而不是组(我需要)。

我用来获取光标下对象的代码如下所示:

raycaster.setFromCamera(mouse, camera);
clickobjstore = raycaster.intersectObjects(objects, true);

// The following doesn't work because intersects[0] is not the group, it's the object within the group!
for (j = 0; j < intersects[0].object.children.length; j++) {
    intersects[0].object.children[j].material.color.setHex(0x1A75FF);
}
Run Code Online (Sandbox Code Playgroud)

javascript three.js html5-canvas

2
推荐指数
1
解决办法
3580
查看次数