So I just found Three.js and it looks like a pretty cool JS library. What I'm trying to do is take a 2d image and wrap it around an object in three.js and rotate it like a 3d image. I found a few jquery libraries that offer similar functionality such as SpriteSpin, but most of the discussions and resources I found seem outdated and three.js seems to beat all the jquery plugins performance wise.
So playing around with one of the examples on three.js website I manage to produce this here. As you can see it doesn't look great.
So I'm wondering if it would be possible to flatten out a 3d image into a 2d, like the one below and wrap it around a shape in three.js and then rotate that image.
Since most of the discussion I found on how to achieve similar functionality seemed outdated, I am open to any suggestions on how to do this using more current browser based technologies. Would it be best to use WebGl or canvas, or maybe css3 supports this type of 3d functionality. Do I need to use three.js, or is there a smaller library that supports this functionality? Basically whats the best way to achieve this without having to loop through a bunch of images like some of the jquery libraries do.
Related
I'm getting into web animations, WebGL, Canvas, ThreeJS, GSAP and all those fun tools. I'm investigating different websites and how they're able to achieve certain effects.
I am mind blown by these two sites: https://14islands.com/ & https://www.hellomonday.com/.
Their animations look simple(ish). Liquid effect on images. I know with ThreeJS filters or WebGL or other Canvas libraries you can achieve the effects. What I don't understand is that both of these sites have a full-sized <canvas> element fixed to the background. And render almost all the images on the site through the <canvas> rather than pure HTML elements.
This allows to have all images to have really dope effects. But what I don't understand is how can they sync the positions and sizes of the images with HTML DOM elements so perfectly?
This seems like a nightmare to code. Also wouldn't it be a huge performance burden to update every image on the canvas when the user scrolls or resizes the page?
I believe I'm missing something. Perhaps there's a library that handles most of this?
If there are any simple examples, I'd love to see them.
Thank you for your time :)
Welp turns out this can be done quite simply with ThreeJS. Perhaps there are ways as well but this seems easiest to me.
TL;DR: You can create a scene for a div, and you can do this multiple times with ThreeJS so that it renders a scene within the specified div.
Demo: https://threejs.org/examples/?q=multiple#webgl_multiple_elements
Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html
I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect
Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.
I have a question in regards to using canvas to build your website.
Example: hellomonday.com
I am looking to create a more interactive website with canvas, and the above example is extremely well done.
It seems they are using fabric.js, but I don't see any canvas element. Is there a trick I am missing? Vague question surely but I wasn't sure how to get this information after trying to research this for a few hours.
That is not using fabric.js, nor is it using the canvas element. All the transitions are being handled by GreenSock tweenMax (un-minify the main js file).
I am making a game and I want to animate my character(attacking, walking, etc) but I don't have an idea on how to do it. I know it is not for loop because if it is, the animation will play in an instant you won't be able to see it. I have downloaded a sample sprite sheet and I will test on it once I learn how to do it.
You can obtain sprites animation using CSS3's steps() function where supported. Or a plain javascript approach using timers (setTimeout, setInterval).
Here a simple examples of both: http://codepen.io/anon/pen/hCeuG
However for the JS part, it's better if you have a single game loop where you update your animation, that it's just an example. You can find a very deep explanation about javascript game loop here: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html
there are making JS based gaming libraries available that exists for the sole purpose of making games easier. you should be using one of them.
I have worked on some of them and I like CreateJS with extensive support of sounds and spritesheets.
in fact you can create spritesheets on fly using animations
You can use Free sprites or try to make it with Photoshop ( if you are pro ! ) or Sprite Maker ( for Basic users ! )
for 3D Models you can use
I was also in such situation.
CreateJS was very much helpful for me.
This library has avery good documentation on handling sprite-sheet and bitmap animation.
EaselJS has examples with source code to show how to use the sprite sheet in your game.
Another blog which was helpful for sprite sheet manipulation was by David Rousset: HTML5 Gaming: animating sprites in Canvas with EaselJS
I think these could be helpful for you
I've been searching for a way to have a JavaScript animation (preferably using jQuery) behave like a rotating 3D cube, similar to this script:
http://keith-wood.name/imageCube.html
What stops me from settling with Keith's solution is the possibility for a more smoother and better transition between the images. Is it possible to make a more realistic version using only JS?
-Staffan
i've ended up using jQuery.imageCube but previously I've considered :
http://www.kawa.net/works/js/animation/cube-e.html
it's pure JS (no JQuery dependency) - I was able to somehow better understand "how it's done" from it.
although I'm not sure if it ain't still "jerky" just like imageCube ... :)