There are many points on the surface of the human body model. How can I give these points binding click event in three.js ? Can anyone tell me the idea？
There are no click events like in ordinary web applications. You need different approaches like raycasting to enabled some form of interaction. Try to use the following example as a starter template:
https://threejs.org/examples/#webgl_interactive_points
Related
I'm creating a webpage for a new beer brand for gamers.
So far, I've created a spinning beer can in Three js. I found a GLTF model, made a texture, added lighting and reflections - all the simple basics - using Drei and Fiber.
What I would love to achieve right now, is to use the beer can as navigation for the page. So if you mouse over the logo on the face of the can, the logo should change color to indicate you can click it, and if you click it, something happens (let's say a modal opens). You can then spin the can around and click different parts of it (some text, an icon, the barcode, etc) to get different content.
I'm not sure how I would achieve this or approach this. I've had a couple of different thoughts:
Map up clickable areas on the model somehow. This didn't seem possible.
Make all the different clickable parts separate objects in the model. This seems like a ton of work, and I'd have to spend a lot of time learning Blender. The can model is pretty simple (used a free one from sketchfab.com for now).
Map up html-elements onto the can using css3drenderer. But I didn't find a way to bend it onto the can well, and it didn't seem like I could use the model for that.
Use many textures with alphas on top of each other on the can and somehow look for transparency on click for each layer. Didn't find any way to do this.
Any ideas on what techniques to use to achieve this? I've done game dev in Unity, but I'm new to Three js and WebGL, so it's really hard to know where to start searching.
The common approach is to use raycasting to detect interaction with a model.
What you're really looking for is a hyperlink. Although you can't manually apply a hyperlink to three.js, you can use THREE.Raycaster() as a loophole.
Once you determine that the model was clicked on, you just do the following to redirect the user:
window.location.href = 'https://example.com/'
That should do it~
EDIT:
Here is an example, based on my reply to your comment:
if(intersects.length > 0){
if(intersects[0] == model.children[2]){ //Second child
window.location.href = 'https://example.com/'
}
}
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'm playing about with three.js and webGL with an attempt to get html objects overlaid on a webGL model.
I intend to use three.js object loaders to render a 3D model, where I can then allow users to overlay HTML DOM objects in 3D space via a custom UI.
I've mainly been using the various different examples in the three.js docs (https://threejs.org/examples/ and https://codepen.io/AdamEDGE/pen/RRjEwz).
In order to allow the user to move the overlaid HTML objects via the UI, I've added the transform controls (https://threejs.org/examples/misc_controls_transform.html).
Things seemed to be going relatively well up to this point, but now I see that the controls are not hoverable or clickable to move the element.
I suspect I'm either missing code or an issue with the camera not aligning correctly, but I'm very new to this so I'm guessing.
I have also experimented with Jerome Etienne's blending tutorials, but on testing that caused other issues and I think may not be worth the trouble for what I'm going for (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html).
I have created an example that shows the problem (click on an object and the controls should show).
Its a simple webGL torus with two HTML images overlaid and mapped to a Mesh so I can link the controls to the HTML elements which are on a different scene.
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
The controls show on all the correct places when clicked as expected and I can use the keyboard to change the transform type (again see https://threejs.org/examples/misc_controls_transform.html for how it should work).
As I can't click or hover, I can't hook up to the relevant events.
I'm brand new to this and I'm quite sure I'm missing something obvious, so any help is appreciated.
First please excuse my bad english writing and please note that I am a Javascript NOOB!
I am currently developing a website for a client where I am presenting different kind of "wood cut" in webgl but I am unable to get the desired look an feel...
My goal is to make the viewer look and react like what we can see at Sketchfab.
http://sketchfab.com/show/9f7e1e088f0943b697e809f224f8c76d
The rotation is limited to a certain angle and the model always stay in the right position... With Trackballcontrols the model rotate all the way and its a mess. I have tried to change the quaternion as follow:
from:
_this.object.up.applyQuaternion( quaternion );
to:
_this.object.up.applyQuaternion( new THREE.Vector4(0,0,0,1) );
but it behave weird when I reach a certain angle, the model become jumpy...
Then I tried with Orbitcontrols but it seems that there is no dynamicDamping because the controls are really "dry". I prefer a smoother effect...
1- So is there a way to use Orbitcontrols and get the dynamicDamping to work?
2- Is it possible to modify Trackballcontrols to get the desired result?
an example of my models are here:
http://www.boissilvac.ca/new/nosproduits/patron19
Thank you for your time
I am beginning to learn about OpenGL development, specifically using Mac OS X and the Cocoa and/or CGL API's, so I will use those classes as examples, but my question is more about design rather than a particular implementation. Here's the situation:
I have a 'scene' object, that can contain or reference the data to render itself, and responds to a 'render' message to draw itself, without any transformations.
I have an NSView or NSOpenGLView object that creates the openGLContext and pixelFormats, resizes the view, and updates the ModelView and Projection based on any transformations that are passed to it. The view object also contains a camera struct that is the basis for the openGL transformations.
I have a controller object that is an NSResponder object, and responds to user inputs.
I don't know if this is the best arrangement; 'model' in this case should be the scene, and I suppose classically the controller should mediate action between the model and view, but it seems odd for the view to send [[controller scene] render] every time it wants to draw the view.
And I am not sure if the best place for the 'camera' is in the view. Should I have the scene object also include the camera looking at it, and have it respond to UI input from the controller, which is currently passed to the view?
Or is this the wrong approach altogether? I am trying to shoehorn something into MVC that really isn't meant for it. I am curious as to what sort of design patterns people out there use with OpenGL.
I see it the way you described. View is designed to control the view point and projection, so keeping a camera reference in it is logical. Scene, on the other side, works as a pure data container for me, not touching the rendering methods, contrary to your model.