How can I draw a line from A (rectangle) to B (sphere) with threejs?
How can be followed the rotated sphere with mouse movement.
Here is what I want to do:
Regards
Try THREE.Shape
https://threejs.org/docs/index.html#api/extras/core/Shape
https://threejs.org/examples/webgl_geometry_shapes.html
or create a 3d model of the line and work with it
Related
I'm using ThreeJS, but this is a general math question.
My end goal is to position an object in my scene using 2D screen space coordinates; however, I want a specific z position in the perspective projection.
As an example, I have a sphere that I want to place towards the bottom left of the screen while having the sphere be 5 units away from the camera. If the camera were to move, the sphere would maintain its perceived size and position.
I can't use an orthographic camera because the sphere needs to be able to move around in the perspective projection. At some point the sphere will be undocked from the screen and interact with the scene using physics.
I'm sure the solution is somewhere in the camera inverse matrix, however, that is beyond my abilities at the current moment.
Any help is greatly appreciated.
Thanks!
Your post includes too many questions, which is out of scope for StackOverflow. But I’ll try to answer just the main one:
Create a plane Mesh using PlaneGeometry.
Rotate it to face the camera, place it 5 units away from the camera.
Add it as a child with camera.add(plane); so whenever the camera moves, the plane moves with it.
Use a Raycaster’s .setfromCamera(cords, cam)
then
.intersectObject(plane)
method to convert x, y screen cords into an x, y, z world position where it
intersects the plane. You can read about it in the docs.
Once it’s working, make the plane invisible with visible = false
You can see the raycaster working in this official example: https://threejs.org/examples/#webgl_geometry_terrain_raycast
I've been looking for a solution to this problem for a project I'm working on. I'd like to know if there is a way to click on a plane geometry and draw onto it, paint style, and have the texture update as you draw on it.
After this, is there a way to save that texture while in the browser now that you've edited it?
You could use raycasting to determine the UV texture position where the mouse intersection takes place. Raycaster.intersectObject returns an array of objects, one of its properties is .uv. You can see it in action in this demo.
You can use a 2D <canvas> as the source of the texture. Once you have the UVs from the intersection, you could use that position to draw on the canvas as demonstrated in this other demo
I'm trying NPR with three.js. I'm new with computer graphics. I want to extrude the lines segments and put textures on it. Is it possible to put texture after extruding the line segments using ExtrudeGeometry or should I first triangulate the lines, and then put texture on it?
Thanks in advance.
I have struggled for the past 3 weeks trying to figure this out. If anyone could help me I would appreciate it so much.
I'm developing a game similar to Geometry Wars in where I have a triangle in the middle of the screen which you can move around.
The problem is I need the triangle to rotate and face toward the direction of the mouse curser. I don't need to worry about the z-axis per-say as I always have the camera in a fixed position (z=500) and I am treating the scene as a "2D scene" - all the action occurs on the z=0 plane.
Calculating the angle between the triangle and the mouse is elementary:
targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)
where this is the mesh.
The problem is that the mouseCoords are in standed Dom window format whilst the position of the triangle is in Three.js format.
Q) How would I convert the mouse coords to represent the coords on the z=0 plane where the triangle is?
I have tryed so many ways including ray intersection but nothing works ;(
Thank you all for your help and thank you so much for an amazing framework!!!!
I don't actually see the problem. use the THREE.vector3 with the z coord in 0. then use something like triangle.rotate(THREE.vector3(targetAngle,0,0) or something
I suspect your intersection isn't working because of a CSS offset by your canvas within the DOM.
If you need the triangle to look at something specific, you should simply be able to use the "lookAt" method of the triangle.
To have it look at the camera for example:
triangleMesh.lookAt(camera.position);
My goal is to draw a semi-transparent curve. User moves cursor and I draw the curve under the cursor.
I've tried to use antialiased points to draw line, but I don't know how to make it transparent.
I can't use lines to draw the curve, because can't set both antialiasing and line width.
Should I use triangle strip to draw curve?
Yeah, if you want to do a nice job with this, you could tessellate your wide curve into a triangle strip. There are many papers written about stroke tessellation.
You can then texture your triangle strip with a square alpha texture that has a nice solid, anti-aliased circle in it -- this causes the wide line to appear anti-aliased! Check it out:
http://homepage.mac.com/arekkusu/bugs/invariance/TexAA.html
Very cool stuff.