GithubHelp home page GithubHelp logo

brentongunning / voodoo.js Goto Github PK

View Code? Open in Web Editor NEW
282.0 24.0 27.0 18.8 MB

Javascript framework for mixing 2D and 3D

Home Page: https://brentongunning.github.io/voodoo.js

License: MIT License

Shell 1.37% JavaScript 93.58% Batchfile 1.58% HTML 2.01% CSS 1.47%

voodoo.js's Issues

Create store for sharing objects between Models and Views

There should be a store, or cache, where the user can put loaded geometry and materials so they don't have to be reloaded each time an instance of the control is created.

this.view.store.add();
this.view.store.remove().
Same for model.

Store.add(object, opt_name, opt_organization);
Model.organization

Improve API for positioning 3D meshes relative to 2D HTML elements

The utility function findAbsolutePosition is not a great long-term solution for positioning 3D objects relative to 2D. The user is still forced to calculate bounding rectangles.

One idea:
-Model.attach(element)
-This begins to fire elementmove events whenever the element boundaries change. The object passed to the event contains the element's bounding rectangle, size and its centerpoint since that is a common way to position elements.
-This event would not fire every frame, unlike the user positioning with update today.

Thoughts
-Model.unattach() needed?
-Is this fundamental enough to be part of the contructor, so that if the user passes and object with element in it to the constructor we automatically attach?

Needs more thinking.

Support dispatching custom events

Developer should be able to fire their own events that the user can listen to by using the same 'on' interface that voodoo fires events over. This can be useful for say a toggle button where the user might want to respond to the toggle up and toggle down events separately.

Support Mobile

Test on mobile firefox. The main page's github logo may be obsuring the menu. See if Voodoo works as expected. If there are any issues, fix them.

New event: destroy

When an object is destroyed, it should fire a destroy event that users may listen to.

Chrome 29 and Smooth Scrolling Enabled - Scrolling up is slow

On Win7, type about:flags in Chrome and enable smooth scrolling. Scroll down down with the mouse wheel is fast, but scrolling up is slower and feels off. The Canary build works better.

This may be a bug in the current Smooth Scroll implementation, and since smooth scroll is still experimental, going to keep this in the backlog until the next release of Chrome.

Missing License information

Would be great to have a LICENSE file with the license information and some info about the license the web page and the README.

Overflow Layer

For supporting overflow hidden and similar constructors. Basically, be able to block out regions. Draws the normal scene by default like the stencil view.

Zoom doesn't work for all objects

If an object isn't positioned AND scaled relative to a 2D div, then its pixels will not be correct when the user page zooms in and out.

Firefox click tests are unreliable

Noticed on FF23 they sometimes fail:

Total 54 tests (Passed: 51; Fails: 3; Errors: 0) (7476.00 ms)
Chrome 28.0.1500.95 Windows: Run 27 tests (Passed: 27; Fails: 0; Errors 0) (1777.00 ms)
Firefox 23.0 Windows: Run 27 tests (Passed: 24; Fails: 3; Errors 0) (7476.00 ms)
EventTests.testMouseEvents failed (615.00 ms): AssertError: expected 1 but was 0
EventTests.prototype.testMouseEvents@http://localhost:46576/test/C:/Users/brentgun/Documents/GitHub/voodoo/test/EventTests.js:110

EventTests.testStencilClicks failed (365.00 ms): AssertError: expected 1 but was 0
  EventTests.prototype.testStencilClicks@http://localhost:46576/test/C:/Users/brentgun/Documents/GitHub/voodoo/test/EventTests.js:162

EventTests.testMultipleTriggerIds failed (366.00 ms): AssertError: expected 1 but was 0
  EventTests.prototype.testMultipleTriggerIds@http://localhost:46576/test/C:/Users/brentgun/Documents/GitHub/voodoo/test/EventTests.js:223

Tests failed: Tests failed. See log for details.
[Error] Testing failed

Simpify sample 2

Sample 2 is too complicated for what it is designed to demo --- stencil views. The checkboxes at the top are fine, but instead of three cubbies we should just have one and it should be an inward beveled picture frame. It should also go deeper than the current cubbies so that toggling stencils is more obvious.

Support shadows

There are two types of shadowing:

  • Objects in the above layer casting onto the page. This is probably the most common.
  • Objects in both layers self-shadowing.

Cannot create a cube? Voodoo uses older ver of Three.Js which now uses BoxGeometry, not Cube...

Hello,

I am trying to use Voodoo for my application and I am not starting off very good.

I tried to use the Torus example as shown at the bottom of the main page and when I change it to a cube, it doesn't work. CubeGeometry doesn't show anything, which I found it has been changed to BoxGeometry. BoxGeometry is undefined, so it seems that 0.9.0 is using an older version of Three.js?

This library seems perfect for my needs, but from what I read on the blog it seems that there isn't that much drive for it, and it seems that support is affected by that.

Thanks!

EDIT: Netbeans installed Three.js and it was ver 58, so that was the issue. It works now.

API Change: Simplify using View.zMin/zMax

zMin and zMax were originally written with the idea of having multiple of 3D layers sandwiching 2D content, but the more I think about it, I'm not sure we want to support this. I still can't think of a good use case, so instead, I think we should focus on the 99.99% scenario and make a simple View.layer = Both|Above|Below. This is much more intuitive.

