Problem: The origins of objects used with gltf-part are at 0,0,0
codesandbox example: https://codesandbox.io/s/xenodochial-moore-4383f?file=/index.html
shows a log with the correct positions when displayed as a scene and one where I use gltf-part to show the cubes where all positions of the cubes are at 0,0,0
The exported scene is from blender, in which I set the origin to the center of each cube, see the top right cube.
After importing the gltf file in Aframe, and showing the cubes with gltf-part, every cube has as origin 0,0,0.
The GLTF is correct, when I import it again in blender, the origins are still at the center of the cube.
How can I get the correct coordinates of each cube in Aframe if they are all at position 0,0,0 ?
This works for me:
window.addEventListener("model-loaded", (e) => {
const sceneObj = document.querySelector("a-scene").object3D;
let object;
object = sceneObj.getObjectByProperty("name", "cube1");
console.log(object.position);
object = sceneObj.getObjectByProperty("name", "cube2");
console.log(object.position);
});
The component is behaving as expected, the parts are selected but you're still loading them as a child in your scene so their relative positions are retained at 0,0,0 for the parent element.
Here is a rough outline of how to change this behavior to meet your needs:
You will need to edit the gltf-part component to "reset" the position of the "part" that it extracts when it is loaded. After the mesh is cloned in this line:
mesh = part.getObjectByProperty('type', 'Mesh').clone(true);
then you'll want to copy the position of that mesh to a variable and then also reset the mesh locally:
mesh.position.set ( 0, 0, 0 );
Then you'll want to set the A-Frame entity to the position that you've just saved in the variable.
Here is example code with a modified component: https://codesandbox.io/s/gltf-part-reset-qgovf note the renamed component to gltf-part-reset and the new attribute resetPosition. The default is false to retain existing gltf-part behavior, set to true in this example to exhibit desired behavior.
Related
I have a QScrollArea Widget, which starts empty;
It has a vertical layout, with a QGridLayout, and a vertical spacer to keep it at the top, and prevent it from stretching over the whole scroll area;
Elsewhere in the program, there is a QTextEdit, which when changed, has its contents scanned for "species" elements, and then they are added to the QGridLayout. Any species elements which have been removed are removed too. This bit works;
I have turned the vertical scrollbar on all the time, so that when it appears it does not sit on top of the other stuff in there. Note that the scroll bar is larger than the scroll box already though, despite not needing to be.
This is the problem. The scroll area seems to be preset, and i cannot change it. If i add more rows to the QGridLayout, the scroll area doesn't increase in size.
Instead, it stays the same size, and squeezes the QGridLayout, making it look ugly (at first);
And then after adding even more it becomes unusable;
Note that again, the scroll bar is still the same size as in previous images. The first two images are from Qt Designer, the subsequent 3 are from the program running.
If I resize the window so that the QScrollArea grows, then I see this:
Indicating that there's some layout inside the scroll area that is not resizing properly.
My question is; what do I need to do to make the scrollable area of the widget resize dynamically as I add and remove from the QGridLayout?
If you're coming here from Google and not having luck with the accepted answer, that's because you're missing the other secret invocation: QScrollArea::setWidget. You must create and explicitly identify a single widget which is to be scrolled. It's not enough to just add the item as a child! Adding multiple items directly to the ScrollArea will also not work.
This script demonstrates a simple working example of QScrollArea:
from PySide.QtGui import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
inner.layout().addWidget(b)
scroll.show()
app.exec_()
The documentation provide an answer :
widgetResizable : bool
This property holds whether the scroll area should resize the view widget.
If this property is set to false (the default), the scroll area honors the size of its widget.
Set it to true.
Why don't you use a QListView for your rows, it will manage all the issues for you? Just make sure that after you add it you click on the Class (top right window of designer) and assign a layout or it wont expand properly.
I use a QLIstWidget inside a QScrollArea to make a scrollable image list
Try this for adding other objects to the list, this is how I add an image to the list.
QImage& qim = myclass.getQTImage();
QImage iconImage = copyImageToSquareRegion(qim, ui->display_image->palette().color(QWidget::backgroundRole()));
QListWidgetItem* pItem = new QListWidgetItem(QIcon(QPixmap::fromImage(iconImage)), NULL);
pItem->setData(Qt::UserRole, "thumb" + QString::number(ui->ImageThumbList->count())); // probably not necessary for you
QString strTooltip = "a tooltip"
pItem->setToolTip(strTooltip);
ui->ImageThumbList->addItem(pItem);
Update on Artfunkel's answer:
Here's a PySide6 demo that uses a "Populate" button to run the for loop adding items to the scroll area. Each button will also delete itself when clicked.
from PySide6.QtWidgets import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
def on_remove_widget(button):
button.deleteLater()
def populate():
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
b.clicked.connect(b.deleteLater)
inner.layout().addWidget(b)
b = QPushButton(inner)
b.setText("Populate")
b.clicked.connect(populate)
inner.layout().addWidget(b)
scroll.show()
app.exec()
I try to use camera's viewVector to make plane face to camera, but it will turn Clockwise or Counterclockwise when Camera rotate to left or right.
Can I make the plane always face to camera without turning Clockwise or Counterclockwise?
I think camera->upVector() can help me maybe, but I don't how to use.
My code :
class planeTransformClass : public Qt3DCore::QTransform {
public:
planeTransformClass( Qt3DCore::QNode *entity = nullptr ) :Qt3DCore::QTransform(entity) {}
signals:
void faceTo( QVector3D v ) {
setRotation(QQuaternion::rotationTo(QVector3D(0,1,0), -v));
} ;
};
// Background
Qt3DCore::QEntity *planeEntity = new Qt3DCore::QEntity(rootEntity);
Qt3DExtras::QPlaneMesh *planeMesh = new Qt3DExtras::QPlaneMesh(planeEntity);
planeMesh->setHeight(2);
planeMesh->setWidth(2);
Qt3DExtras::QTextureMaterial planeMaterial = new Qt3DExtras::QTextureMaterial(planeEntity);
Qt3DRender::QTexture2D *planeTexture = new Qt3DRender::QTexture2D(planeMaterial);
FlippedTextureImage *planeTextureImage = new FlippedTextureImage(planeTexture);
planeTextureImage->setSize(QSize(3000, 3000));
planeTexture->addTextureImage(planeTextureImage);
planeMaterial->setTexture(planeTexture);
planeMaterial->setAlphaBlendingEnabled(true);
// Transform
planeTransformClass planeTransform = new planeTransformClass(planeEntity);
planeTransform->setRotationX(90);
planeTransform->setTranslation(QVector3D(2, 0, 0));
planeEntity->addComponent(planeMesh);
planeEntity->addComponent(planeMaterial);
planeEntity->addComponent(planeTransform);
// connect camera's viewVectorChanged
camera->connect( camera, &Qt3DRender::QCamera::viewVectorChanged,
planeTransform, &planeTransformClass::faceTo);
Solution using geometry shader
There is already a C++ translation this QML code that I tried to translate (using geometry shader):
https://github.com/ismailsunni/qt3d-custom-shader
My own translation can be found here. It works now after solving the issues mentioned in this question.
Solution without geometry shader
I got a different version running based on this bug report. You can find my implementation on GitHub. The billboards don't change their size when the camera moves, i.e. become smaller and larger on screen like every other object, but I hope you can work with that.
On the master branch the images also move for some reason as can be seen in this image:
The no_instanced_rendering branch doesn't use instanced rendering and displays everything correctly.
Edit
I'm sorry I'm not using your example but I don't have time anymore to adjust it. Check out the patch related to the bug report I mentioned. The person implemented a material with this effect, you should be able to extract it and make it run.
I am using vue-cytoscape to render a graph and navigate through a tree-like data structure.
My goal is to expand parent nodes and keep their position in the graph. I would like to simply add the new children nodes.
My approach is to lock current nodes, add the children and unlock the nodes.
this.cy.nodes().lock()
for(let d of data){
this.cy.add(d)
}
this.cy.elements().layout(this.config.layout).run()
setTimeout(() => {this.cy.nodes().unlock()}, 2000) // Give some time for the layout to render before unlocking nodes.
The problem is that the layouts do not consider the locked state of the nodes. Only the new nodes are moved around, which is fine. But the layout is not respected. I am under the impression that the layout calculates a new position for all nodes, but then moves only nodes that are unlocked.
According to this GitHub issue, some layout algorithm should handle locked nodes. I am using the following layouts and none seem to consider locked nodes.
Cola
Fcose
Dagre
avsdf
grid
concentric
Please try calling the layout function only on the added nodes:
var eles = cy.add(data); // refer to http://js.cytoscape.org/#cy.add for adding nodes
eles.layout(this.config.layout).run();
If you don't want nodes to move when calling the layout function, you can exclude them from the rendering. While calling cy.add(), the function returns an object with every added element inside (see var eles = ... in the code).
From an action in a view that is made of multiple borders, splits, and so on, I would like to reach data that are situated in different tables of the view.
To do that, I try to deduce the viewPath parameter for the getSelectedModel, getModel methods.
What is the structure of the view, how to navigate between the different tables and deduce the viewPath in order to call the getSelectedModel / getModel... ?
The view path is an array of indexes that allows to navigate from a view to another one in the containment hierarchy. It is used in several methods of the AbstractActionContextAware class that is extended by all actions, but that you can also extend from any application class that would need utility methods to explore the action context.
The rationale behind this view path is to start from the view from which the action was triggered and to follow the view path to reach the target view and, for instance, get its selected index.
The navigation rules are the following :
a negative step index (-n) in the path means navigate up to the n'th parent
a positive step index (+n) in the path means navigate down to the n'th child
The index of the child view when a positive step is found depends on the type of container you're on. Here are the rules :
children indexes are zero-based.
the children of a border container are indexed following this fixed order : north, west, center, east, south. I one child is missing then it is not taken into account, e.g. in a border with only a north and center children views, the center child will have index 1.
the children of a grid container (either even or constrained), tab container are indexed following their order of declaration.
the children of a split container are indexed from top to bottom or left to right depending of its orientation.
For instance, given the following UI :
split_horizontal {
left {
tabs {
form
table('A')
}
}
right {
border {
top {
form
}
center {
table('B')
}
}
}
}
the view path from table `A` to table `B` will be :
[-1, -1, 1, 1]
In Sencha's API for border layout it says:
There is no BorderLayout.Region class in ExtJS 4.0+
What I found on various blogs, for accessing the center panel was this:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var centerR = viewPort.layout.centerRegion;
Again to the docs, I see that centerRegion is a private function (why?), and I don't care to rely on those, for future proofing. Also, there is no westRegion, northRegion, etc...
How does one get to these items?
I could of course get the items inside the regions: The various panels, and such, but I want complete control of the viewport that holds my border layout.
This is what I'm doing now:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var view = Ext.widget('my-new-tab-panel');
viewPort.layout.centerRegion.removeAll();
viewPort.layout.centerRegion.add(view);
Is there a better way?
Usually, I setup an id for each container I have to work with. So, my center region will have an id and I'll get it with Ext.getCmp() function.
Otherwise, to access to the viewport items you can do as follows:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var view = Ext.widget('my-new-tab-panel');
viewPort.items.items[0].removeAll();
viewPort.items.items[0].add(view);
If you've defined center region as the first item of viewport, then the above code it's ok but if you've defined it as the third or the fourth, then you have to change the index according to the position of your region (viewPort.items[3] or viewPort.items[4], etc).
Another way is to use query selector:
var cr = viewPort.down('panel[region=center]');
cr.removeAll();
cr.add(view);
However, following this way, you have to query on a precisely xtype (as panel in this case).
Anyway, I think the best way is to use an id for each region.