Canvas 3d JS Library

where 3D is born!
  • rss
  • What is C3DL?
  • Download
  • Tutorials
    • Tutorial #1: Installing Canvas 3D Addon
    • Tutorial #2: A Scene and a Cube
    • Tutorial #3: Update Callback
    • Tutorial #4: Models 101
  • Development News
  • Demos
    • Typing Game V2.1
    • Typing Game V3 (0.3 Release)
    • Explorer
    • Flickr - Picking
    • Ricochet
    • FSOSS Pictures
    • Puzzler
  • Resources
  • Contact
  • About

Flickr/Picking demo Added

Chris Bishop | 5 August, 2008 | 11:32
It took me a little longer than I was anticipating but the flickr/picking demo is done.  It is available under the demo section of the website.  This demo grabs different sized images from Flickr and textures them onto some cubes.  The user can rotate the cube as well as zoom in on the cube.  For those that don’t know of Flickr, it is a photo management system.  It allows people to upload there personal images and they can be made public or private. I would have published earlier but I ran into some problems.  Apparently I misunderstood what the client mouse position was.  I thought I was getting the coordinates of the mouse on the element that generated the mouse callback.  What actually gets returned is the mouse position with regards to the client window.  I realized this problem when I was adding my demo to a webpage and I moved the actual location of the canvas on the page.  Now the mouse position on the screen didn’t match the mouse position over the canvas.  Further more if the page scrolls but the mouse stays still, the actual position of the mouse in the canvas has changed but the mouse position to the client has not. I spent a few hours researching this problem until I discovered a script by Peter-Paul Koch that finds the actual position of any object in a page relative to the page. That only helped while the canvas was on the screen and the page did not move.  Once the page scrolled or was resized then my mouse position no longer reflected its correct position within the canvas.  I then did some more research and found that the window has an attritube pageXoffset and pageYoffset which holds the amount a page was scrolled by or resized by.  Hallelujah!  My demo now works regardless of scrolling or resizing. On a side note: I noticed a problem with using Intervals in javascript.  The problem is the interval is not executing at the time set in the setInterval function.  This might have something to do with our update Interval.  The scene runs an update every 25 milliseconds.  I wanted an interval to run every 250 milliseconds to check my camera position while it was moving.  I decided to change it to 100 milliseconds and noticed that my interval was only getting called 5 times.  I reduced the interval to 25 milliseconds and still it only was getting called 5 times during 1 to 2 seconds.  I’ll have to research to find out about the limitations of using Interval.
Categories
c3dl development
Comments rss
Comments rss

« memcount.sh Deux demos »

Leave a comment

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Search

Demos

  • Explorer
  • Flickr - Picking
  • FSOSS Pictures
  • Puzzler
  • Ricochet
  • Typing Game V2.1
  • Typing Game V3 (0.3 Release)

C3DL Development News

Bounding Boxes on Collada Objects

I ran into a nasty bug that has left me scratching my head recently. It involved taking the work Patrick has done on picking, more specifically his bounding box code and integrating it with Collada objects. It seemed pretty straightforward when I first started working on it, but I have had little success. [...]

A hair away…

Alas, I have approached the summit. With my hands, I have created a Mac application, which runs, and has the customized chrome interface. This alone is an incredible feat for me, since I rarely create GUI-based programs, and I certainly haven’t developed them on a Mac before. The only problem is that the canvas element [...]

Tutorials

  • Tutorial #1: Installing Canvas 3D Addon
  • Tutorial #2: A Scene and a Cube
  • Tutorial #3: Update Callback
  • Tutorial #4: Models 101

Archives

C3DL Development News

Recent Comments

  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • Bounding Boxes on Collada Objects
  • A hair away…
  • Particle Systems
  • Welcome aboard
  • C3DL Namespace refactoring
  • Library Changes
  • Portable Canvas v0.2!
  • Namespaces and const
  • DAE Scenegraph
  • The Matrix Stack
  • That is absolutely a... - Cathy
  • I'm not so certain t... - Cathy Leung
  • For name spaces, my... - Jeremy Giberson
  • Great! Really really... - Edson Mattos
  • Beautiful!... - Funtomas
  • Was no need to conta... - Andrew Smith
  • Andrew, have you con... - Funtomas
  • Thanks for posting t... - Andrew Smith
  • Vlad was in town and... - Cathy Leung
  • the upside down issu... - Cathy Leung



Canvas 3d JS Library

©2007- 2008 Canvas 3d JS Library

Disclaimer: This website is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
The Canvas 3d JS Library and Demos found on this website are licenced under the MIT License

Creative Commons License