Permalink
Browse files

Updates

  • Loading branch information...
Etienne
Etienne committed Jul 3, 2017
1 parent 95a5472 commit ffe783f962d7cebe45dfe3d03e890b70fbd0326c
Showing with 5,510 additions and 922 deletions.
  1. +175 −0 docs/Animations.md
  2. +37 −0 docs/Assets.md
  3. +209 −0 docs/Box.md
  4. +113 −0 docs/Camera.md
  5. +131 −0 docs/Circle.md
  6. +29 −0 docs/ColladaModel.md
  7. +178 −0 docs/Cone.md
  8. +64 −0 docs/Cursor.md
  9. +158 −0 docs/CurvedImage.md
  10. +199 −0 docs/Cylinder.md
  11. +166 −0 docs/Dodecahedron.md
  12. +64 −0 docs/Effects.md
  13. +225 −0 docs/Entity.md
  14. +28 −0 docs/GltfModel.md
  15. +111 −0 docs/HandControls.md
  16. +37 −0 docs/Icosahedron.md
  17. +60 −0 docs/Image.md
  18. +125 −0 docs/Light.md
  19. +42 −0 docs/ObjectModel.md
  20. +37 −0 docs/Octahedron.md
  21. +80 −0 docs/Particles.md
  22. +107 −0 docs/Physics.md
  23. +132 −0 docs/Plane.md
  24. +20 −0 docs/Raycaster.md
  25. +156 −0 docs/Ring.md
  26. +87 −0 docs/Scene.md
  27. +18 −0 docs/Screenshots.md
  28. +64 −0 docs/Sky.md
  29. +68 −0 docs/Sound.md
  30. +199 −0 docs/Sphere.md
  31. +37 −0 docs/Tetrahedron.md
  32. +175 −0 docs/Text.md
  33. +76 −0 docs/Torus.md
  34. +86 −0 docs/TorusKnot.md
  35. +308 −0 docs/Utils.md
  36. +74 −0 docs/Video.md
  37. +54 −0 docs/VideoSphere.md
  38. +90 −0 effects.md
  39. +37 −1 extras/templates/Project/app.js
  40. +1 −0 extras/templates/Project/index.html
  41. +19 −2 gulpfile.coffee
  42. +51 −22 hologram/Animation.coffee
  43. +17 −22 hologram/Assets.coffee
  44. +9 −17 hologram/BaseClass.coffee
  45. +10 −10 hologram/Box.coffee
  46. +12 −10 hologram/Camera.coffee
  47. +8 −7 hologram/Circle.coffee
  48. +5 −3 hologram/ColladaModel.coffee
  49. +162 −0 hologram/Color.coffee
  50. +11 −10 hologram/Cone.coffee
  51. +7 −3 hologram/Context.coffee
  52. +5 −4 hologram/Cursor.coffee
  53. +10 −9 hologram/CurvedImage.coffee
  54. +11 −10 hologram/Cylinder.coffee
  55. +9 −8 hologram/Dodecahedron.coffee
  56. +105 −82 hologram/Entity.coffee
  57. +9 −4 hologram/{Event.coffee → Events.coffee}
  58. +5 −3 hologram/GltfModel.coffee
  59. +4 −2 hologram/GradientSky.coffee
  60. +16 −26 hologram/HandControls.coffee
  61. +49 −14 hologram/Hologram.coffee
  62. +5 −4 hologram/Icosahedron.coffee
  63. +8 −7 hologram/Image.coffee
  64. +18 −22 hologram/Light.coffee
  65. +5 −3 hologram/ObjectModel.coffee
  66. +5 −4 hologram/Octahedron.coffee
  67. +8 −7 hologram/Plane.coffee
  68. +3 −1 hologram/Print.coffee
  69. +10 −9 hologram/Ring.coffee
  70. +94 −16 hologram/Scene.coffee
  71. +11 −19 hologram/Sky.coffee
  72. +11 −6 hologram/Sound.coffee
  73. +11 −10 hologram/Sphere.coffee
  74. +5 −4 hologram/Tetrahedron.coffee
  75. +15 −21 hologram/Text.coffee
  76. +8 −7 hologram/Torus.coffee
  77. +8 −7 hologram/TorusKnot.coffee
  78. +13 −10 hologram/Utils.coffee
  79. +86 −210 hologram/Values.coffee
  80. +9 −8 hologram/Video.coffee
  81. +11 −10 hologram/VideoSphere.coffee
  82. +233 −1 test/default/app.js
  83. +327 −267 vendors/aframe.js
  84. +3 −0 vendors/aframe_effects.js
  85. +1 −0 vendors/aframe_look_at.js
  86. +1 −0 vendors/aframe_mouse_cursor.js
  87. +2 −0 vendors/aframe_particles.js
  88. +8 −0 vendors/aframe_physics.js