Hover is switched with color for normal 3d object (non-div) using mouse event example

Hello all,

I'm really enjoying this library so far, and I think it's the perfect one for my project, and I'm surprised it's not as big as it should be.

I was trying the traffic light example where hover would light up the light and clicking would throw an alert event.

It took me awhile to get rid of the divs, and display the objects normally(couldn't get the sphere to, but could get a cube to).

When looking at the cube, the color itself is red, and when hovering, it turns black, when in reality hover is set to red, so it's the opposite.

When I take my mouse off it still is black, and just sits there. Clicking does work, but that's it.

Here's my code.

<title>Voodoo Sample - Mouse Events</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script> <script src="js/voodoo.min.debug.js"></script> <style type="text/css"> #content { position:absolute; left:0px; top:300px; width:100%; } #redLight { width:150px; height:150px; } #yellowLight { width:150px; height:150px; } #greenLight { width:150px; height:150px; } </style>

Mouse Events

Description

This sample demonstrates how to respond to create triggers that respond to mouse events. Move your mouse and click the objects below.

</center>
<script> // ---------------------------------------------------------------------------- // HoverBallView // ---------------------------------------------------------------------------- var TrafficLightView = voodoo.View.extend({ load: function() { // Create a sphere var geometry = new THREE.BoxGeometry(100,100,100); var material = new THREE.MeshPhongMaterial(); var torus = new THREE.Mesh(geometry, material); torus.position.set(500, 500, 0); torus.rotation.y = Math.PI / 2; // Add the torus to the scene. this.scene is a property provided by View. this.scene.add(torus); this.material = material; this.torus = torus; // The torus will move at 200px per second. this.speed = 200; this.triggers.add(torus); // Show a pointer cursor whenever the mouse is over our mesh. this.triggers.cursor('pointer'); }, unload: function() { // TODO: Remove all objects you added earlier to the THREE.js scene. this.scene.remove(this.torus); this.triggers.remove(this.mesh); }, setColor: function(color, ambient,hover) { this.material.color.copy( voodoo.utility.convertCssColorToThreeJsColor(color)); this.material.ambient.copy( voodoo.utility.convertCssColorToThreeJsColor(ambient)); this.material.hover.copy( voodoo.utility.convertCssColorToThreeJsColor(hover)); }, // We call this from the model whenever the user hovers over this object. mouseover: function() { this.material.color.copy(this.model.hover); this.dirty(); }, // We call this from the model whenever the user's mouse leaves the object. mouseout: function() { this.material.color.copy(this.model.color); this.dirty(); } }); // ---------------------------------------------------------------------------- // HoverBall // ---------------------------------------------------------------------------- var TrafficLight = voodoo.Model.extend({ name: 'TrafficLight', viewType: TrafficLightView, initialize: function(options) { this.element = options.element; this.ambient = options.ambient; this.color = options.color; this.hover = options.hover; // Add event handlers for hovers. The 'view' is normally not accessable in // initialize, but we are just defining callbacks, so it is OK to // reference them. this.on('mouseover', function(event) { this.view.mouseover(); }); this.on('mouseout', function(event) { this.view.mouseout(); }); }, setUpViews: function() { // TODO: Perform any initialization of the views. this.view.setColor(this.color, this.ambient, this.hover); } }); // ---------------------------------------------------------------------------- // Setup // ---------------------------------------------------------------------------- var redLight = new TrafficLight({ ambient: 'rgb(100, 30, 30)', color: 'black', hover: 'darkred' }); // We can also call our event handlers from outside our models. redLight.on('click', function() { alert('Stop!'); }); yellowLight.on('click', function() { alert('Caution...'); }); greenLight.on('click', function() { alert('Go!'); }); </script>

It also seems that the lights with the div are dark red, yellow and green, and the hover makes it regular, while for some reason my cube is black (which is correct according to the value above), but doesn't seem to be utilizing the ambient color, which I noticed is an issue in my other example (still need to work on that one so I think that will one), but this one seems to just be broken, but it might be my fault too.

Thanks :).

Mouseup event should fire even when not over the same object

Right now the mouseup event only fires on an object when the mouse is over it, but this is problematic for say buttons that want to be notified regardless to animate back to their up state. Instead, mouseup should fire on the current object but also fire on the last object that had a mousedown. The model property of the event should be set to the new model though so the user can differentiate between these types of mouse events.

Simplify sample 3

Sample 3 is just a demo of mouse events, so there is no need to use the stencil view and complicate things. Three simple spheres that are clickable and change color is sufficient.

API change: Improve creating a custom engine

Somehow, creating the engine the way we do today isn't totally clean. First we have to create an options object. Then we have to set each option individually. Then we have to pass this object to the Engine and assign that engine to voodoo.engine. This can be simpler.

Fix seam between above and below layers when antialiased

There should be an antialias quality engine option, and when high quality is specified, we create a new seam layer that renders an unantialiased thin seam. This should only be used when the object is in both the above and below layers though.

Support tabindex

Like focus and blur, tabindex is a fundamental part of 2D pages and somehow Voodoo should work with it too.

Refactoring

  1. Private variables should ending in _

See Layer. This standard should be enforced across all the project since it is inconsistent right now.

  1. Merge /ThreeJs classes back into main classes since this library will use ThreeJs only from now on, and remove Renderer.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.