How do I move an individual vertex in AFrame? - javascript

In Three.js I could use:
myObject.geometry.vertices[i].y += 12;
but in A-Frame nothing is even visible in console.log.
I had seen where between 0.2.0 and 0.3.0 everything
defaults to to buffer geometry and vertices were hidden.
Overriding this was possible, but now in 0.5.0 not even
the geometry array is listed in console.log.
console.log(myObject.geoetry); //now returns 'undefined'.
console.log(myObject); //returns the markup only, no array!?
Is there currently a way to address individual vertices to change their positions?

Set geometry="buffer: false".
https://aframe.io/docs/0.5.0/components/geometry.html#base_properties_buffer
Then get the geometry:
el.getObject3D('mesh').geometry

Related

THREE.js What does this vertices mean in the box geometry?

I have created a box geometry as below,
const hand1geo = new THREE.BoxGeometry(2, 0.01, 0.2);
const material_sidehand = new THREE.MeshBasicMaterial({ color: 0x3cc1b7 });
const sidehand = new THREE.Mesh(hand1geo, material_sidehand);
What I want to do is to extract vertices from this box and I use this,
this.sidehand.attributes.position.array
And what I got is as following,
The picture of result. I really don't understand why it just spanned 72 elements(24 vectors) with same value. Why there are 24 vectors here and where have them been defined? Because I wanna use raycaster to do the collision detection later on.
I tried to use this.sidehand.vertices but it doesn't work.
I tried to use this.sidehand.vertices but it doesn't work.
I don't know what references you used but Mesh never had a property called vertices. You probably refer to the former Geometry class which indeed had this property. However, this class has been deprecated and BufferGeometry is used now instead.
I really don't understand why it just spanned 72 elements(24 vectors) with same value.
The values are not identical. BoxGeometry defines all vertices of the box in local space in a flat array so the data can be directly used by the WebGL API (which is good for performance).
There are 24 vectors because the geometry defines for each side of the box four vertices. Each side is composed of two triangles. This is done so it's possible to generate proper normals and texture coordinates.
I suggest you reconsider to use raw geometry data for collision detection. You are going to achieve much better performance by working with bounding volumes instead.

Three js smooth shading appearing flat

I'm loading .stl files, applying MeshStandardMaterial without touching the flatShading property as by default it is false.
The result looks very flat to me. If I try setting flatShading: true the result is the same.
I've tried everything I could think of but have ran out of ideas - any suggestion would be welcome, thanks.
geometry.computeVertexNormals();
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
geometry.normalizeNormals();
The result looks very flat to me. If I try setting flatShading: true the result is the same.
STLLoader always returns a non-indexed buffer geometry (unconnected triangle soup). That means the geometry's faces share no vertices and thus using BufferGeometry.computeVertexNormals() can not produce normals required for smooth shading.
Also recomputing bounding volumes and the usage of BufferGeometry.normalizeNormals() are unrelated to this issue.
You can try to solve this issue by ensuring the asset comes with normals that allow smooth shading. Or you give BufferGeometryUtils.mergeVertices() a try which produces an indexed geometry by merging vertices.

How can I render a polyline element in mxGraph?

Does mxGraph have a specific polyline object? That is, an edge that goes through a number of points. At the moment I'm faking it using multiple straight edges linked by invisible vertices, but this messes up the graph structure.
Waypoints can be added to edges in mxGeometry.points. To change them you need to clone any existing geometry object (in-place changes cause undo problems):
var geometry = model.getGeometry(edge);
geometry = geometry.clone();
geometry.points = points;
Assuming edge is the edge object to alter and points is an array of mxPoint.
The terminal points for dangling edges can be changed via mxGeometry.setTerminalPoint(mxPoint, boolean).

three js same position (reference) for 2 Object3D()

I am trying to add 2 (or more) Meshes to the same scene, but i want all the Object3D to share the same position (but with a different rotation for each object).
I know the ".copy()" method, but in my case, there are so many objects and using a loop to change the position of all the objects (60 times per seconds) is resulting a poor performance.
So, I tried to use the same position reference for the objects:
var o=new THREE.Object3D(); // the first object
var p=new THREE.Object3D(); // the second object
o.position=p.position; // the position of the first object becomes the reference to the position of the second object
o.position==p.position; // false, but why?
But it isn't working and I don't get why!
My question is:
Is it possible to change the position reference of a THREE.Object3D()?
And if it isn't, how can I improve the performance of my scene?
Thanks in advance!
Edit: seems to works for someone (this answer is exactly what i can't do): How to set the Object3D position and rotation same as the added mesh ? [three.js]

three js getting coordinates of mesh.lookAt(object);

I have scene,meshes and target object.
When i set up
mesh.lookAt(object)
mesh correctly facing of object.
How can i repeat this rotation of mesh on another mesh, to force another mesh facing the same direction (not the same object, but the same orientation as a first mesh have)?
How can i get rotation coordinates of first mesh?
How can i get this coordinates without need of creating mesh and order mesh.lookAt(object). That mean only to calculate this coordinates without need to use it on some object?
UPDATE:
Only possible solution is to create new THREE.Object3D() and use object.lookAt(target). Then repeat rotation for all later loaded object like: new_object.rotation.set(object.rotation.x,object.rotation.y,object.rotation.z)
You will create only one Object, not a lot of unuseful Vector3-s.
Do not use new_object.rotation = object.rotation it is functional solution, but a variables stay connected. Change of object rotation, will update new_object.rotation too (renderer is updating all values each frame).
You can set the local rotation of the other meshes to the local rotation of the mech facing in the correct direction.
anyOtherMesh.rotation = mesh.rotation;
what about a
lookAt( new THREE.Vector3( target.position.x, target.position.y, target.position.z )
?

Categories

Resources