I have a 3D scene and I would like to add a 2D plane to the scene where I could add buttons. I could do this with 3D plane, but I can't figure out how to make camera ignore the perspective of it. Any suggestions how can I accomplish this? Thanks!
If you want to do it quickly just use an absolute positioned div.
If you need more advanced GUI features, like marcel wrote, just use dat.gui. It is fairly responsive and many Three.js examples are using it (controls often on the upper right side of the screen).
Related
A friend just recommended looking into WebGL instead of css transitions. I have a set of polygons that make up a 2d board game.
Basically, the app moves the player space by space starting at the top of the "C" and we want to make first person view of moving to the next space in the sequence.
The points are plotted and I was thinking in terms of normalizing each shape, then rotating them into the proper direction, then adding perspective by transforming translateZ, and finally transitioning them along nthe interior angles from space to space while thinking of how to sequence those transitions between spaces.
Is there an easier way to move a WebGL camera through the spaces instead of pushing the polygons through transitions to simulate perspective? Perhaps a library that helps with this?
Thanks all!
WebGL doesn't have a camera. WebGL is a rasterization library. It draws pixels (or 4 value things) into arrays (the canvas, textures, renderbuffers). Cameras are something you implement yourself in JavaScript or you use a library like Three.js that has them implemented for you.
I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html
I am supposed to draw a transparent sphere which can be rotated by mouse dragging. I tried to start learning the basis of WebGl but I have not found any appropriate sources. Can anybody help me how to start learning WebGl and also how to draw 3D shapes such as Sphere or tetrahedron and how I can spin it in all dimensions ?
Thanks.
I'd recommend you use three.js but if you really want to learn WebGL start with http://webglfundamentals.org ;)
I would suggest using a framework like three.js that abstracts webGL's functionality, it makes doing things like this a breeze. Check out threejs.org and http://learningthreejs.com/
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!
I am working on a 3D model of a building using Three.JS and Collada loader.
I'm improving my system interactivity, but I have two main issues:
1- When I rotate the model in the scene, it rotates in 3 axis and it makes it upside down! I want to keep the model fixed in horizontal axis and only rotate it along Y axis (Up).
A live sample How I can rotate this cube only around Y Axis (Up)?
2-How I can have a smooth control on the system using mouse movements? For example in big models, it is not easy to zoom to a specific small object smoothly. How I can configure the camera to zoom, pan and rotate smoothly?
Thanks
You are not rotating the model. You are rotating the camera.
Use OrbitControls instead of TrackballControls -- it will keep the camera right-side-up.
OrbitControls should be smooth. If it is not, then there may be something wrong with your model. That can only be handled on a case-by-case basis.
You are using a version of the library that is a year old. It is wise to update to the current version.
three.js r.57.
Add the following in your script:
controls.getMouseProjectionOnBall2 = controls.getMouseProjectionOnBall;
controls.getMouseProjectionOnBall = function(x, y){
return controls.getMouseProjectionOnBall2.call(controls, x, controls.screen.height/2);
}
Regarding the jerky movements, I see you're doing everything possible already (often people omit requestAnimationFrame). I don't think there's anything you can do to reduce jerkiness other than reduce the complexity of your building.