@@ -0,0 +1,175 @@
## [Animations](#animations)
Animate entities is fairly simple, here is a first example:
myBox = new Box
color: Color.cyan
position: "5 0 0"
myBox.animate
rotation: "0 360 0"
time: 3
direction: Direction.reverse
then: ->
print "animation done"
Alternatively you can also use the Animation object which allow you to start then animation whenever you desire:
myBox = new Box
color: Color.cyan
position: "5 0 0"
myAnimation = new Animation
entity: myBox
rotation: "0 360 0"
time: 3
direction: Direction.reverse
then: ->
print "animation done"
myAnimation.start()
-------------------------------------------------------
#### [animate.time](#animate-time) *<float>*
Duration in seconds of the animation. Default is 1.
myCone = new Cone
color: Color.aquamarine
myCone.animate
position: "4 0 0"
time: 4
-------------------------------------------------------
#### [animate.delay](#animate-delay) *<float>*
Delay in seconds before starting the animation. Default is 0.
myLight = new Light
intensity: 1
myLight.animate
intensity: 3
time: 4
delay: 0.5
-------------------------------------------------------
#### [animate.direction](#animate-direction) *<string>*
The direction attribute defines which way to animate between the starting value and the final value.
When we define an alternating direction, the animation will go back and forth between the from and to values like a yo-yo. Alternating directions only take affect when we repeat the animation.
myCone = new Cone
color: Color.red
myCone.animate
position: "4 0 0"
time: 4
direction: reverse
##### Direction available:
*
Direction.alternate
On even-numbered cycles, animate from from to to. On odd-numbered cycles, animation from to to from
*
Direction.alternateReverse
On odd-numbered cycles, animate from from to to. On even-numbered cycles, animation from to to from
*
Direction.normal
Animate from from to to.
*
Direction.reverse
Animate from to to from.
-------------------------------------------------------
#### [animate.repeat](#animate-repeat) *<float>*
The repeat attribute defines how often the animation repeats. Default is 0.
myCone = new Cone
color: Color.green
myCone.animate
position: "4 0 0"
time: 4
repeat: 10
-------------------------------------------------------
#### [animate.curve](#animate-curve) *<string>*
Easing function of the animation. There are very many to choose from. Default is ease.
##### Curves available:
###### Basic effects
*
Curve.linear
*
Curve.ease
*
Curve.easeIn
*
Curve.easeOut
*
Curve.easeInOut
###### More effects
*
cubic
Curve.easeCubic, Curve.easeInCubic, Curve.easeOutCubic, Curve.easeInOutCubic.
*
quad
Curve.easeQuad, Curve.easeInQuad, Curve.easeOutQuad, Curve.easeInOutQuad.
*
quart
Curve.easeQuart, Curve.easeInQuart, Curve.easeOutQuart, Curve.easeInOutQuart.
*
quint
Curve.easeQuint, Curve.easeInQuint, Curve.easeOutQuint, Curve.easeInOutQuint.
*
sine
Curve.easeSine, Curve.easeInSine, Curve.easeOutSine, Curve.easeInOutSine.
*
expo
Curve.easeExpo, Curve.easeInExpo, Curve.easeOutExpo, Curve.easeInOutExpo.
*
circ
Curve.easeCirc, Curve.easeInCirc, Curve.easeOutCirc, Curve.easeInOutCirc.
*
elastic
Curve.easeElastic, Curve.easeInElastic, Curve.easeOutElastic, Curve.easeInOutElastic.
*
back
Curve.easeBack, Curve.easeInBack, Curve.easeOutBack, Curve.easeInOutBack.
*
bounce
Curve.easeBounce, Curve.easeInBounce, Curve.easeOutBounce, Curve.easeInOutBounce.
####[animate.fill](#animate-fill) *<string>*
The fill attribute defines the effect of animation when not actively in play. Think of fill as what values the animation sets on the entity before and/or after each animation cycle. Below are the possible values for fill and their effects. Default is forwards.
*
Fill.backwards
*
Fill.both
*
Fill.forwards
*
Fill.none
-------------------------------------------------------
#### [animate.then](#animate-then) *<function>*
Called when the animation finishes. In case of repeats, emitted when the repeat count reaches 0. Not emitted for indefinite repeats.
myCone = new Cone
color: Color.yellow
myCone.animate
position: "4 0 0"
time: 4
then: ->
print "I am done!"
@@ -0,0 +1,37 @@
## [Assets](#assets)
Hologram has an asset management system that allows you to place your assets in one place and to preload and cache assets for better performance.
Games and rich 3D experiences traditionally preload their assets, such as models or textures, before rendering their scenes. This makes sure that assets aren’t missing visually, and this is beneficial for performance to ensure scenes don’t try to fetch assets while rendering.
Assets include:
*
AssetItem
Miscellaneous assets such as 3D models and materials
*
AssetAudio
Sound files
*
AssetImage
Image textures
*
AssetVideo
Video textures
Note: The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.
myCat = AssetImage 'assets/cat.jpg'
mySong = AssetAudio 'assets/song.mp3'
myVideo = AssetVideo 'assets/coolMovie.mp4'
myObject = AssetItem 'assets/object.obj'
myTexture = AssetItem 'assets/object.mlt'
myVideo = AssetVideo 'assets/coolMovie.mp4'
### [Setting a Timeout](#asset-setting-a-timeout)
We can set a timeout that when reached, the scene will begin rendering and entities will begin initializing regardless of whether all the assets have loaded. The default timeout is 3 seconds. To set a different timeout, we just pass in the number of milliseconds to the timeout attribute:
If some assets are taking a long time to load, we may want to set an appropriate timeout such that the user isn’t waiting all day in case their network is slow.
Hologram.assets.timeout = 10000
Oops, something went wrong.

0 comments on commit ffe783f

Please sign in to comment.