• make the helper usable for canvas2D
  • good for completness
  • actually usefull for me because phong isnt well supported on mac

• a page where all the webgl demo are currated.
• each got a screenshot
• a short explicative text
• some css3 animations funky animations for show
• single html page should be ok
• if click goto the link of the demo

community

• at every new link, you tweet it
• it links to the single view of the demo
• if single view, the screenshot must have high resolution
  • so one small thumbnail of this shoot
• find a good name

Analysis of the project

• seems easy to do
• the page seems super close to threex one
• in fact both projects seems to be similar
  • the presentation page is the same, only the content changes
  • it is a list of link to other page
  • NOTE: why not push the tweet stuff from webgldemo to threexx

Bonjour!

I'm currently creating an RTS and was thinking on how to implement bounding box selection. What would be very cool to have is a function 'onWithinBoundingBox' on any object, which is triggered when the user selects an area on the screen and the object is within that area.

So: user selects an area (i.e. mouseDown, move, mouseUp) on the screen, all objects within that area get the 'onWithinBoundingBox' event triggered. When the user clicks somewhere else, the objects get the 'onOutisdeBoundingBox' event triggered.

Would that be hard to make?

• from http://www.glge.org/demos/md2demo/
• ask paul brunt, he is the author of the demo and a quake fan

I might overlook something very simple but I just can't get it done. I'm getting the error "Uncaught TypeError: Cannot read property 'projectionMatrixInverse' of null" in Three.js:67.

I'm not doing anyting very special, this is my code:

// Set variables
var container;
var camera, scene, renderer, info, projector;
var plane;
var meshes = {};
var mouse2d;

// Initialize (create objects and cameras)
init();

animate();

function init(){
    // Get the container with jQuery
    var container = document.getElementById('webgl');

    var width = container.offsetWidth;
    var height = container.offsetHeight;

    projector = new THREE.Projector();  

    // Create a camera
    camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000 );
    // Set camera position
    camera.position.z = -400;
    camera.position.x = 200;
    camera.position.y = 350;


    // Create a new scene
    scene = new THREE.Scene();

    // Create a mesh by creating a cube geometry with a basic red material
    geometry = new THREE.CubeGeometry(50, 50, 50);
    material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );

    var cube = new THREE.Mesh(geometry, material);
    meshes['cube1'] = cube;

    // Add a plane to the scene
    plane = new THREE.Mesh(
        new THREE.PlaneGeometry(400, 200, 10, 10),
        new THREE.MeshLambertMaterial( { color: 0xCCCCCC, shading: THREE.SmoothShading} ) 
    );
    plane.position.y = -50;
    plane.rotation.x = radianDegree(270);
    plane.overdraw = false;
    meshes['plane1'] = plane;

    // Add light to the scene
    var light = new THREE.SpotLight();
    light.position.set( 170, 330, -160 );

    // Add shadows to the scene
    light.castShadow = true;
    cube.castShadow = true;
    cube.receiveShadow = true;
    plane.receiveShadow = true;
    plane.castShadow = true;

    // Add all the objects, lights and camera to the scene
    scene.add(light);
    scene.add(cube);
    scene.add(plane);
    scene.add(camera);

    // Make the camera look at the scene
    camera.lookAt(scene.position);

    // Create the renderer
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.shadowCameraFov = 50;
    renderer.shadowMapWidth = 1024;
    renderer.shadowMapHeight = 1024;
    renderer.setSize(width, height);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    container.appendChild(renderer.domElement);
}

function animate(){
    // Render the 3D scene
    render();
    requestAnimationFrame(animate);
}

function render() {
    // Rotate the cube
    meshes['cube1'].rotation.y += 0.02;
    meshes['cube1'].addEventListener('click', function(object3d){
        alert('clicked!');
    });
    document.getElementById("info").innerHTML = "info";

    renderer.render( scene, camera );
}


function radianDegree(degree){
    return degree * (Math.PI/180);
}

Am I doing something weird or do I truly found a bug?

Forget it, I reported on the wrong project. :-)

• only declare it on the shaders and it appears

• currently it got its own copy

Hi, realization of events is really cool. Hope this will be finshed with supports of all possible DOM events.

I've created line of planes with images and try to receive current coordinates on click, but I've found that in the center of screen on click I receive wrong coordinates and target of event is object3d(plane) which place really far from center.

Looks like _onEvent method in dom library return wrong object3d.

Hello,

First thanks for your lib.

About the issue :
When no scroll is set no problem, all works fine and mouse event fired on correct object.
But when canvas container is on a page, and page is scrolling a bug appears : Mouse position does not calculate correctly and a bad or no object is selected :

original code : OK in case domElement == window
var mouseX = +(domEvent.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -(domEvent.clientY / window.innerHeight) * 2 + 1;

but KO if domElement != window
one possible solution for _onMouseEvent/_onMouseMove :

var mouseX = +((domEvent.clientX - this.domElement.offset().left + $(window).scrollLeft()) / this.domElement.width()) * 2 - 1;
var mouseY = -((domEvent.clientY - this.domElement.offset().top + $(window).scrollTop()) / this.domElement.height()) * 2 + 1;

Now ScrollLeft/Top are taken into consideration with domElement position.

PoP

An error is thrown when you try to create a new character:

var character = new THREEx.MinecraftChar();

Uncaught TypeError: Cannot set property 'x' of undefined threex.minecraft.js:174
mapUv threex.minecraft.js:174
THREEx.MinecraftChar threex.minecraft.js:72

• take his examples and convert it bit by bit to your sauce
• once done, switch to current version of the lib
• when this works, the stuff become very much like threex.glow
• so copy threex.glow api
• then improve it if possible

• from scrollfart.js
• add flame thrower and you got a flaming fart scrolll
• add nyan cat and you get farting flaming nyan cat
• add a riding minecraft riding the nyan cat
• another demo with both fighting with light sabers

The demo here http://jeromeetienne.github.com/threex/examples/threex.domevent/ works perfectly on Chrome, but does not work on Firefox. I used Firefox 10 on Windows 7.

The objects appear further down on the screen than on Chrome. Still, the mouse events are on the same place. Thus, if I hover above the right teapot, it will activate.

See this image for how the demo looks in Firefox: http://imgur.com/cYzkI

It might be a problem with either the Dom events code, the demo or with Three.js itself, but if it could be solved that would be great!

Decomposition of the effect

• the video http://www.youtube.com/watch?feature=player_detailpage&v=i7tpMcmdT68#t=27

[8:57pm] jetienne: http://www.youtube.com/watch?feature=player_detailpage&v=i7tpMcmdT68#t=27 - here is drunk effect in gta5 - i would like to reproduce it. any suggestion ? i see a strong motion blur. there is a displacement map with a perlin noise, there is a camera displacement too
[8:57pm] Nightmar1_: jetienne: did you try whiskey?
[8:58pm] jetienne: Nightmar1_: yeah but the gpu fried and produced lots of smoke 
[8:59pm] Nightmar1_: So you're saying its good for particle effects?
[9:02pm] jetienne: Nightmare_: exactly! just a bit too resource intensive when it comes to money consumption when you play the game 
[9:15pm] __doc__: jetienne: the motion blur you can do with persistence
[9:15pm] jetienne: __doc__: yeah i think i know how to do the effects, but which effects are there ? 
[9:15pm] __doc__: jetienne: the deformation you can do by rendering the scene, and then using a noise function to deform the texture lookup
[9:15pm] jetienne: __doc__: you think this is what they use ?
[9:16pm] __doc__: jetienne: looks like it
[9:16pm] jetienne: how to handle the borders in such a deformation map ?
[9:16pm] __doc__: jetienne: they also seem to superimpose the scene a second time slightly shifted
[9:16pm] __doc__: jetienne: you'll accentuate it out so that it doesn't distort towards the borders
[9:16pm] jetienne: when the fragment is close to the border, how to prevent i go fetch 'out of screen' ? using texture warp seems uncool no ?
[9:17pm] __doc__: jetienne: you can clamp to screen, and accentuate the lookup distance when you get close to the border
[9:17pm] jetienne: "you'll accentuate it out" i don't understand what you mean
[9:17pm] __doc__: jetienne: to mix it down
[9:18pm] jetienne: ah ok got it
[9:18pm] jetienne:  they also seem to superimpose the scene a second time slightly shifted <- oh good catch
[9:18pm] kpreid: you could render a bigger area to texture than the screen ...
[9:18pm] __doc__: they also seem to do something with the color
[9:19pm] jetienne: it is to simulate the eyes crossing when you are drunk
[9:19pm] __doc__: and I think they take the brightness up and add a bit of bloom-blur
[9:19pm] jetienne: kpreid: good point
[9:19pm] jetienne: yeah likely a bloom
[9:19pm] jetienne: i think the blur is from the motion blur itself
[9:20pm] jetienne: or is there a normal spacial blur
[9:20pm] jetienne: i think there is
[9:21pm] jetienne: excellent guys, with all that it will be great 

I find this odd..
The Renderstats on this http://hastebin.com/wuyuqapeka.xml are giving me these results:

WebGLRenderer
== Memory ==
Programs: 1
Geometries: 1
Textures: 0
== Render ==
Calls: 1
Vertices: 2904
Faces: 968
Points: 0

However this line:
console.log(geometry.vertices.length);

Counts only 507 Verticies in the Geometry.
Any idea?

• should i move everything into a src/ ?
• most likely but it would change the folder hierachie... so not backward compatible

• object3d is htmlelement
• me extending three.js is close jquery extending dom
• tQuery(geometry).scale(3)
• tQuery(obj).showboundingbox
• tQuery(obj).on/.off
• tquery(light)

• safari on ios and mac doesnt support Function.bind
• possible to add es5-shim dependancy
• but silly only for Function.bind

The Ray object in the new versions of Three.js its named Raycaster.
In the case of threex.domevent replacing Ray for Raycaster works again

• game timer.js
• GameTimer
• .timeEnd
• .timeBegin
• .update(delta, now)

• isocahedron and not a sphere
• cubecamerarender for live reflection
• flat shading
• very specular

Idea cheap cloud gaming for webgl:

on server side you got a browser web running the game

On this server you take regular screenshot .toDataUrl

You send them to the player device... mobile phone, tablette whatever.

Thus the player can see webgl rendering on any device.

The player use touch screen as inputs

They are then sent to the server which send them back to the browser.

So we got the whole loop. The browser receives inputs from the player.

And the player sees what is displayed in the browser.

this is actual cloud gaming! All that with a simple node.js server to write and some js code. Maybe a few days. Surely less than a week.

Performances are left as an exercice to the reader :)

• here is card in bootstrap http://getbootstrap.com/components/#thumbnails-custom-content

In threex.sparks.js line 36 vertices.push(new THREE.Vertex(position)); has to be changed into vertices.push(position); on order to work with the latest version of three.js

You are aware that your demo no longer works with R49 of Three.js?
The values of boundingbox are now somewhere else for example...

• integrate flame thrower
• do documentation

• make dat.gui to tune the gradients
• make a radial gradient at the point
• make the point wider - to get a light spot
• make the number of pan tunnable too

As in tquery

Hey, maintainer(s) of jeromeetienne/threex!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jeromeetienne/threex is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jeromeetienne/threex",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

from: Theo on the blog http://learningthreejs.com/blog/2012/01/17/dom-events-in-3d-space/#comment-427490242

With threex.domevent.js, it possible to obtain details of the event such as clientX and clientY - or should I add a separate event listener for this?

I am trying to manage click on a mesh (cube) to do some processing stuff.
var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);

    scene.add(cubeFor3D);
    //
    renderer.render(scene,camera);
    //
    animate();
         //Track the click on cube3d
    cubeFor3D.on('click', function(){

          // response to click...
          console.log('you have clicked on cube 2D');

 });

When running, i got this error on the web console:
TypeError: cubeFor3D.on is not a function

In the API documentation, it's shown to do like this:

mesh.on('click',..

But i guess i should replace mesh by my mesh real name. Seems i am going wrong. help please.

I am including the API JS in my file: <script src='threex.domevent.js'></script>

• ms2gr say it exists
• https://developer.mozilla.org/en/detecting_device_orientation

• all low cases
• all prefixed by threex.
• threex.fullscreen.js

• various versions are scatered in the various projects
• gather them here

• very small modules
• "threex2 - threex after what i learned with tQuery :)"
• dependancy may be handled by npm, ala voxel.js on disk
• dependancy may be handled by require.js on browser
• THREEx.querySelector.js is the sizzle
  • class/id/name
  • css selector
• THREEx.World
• THREEx.Loop

The MouseX and MouseY position is currently calculated with the complete browser window size. When you use a smaller canvas, threex.domevent intersection calculations are slightly off (depending on your canvas size compared to your window size).

This could be fixed using offsetTop / offsetLeft, but those are not very reliable cross-browser and with complicated layouts.

The obvious fix to this problem would be embedding the canvas in an iFrame (example: http://learningthreejs.com/blog/2012/01/17/dom-events-in-3d-space/), but that isn't a real solution in my opinion.

Maybe it's an idea to let the user pass mouse variables if he wants to (or give an option between different methods)?

I think it would be a good idea to document this problem since it is quite difficult to adress this problem if you've never worked on things like this before :) .

EDIT: You can see an example here: http://dev.jorickvanhees.com/webgl/onclick.html
The bigger your window gets, the bigger the offset is.

• examples are good as demo and as testers
• code more of it

If you have an object (skybox) with an object (tree) in front of it, clicking on the tree fires the "click" event on both objects. I believe this is normal Javascript behaviour, but without bubbling / "return false" / e.stopPropagation() behaviour it's difficult to stop both events from fireing. I'm not sure if this counts as a bug, or just "partial functionality"?

My actual use case:
A click on an object pops up a menu. A click anywhere else (ie. on skybox) clears the menu. Because both events were firing the menu was popping up and then immidiately being cleared. I avoided it by disabling the "clear" event for 0.1 seconds when the menu was popped up, but it's messy.

Possible fixes:

• Full bubbling behaviour (like JS)
• Check return value when iterating over handlers. If one returns false, stop. (At least in my case, the closer event always fired first).

Just move v1 in obsolete dir ?

• in another repo?

• three.line along a spline
• some particle going along this line
• perlin to position the controls points
• all that in sync with music

somethign like that

   mesh.on('click', function(){...}));

• it needs to modify the global class. not too clean
• so put that in another file, thus it isnt required.
• only syntax sugar

• what needs to be done
• how to document the project
• which code needs to be written
  • write minigame and put repetitive code in threex module
• support modern web practices
  • support for bower, require.js, yeoman
  • support them but don't depends on them
  • all optional
• all independant modules not a big framework

I have had some trouble using the KeyboardState object querying for the arrow keys targeting the Firefox browser. It seems that in Chrome my renderer is set to the size of the window and so there is no scrolling but for some reason the default behavior of the arrow keys causes the window to scroll slightly. This issue can be demonstrated by viewing the demo at the following address in Firefox and pressing the down arrow key.

http://cmg0030.zxq.net/threejs/acclDemo2

It is fixed by using my modified KeyboardState object where I disabled the defaultbehavior within the keyup and keydown events.

http://cmg0030.zxq.net/threejs/acclDemo3