I'm fairly new to both React and Threejs and am having a hard time wrapping my head around how to make an object from one component lookAt another object from another component using react-three-fiber and #react-three/drei. I have a custom PerspectiveCamera with controls in one component and some Text using #react-three/drei in another component. What I would like to happen is have the Text and planeGeometry face the camera at all times
Any help would be great! CodeSandbox here: https://codesandbox.io/s/wonderful-chaplygin-hihx70?file=/src/App.js
Related
I am having a human body object and what I want is that my code should open a popup whenever I click on any of the specified body parts such as eyes, nose, arms, etc. The object is a single compiled .obj file and I'm unable to figure out as to how should I attach an event listener to the multiple body parts. Any kind of help is much appreciated!
PS: - I am also using orbit controls to handle the zoom and rotation of object.
Thanks in advance..
To solve this issue, it's necessary to design your model in a way such that individual components like arms, eyes etc. are independent 3D objects grouped together to build a more complex asset. This is something you have to ensure during the design phase with a tool like Blender.
In the next step export to glTF instead of OBJ, load the model with THREE.GLTFLoader into your app and then perform a recursive raycasting with the entire asset via:
raycaster.intersectObject( gltf.scene, true, intersects );
By executing this code in a pointermove or pointerdown event listener you can find out whether the user interacts with the model or not.
Notice that three.js has no system to directly assign event listeners to 3D objects. You have to use a different solution like raycasting for this.
I have a complex web application, with several sub-views / widgets that add objects to the main scene.
Most simple THREE.js examples have a continous render loop, that re-renders the scene periodically.
This seems like a waste of ressources to me.
Therfore, I only want to re-render the scene if something has changed.
However, the sub-views / widgets do change things (like position of objects) in the scene on their own.
Is there something like a "scene.hasChanged" flag, that I can use to deceide if the scene needs to be rerendered? Or do I have to implement a parallel flag or notification structure myself?
Or is there another common solution to this?
Based on what you have written so far, it seems you have to implement a custom solution. Certain three.js examples like webgl_loader_gltf do not use an animation loop but utilize change events from the controls. The relevant line of code is
controls.addEventListener( 'change', render );
However, if more factors than just the user interaction trigger renderings, it's necessary to build some sort of notification/event system by yourself.
three.js R113
I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.
I would like animate a object similar 3D sequence diagram using Unity 3D. I don´t know what is better form to animate, if Animation or Animator...
So, I do a preview on Power Point https://youtu.be/tgfPIT47xGY
Animation vs Animator:
The Animation component is an old component used for animation in our legacy animation system. It remains in Unity for backwards compatibility but you should not use it for new projects. Use the up-to-date Animator component instead. SOURCE
Use the Animation Editor View for this.
To animate Game Objects in Unity, the object or objects need an Animator Component attached. This Animator Component must reference an Animator Controller, which in turn contains references to one or more Animation Clips.
When using the Animation View to begin animating a GameObject in Unity, these items will be automatically created, attached and set-up for you. SOURCE
Though slumtrimpet is obviously right, I can't see why you might need animations to create something like the video you shown. Why don't just use sequential instantiates with the help of coroutines or simple timers?
I'm testing a custom scene in ThreeJS.org/editor. I've started with the Camera example scene as a template. I want to add custom geometry to it. When I import my OBJ file, the mesh appears in the editor with no problem, but there doesn't seem to be a way to import its material along with it. Instead, I went and manually assigned the correct texture map to the imported object's Material component.
In the editor, the texture map showed up and looked great after I added it manually, but when I pressed Play (or when I Exported or Published the scene) the texture map for that object was gone again. I tried refreshing my window, and all changes I made to the material component were lost.
There must be something simple I've overlooked. Can anyone help?
The OBJ format doesn't store material data; it uses a separate format, MTL, for that. Unfortunately, it seems that the Three.JS editor doesn't currently support MTL files.