三.js - 网格组示例?(THREE.Object3D() 进阶) [英] three.js - mesh group example? (THREE.Object3D() advanced)

问题描述

我正在尝试了解如何将子网格分组/链接到父网格.我希望能够:

I'm attempting to understand how to group / link child meshes to a parent. I want to be able to:

• 拖动父级
• 相对于父元素旋转子元素
• 让父母轮换/翻译为孩子做正确的事情

我在这方面的唯一背景是在第二人生中使用 LSL 来操纵对象中的链接素数.我想我不想合并网格，因为我想保持对每个孩子的控制(悬停、纹理、旋转、缩放等).

My only background in this is using LSL in Second Life to manipulate linked prims in an object. I am thinking I dont want to merge meshes, because I want to maintain control (hover, texture, rotation, scaling, etc) over each child.

有什么好的教程吗?这是通过 THREE.Object3D() 实现的，是吗?

Any good tutorials on this out there? This is achieved with THREE.Object3D(), yes?

谢谢，丹尼尔

推荐答案

拖动会有点棘手，因为您需要计算鼠标在屏幕(屏幕空间)上的 x/y 位置在 3D 世界中，那么您需要投射一条光线并检查它是否与您要拖动的对象相交.我想这将是一个不同的问题.

The dragging will be a bit more tricky because you need to work out where would the x/y positions of the mouse on the screen (screen space) will be in the 3D world, then you will need to cast a ray and check if it intersects the object you want to drag. I presume this will be a different question.

设置对象层次结构相当简单.正如您所暗示的，您将使用 THREE.Object3D 实例将对象嵌套到使用它的 add() 方法中.这个想法是，您将对具有几何图形的对象和 Object3D 实例使用网格，您只需在其中嵌套元素.

Setting object hierarchy is fairly simple. As you hinted, you will use a THREE.Object3D instance to nest objects into using it's add() method. The idea is that you will use a Mesh for objects that have geometry, and Object3D instances, where you simply need to nest elements.

group = new THREE.Object3D();//create an empty container
group.add( mesh );//add a mesh with geometry to it
scene.add( group );//when done, add the group to the scene

更新

正如 Nick Desaulniers 和 escapedcat 指出的那样，THREE.Group 现在提供了您需要的功能.包含的代码示例:

As Nick Desaulniers and escapedcat point out, THREE.Group now provides the functionality you need. The included code example:

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

这篇关于三.js - 网格组示例?(THREE.Object3D() 进阶)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！