Three.js Workshop 2 - Peter Todd / Concept idea

Research Question
-------------------

The Impact of Storytelling on the User Experience

The Study of Interactive Microstories and the effect on User Engagement

"The Study of Interactive Microstories and effect on the User Experience"

---

Look at Chris Crawford

What do I want to gain?
Framework,

Microstory Navigation System

---

Greenwich Stories
> Local History Group

---

CONTENT?
stories
maps
historical stories
recent photos
scans of newspapers

50 word Pitch to GHC

What is the Need? - Talk to Greenwich Heritage Centre.
open Tue - Sat
info@greenwichheritage.org

http://www.greenwichheritage.org/
Local History Group

Stories through voice?

What is covered?
What is not covered?

Community

---

Theory:
Microstories
User Experience - one type
Framework

Practice:
Stories
Interactive
Community

---

The Concept/Prototype
Story content

What is it?
An interactive touchscreen table, that allows a visitor to explore stories about the area and community of North Greenwich.

What stories?
Recorded audio sample
Recorded video sample
Recorded transcript

How are the stories communicated?
- Through audio recordings of interviews.
- Through 3D map of the area?
- Through 3D objects, with associated microstories. (100 words)
-

---

What do I want to achieve with Three.js?
Sound player, Play/Stop controls, wav file or mp3 file
3D map
3D object - how is it navigated?

---

Greenwich Historical Society
http://www.ghsoc.co.uk/home.php
contact:

Greenwich Heritage Centre
http://www.greenwichheritage.org/

Greenwich Heritage Centre
Artillery Square
Royal Arsenal
Woolwich SE18 4DX
020 8854 2452

info@greenwichheritage.org

---

How do I load a new image into Three.js ?

tQuery notes from:
http://learningthreejs.com/blog/2012/02/27/linkify-tquery-extension/

Dom Events in 3D Space

domEvents have been ported to tQuery. It is an important part because jQuery developpers use this a lot, thru .on()/.off().

1 2 3

tQuery('cube').on('mouseover', function(event){ console.log("somebody put the mouse over a cube"); });

The supported events are click obviously, dblclick, mouseup, mousedown , mouseover and mouseout. It has been improved to better match actual dom events. The callback now receives a event object. It contains .type and .target as described in dom specification.

1 2 3 4 5

tQuery('.myClass').on('click', function(event){ console.log("An event of type", event.type, "has been trigger on ", event.target); // If you wish to stop propagation, just do event.stopPropagation(); });

---

WebGL Draggable 3D cubes
http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html

tQuery
http://jeromeetienne.github.com/tquery/

tQuery example
http://jeromeetienne.github.com/tquery/www/live/editor/

---

tQuery Object
createSphere
createTorus
createCube

---