I am creating a React project with React Three fiber to add a 3D model that the user can interact with.
Following the documentation, I imported my model (GLB format) I configured my camera.
Now I want to add random points on the surface of the model (like on this example => example )
Unfortunately, I cannot find the method to be applied in the Three Fiber documentation.
Anyone can tell me how to do that ?
Thank you for your time !
Related
I implement a web page in reactjs, and should show some input and output nodes and the edges between them. the data inside each nodes will change periodically and i need to change the data for them time to time.
i implemented it and works fine, but after stay in this page for a minute it can not remove the previous edges and it remain in the web page.
I uploaded a video clip about this issue
any idea about this issue?
issue with edges in react flow- youtube link
Finally I found the issue, i set the random generated id for edges, which sometimes make a repeated id and cause this issue, when i set the unique id for each edges issue solved. :)
So I have a RealityKit app, in it I add variousEntities.
I looked for inspiration for persistence at Apple's SceneKit example with the code, which I implemented only to find out missing Entities upon WorldMap Load
I'm assuming you are able to save and load the worldMap from the ARView's session, but the problem is that this only persists the old styler ARAnchors, and not the cool new Entity objects from the new RealityKit features.
The work around that I did, was to initialize my AnchorEntities, using the constructor that takes an ARAnchor. So, from my hitTest, or RayCast, I take the world transform and save it as an ARAnchor, then use that to initialize an AnchorEntity. I gave this ARAnchor a unique name, to be used later to re-map to an entity upon loading a persisted world map, since this map still only has ARAnchors.
let arAnchor = ARAnchor(name: anchorId, transform: rayCast.worldTransform) // ARAnchor with unique name or ID
let anchorEntity = AnchorEntity(anchor: arAnchor)
That's what it looks like before adding the anchors to the scene for the first time. After you save your world map, close, and reload, I then loop over the loaded or persisted ARAnchors, and associate each anchor with their respective Entities, which maps to the name in the ARAnchor.
let anchorEntity = AnchorEntity(anchor: persistedArAnchor) // use the existing ARAnchor that persisted to construct an Entity
var someModelEntity: Entity = myEntityThatMatchesTheAnchorName // remake the entity that maps to the existing named ARAnchor
anchorEntity.addChild(someModelEntity)
arView.scene.addAnchor(anchorEntity)
It's indirect, but taking advantage of that association between AnchorEntity and ARAnchor was the first solution I could find, given the limitation of only knowing how to persists ARAnchors, and not Entities in the worldMap.
Hi I am new to React and Here maps, I am using Here maps for maps. Currently I am able to show live marker position, I want to show road signs as well.
For that I am constructing a request as specified here documentation
https://image.maps.ls.hereapi.com/mia/1.6/roadsign?apiKey=H6XyiCT0w1t9GgTjqhRXxDMrVj9h78ya3NuxlwM7XUs®ion=USA&category=0&label=I-80&w=100&h=100&f=0
In the documentation , only highways signs are mentioned. Is it possible to query traffic,speed limit signs as well? And the response returns image(PNG) , I am thinking to put that image onto map at specific lat and long position. Is this the right way to do?
The roadsign feature of the Map Image API has a very limited selection of signs and is in maintenance. You will have to create or source these images yourself. Fortunately there are many free icon collections available on the web.
Once you have the images, you can use a MapMarker to place these on the map.
I'm using HP UFT for functional tests.
Because of dynamic id definition of ExtJS, I can't use UFT Recording feature.
I've tried many ways for assigning dynamic IDs to staticly.
I tried to change id: function() in ext-all-debug.js file.
I tried to change Components getId() function in ext-all-debug.js file.
I tried override components with afterRender method to change ids aswell.
Sometimes I achieved to change id's using component's properties (text, fieldLabel, overflowText, etc.), but for some components I couldn't achieve to assign ID's since the components properties seem empty.
Above, I listed my actions to assign static ID. So, I want to know your opinions about my actions and if you found them incorrect or not sufficient, could you offer me new approaches for using HP UFT recording feature with ExtJS6.
You can't change the dynamic id of the dom elements which represents ExtJS components. That's really bad thing and I think you would break the whole app.
The easiest way to test ExtJS app is to use already created frameworks/tools like:
Siesta by Bryntum
Sencha Test by Sencha
The Siesta is free. It has some pro features which requires the license. But you can use it for free.
If you still insists on doing it your way. You need to dynamically get the IDs of the dom elements created by ExtJS components. Basically write your own API.
You need to execute the ExtJS JS code, which will return you the ID of the component. So you need to get the ExtJS component and call getId() function on it to get the dom id.
Here is the example code:
>Ext.ComponentQuery.query('checkbox')[0].getId()
"checkbox-1047"
You will definetely need: http://docs.sencha.com/extjs/6.5.3/modern/Ext.ComponentQuery.html#method-query
And keep in mind that the query can be pretty advanced and you can use all the configs which are set on the ExtJS elements such as name, xtype, etc
You can find some other info in my other anwser https://stackoverflow.com/a/41718879/1768843
I'm following Dan Abramov's container & presentational components pattern for a set of address forms. There are 3 different versions of the address form. They differ by layout and the controls on it. When the form is submitted, there is distinct business logic run in the backend API to return some validation message to the form.
Form A:
First Name
Last Name
Address
City
State
Zip
Form B:
First Name
Last Name
Address
Zip
Form C:
Full Name
Zip
Currently I use three containers to manage the three forms and some logic is repeated in the containers. I anticipate more forms like these in the future.
How do I solve this problem where the code can be reused for many forms as well as forms are easy to manage and understand?
Since any React component is just JavaScript code, you can extract shared code into some utility functions/classes and use them in your form components.