Home : Forums : Authoring and Programming : Make a Rotatable 3D Product Boxshot with Three.js

Make a Rotatable 3D Product Boxshot with Three.js

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
12-Aug-11 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 292
From: Brighton, UK
This is a forum topic for discussing the article "Make a Rotatable 3D Product Boxshot with Three.js":

http://www.elated.com/articles/rotatable-3d-product-boxshot-threejs/

Learn how to use the Three.js JavaScript library to create a 3D rotatable product boxshot in the page. No Flash required!
21-Aug-11 00:15
DeleteDelete EditEdit
Crazyhunk Crazyhunk's avatar Rank: none
No stars yet
Posts: 9
From: Tx, USA
quite interesting, love the easy interface…

though I have a small question, I saw the box rotates when I move the mouse, can this be limited to just the a section of the screen or are we talking about the whole page.
23-Aug-11 22:50
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@Crazyhunk: Sure, you could grab the canvas element that the renderer uses with renderer.domElement, then attach the mousemove handler to the canvas element instead of the document. Then the box should only rotate when the mouse is moved inside the canvas element.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
13-Mar-12 12:11
DeleteDelete EditEdit
fred fred's avatar Rank: none
No stars yet
Posts: 1
Nice work there, but i found out the script is consuming too much gpu resources, you can check this easly with gpu-z.
To work around this issue, change one couple lines
// animate(); and inside animate function //requestAnimFrame( animate );
to call the script just put setInterval( animate, 1000 / 60 ); before mouse event, gpu resource will drop from 60% to 0% and when you move the object he goes max 10% -15%.

keep going, nice tutorial.
23-Mar-12 01:18
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@fred: Interesting - thanks for the suggestion!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated