from cgtexture kindof site
jeromeetienne / threex Goto Github PK
View Code? Open in Web Editor NEWGame Extensions for three.js
Home Page: http://www.threejsgames.com/extensions/
License: MIT License
Game Extensions for three.js
Home Page: http://www.threejsgames.com/extensions/
License: MIT License
from cgtexture kindof site
Forget it, I reported on the wrong project. :-)
You are aware that your demo no longer works with R49 of Three.js?
The values of boundingbox are now somewhere else for example...
As in tquery
[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 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>
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
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 :)
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?
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.
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.
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?
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
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!
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 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.
Just move v1 in obsolete dir ?
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!
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:
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
somethign like that
mesh.on('click', function(){...}));
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.