Search the Community

Showing results for tags 'threejs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 50 results

  1. tazowrhd

    3D 2048

    This ismy version of 3d 2048. Made with threejs and tweenjs. It is not perfect but I hope you will enjoy. link : http://tamazbagdavadze.github.io/3D-2048/ github : https://github.com/tamazbagdavadze/3D-2048
  2. Hi everyone! I could like to announce the Freeciv-web WebGL 3D engine competition to the developers with WebGL and Three.js skills in this forum. The Freeciv-web project is exploring ways to create a new 3D engine for the game, and would like suggestions about how to accomplish this goal. Would anyone here be interested in contributing a proptype for a WebGL engine which can render units, cities and terrain for a game-engine for Freeciv?
  3. Hello, In Babylon JS, only one camera is active at a time, howver you can construct multiple cameras in a scene. How can you allow the users to swtich cameras on a button click. For example, in this Three Js scene, you can hit 1 or 2 button to switch cameras, making an active camera false or true. https://stemkoski.github.io/Three.js/Multiple-Cameras.html The only example i have seen in Babylon JS is the Train example, however there is no explanation of how to switch the cameas on button click. Thanks, Moses
  4. Hi everyone. I've been toying around with using perlin and simplex noise to generate height values for a terrain mesh with threejs. My aim is to create something visually similar to Populous. So far I have something that looks like this. At the moment I have custom plane mesh subdivided horizontally and vertically by 10. Each of the mesh's vertices y value is determined by using a noise function. This all works fine enough it seems, though I am running into issues when trying to implement a scrolling effect, again similar to Populous. First I declare and init some variables. //globalvar mesh_width = 10, mesh_height = 10;var tile_width = 1;var xpos = 0, zpos = 0;var x = xpos, z = zpos;//initialize terrain data arrayvar terrain_data = new Array(mesh_height);for(var i = 0; i < terrain_data.length; i++){ terrain_data[i] = new Array(mesh_width);}noise.seed(Math.random());I then define the terrain_data object using the noise functions. for(var j = 0; j < 10; j++){ for(var i = 0; i < 10; i++){ var value = noise.simplex3(x, z, 0); value *= quality; //console.log(Math.abs(noise.simplex2(x, z))); terrain[i][j] = Math.abs(value); x += 1; }z += 1;}EDIT: This was a mis-post. I'm sorry. It can be deleted.
  5. Hey BJS devs and others who visit this form! Myself and my development partner (also bussiness partner) Louis Gurtowski will be attending GDC the week of March 2-6 in San Fran. We have left the 4th and 5th open to hopefully schedule a gathering of people(only one of these days - perhaps one evening?), with those of you whom often communicate on this forum, but would most likely benefit from an actual meeting of persona somewhere in or around the convention. I and my bussiness partner represent the control of develoment within our company, however, we're more interested in mostly a social event in exchange of ideas from all persons within a social gathering. We're talking one on one here - no presentations. I sincerely hope that you loosers who call themsrlves developers - (this is entirely a joke to hopefully grab a plank amout of interest in organizing such an event.) And if you missed the "Plank" joke, then you won't likely be attending due to the delta(s) within your own reality. But for those of you who would like to meet, I firmly believe it can greatly benefit our community, and much can come forth from this exchange. Any responses and ideas brought forth here on this thread are eagerly welcome - and if I receive few or none, then I'll assume what the level of dedication to this new framework is meeger at best! Just joking, this community and forum is the best. So if ANY of you out there are attending GDC this year, please post here - I hope to build a list. Also, we're welcoming any ideas as to where we might meet and when we might meet - as own our hotel is not so close to the convention center. OH - and wherever we meet - must serve alcohol, or let us bring our own - or it's all a mute point (in my opinion.) Let's return with some embarrssing pics - or at least some selfies with other developers. POST,POST,POST!!!! here v 2 weeks left! DBawel
  6. Hi everyone, I wanted to point everyone to two examples we just put online. They are part of the examples of a new free service named PlugPIN JS that we just launched. This service turns smartphones into remote controls for games, websites and apps. Here are the two links to the examples, both built with Threejs: 1. Simple Shooter http://surf.plugpin.com/apps/demo-walkthrough/ 2. Remote Controls with Gyro http://surf.plugpin.com/apps/demo-orientation/ The second example is fully documented under "onOrientationChange()" in the Docs. We hope you like it and that it sparks your creativity to make your games interactive by using your smartphone. If you have any questions concerning the examples or the JS Library, then please don't hesitate to contact us. We would love to hear what you think about it and how you would like to use it. Joost @ PlugPIN
  7. Ironbane is a 3D Action Rpg MMO built using HTML5 Play Now! http://play.ironbane.com/ We've just released a new version 0.4 pre-alpha. Our technology stack is using [MeteorJS](http://meteor.com/). This allows us to use the concept of reactivity and apply it in a gaming context, which is very cool but experimental to say the least. In addition we're using AngularJS on top of MeteorJS (http://angularjs.meteor.com/). This unique combination allows us to re-use a lot of components while still making good use of Meteor's concepts which are very helpful for us. We use THREE.js for the rendering engine, as well as a custom Component Entity System built around it. We're now fully utilising [Clara.io](http://clara.io/) as our level editor of choice. Sam has been creating the Tower of Doom map (https://clara.io/view/eab429cf-33e9-4ff0-9d47-ec9670da47cb) in this editor, and we're very happy so far with the results. Our game can directly pull the levels from Clara, read entities and put them in our game. This allows our level editors to place enemies and other entities anywhere they want without the developers having to manually export/import them to the game. Please check out our game and our forums at http://ironbane.com !
  8. Hello Html5 Game Devs, I am the developer of Creature, an exciting new cutting edge 2D animation tool! With Creature, you can add stunningly fluid animation to your digital content. At the core of Creature is a highly advanced skeletal animation, mesh deformation and dynamics system. Save Time + Cost with Automated Animation The main difference between Creature and other animation tools out there is its Directible Automated Animation Engine. What that means is the ability to procedurally generate, through an Automated but User Directible process, complex motion like Walk/Run Cycles, Tail Flopping, Wing Flapping, Cloth Dynamics and Flesh/Muscle response. Such types of motion are normally very tedious to animate manually. With Creature, such tasks can be done in a much more efficient manner, resulting in huge time and cost savings! Of course the point of Creature is not to take away from animation as an art but to add to it. Hence all automated procedures can be tweaked, directed and in many cases manually adjusted. Trailer Video: Website:http://creature.kestrelmoon.com/index.html ExamplesHere are some examples of Creature's Directible Automated Animation in action: Html5 DemosCreature exports to multiple formats and game engines, including popular Html5 Game Engines that use WebGL.Currently the engines supported are: PixiJS, BabylonJS and ThreeJS. I also have an alpha version supporting the new Cocos2dJS V4 runtime as well. Cocos2djs V4 demos:http://hyperandroid.github.io/Cocos2d-html5/src/test/engine/creature.html PixiJS demo:http://www.kestrelmoon.com/creature/dragon_pixijs.html Hair, Cloth Dynamics, Automated Walk Cycles The mage below has Hair and Cloth simulated using the Dynamics/Physics motors of Creature. The walk cycle is automatically generated using Walk Motors: Soft Body Dynamics, Chain Physics, Advanced Mesh Deformation The chameleon creature below has Soft Body Dynamics applied to its body so it has a "fleshy" reactionary response to its underlying skeletal motion. The tongue is simulated using Bone Physics Dynamics Motors and advanced Control Pt Warp motors that allow it to deform and extend/compress the tongue. The eyes are deformed using Control Pt Mesh Motors and the legs are automatically walking via Walk Motors: Animating Whole Images Creature can also work on whole complete images like this tiger. The subtle breathing/keep alive motion is generated via fancy Rotate Motors and Bend Bone Motors. There is also mesh deformation going on that deforms the eyes for blinking: I will be more than happy to answer any more questions you have as well as post any animation samples. In addition to that, do note that we are constantly updating and adding features to our HTML5/WebGL runtimes so any suggestions/tips will be appreciated. Cheers,Chong
  9. Hello people, i want to extract a model from threejs object to obj-format with textures (mtl file and some jpg's). How can I do it? Thank you for any help.
  10. I created this WebGL version of Casino Slots to test iOS8's newly added WebGL capabilities. There's still some issue with textures and audio but it works fine on Chrome/Safari (WebGL enabled) en Firefox on Desktop. (Haven't tested Android tablets). Enjoy = D Link: http://omba.nl/slots/
  11. Hello yall! I'm trying to make a dynamic displacementMap drawing (onmousemove) an html canvas. The experiment is based on http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap.html. The problem is that updating uniforms.tDisplacement.value with new THREE.Texture(canvas) won't work at all. I tried using THREE.ImageUtils.loadTexture( canvas.toDataUrl()) and it kinda works, but's too slow and messes up the canvas itself update. To exclude problems with the canvas, I tried using THREE.Texture(canvas) as map of a MeshBasicMaterial and it worked fine onmousemove. TIA TL;DR What's the best/fastest way to update a displacement map in a ThreeJS normalmap shader from a canvas?
  12. Hi everyone, we’ve been working hard on optimization for the king of the games: chess. It has been 100% revisited. We shared about our technical researches. We are talking about Low Poly Retopology and 3D normal maps: http://www.jocly.com/node/374 About the game, here is a presentation video: If you want to give it a try you can play here: http://www.jocly.com/#/play/classic-chess Includes basic jocly features: - play vs computer, friends or other jocly users - chat room - video chat (WebRTC) - recorded games for replay - embedding tools - development tools Feedback very welcome Thanks. jerome
  13. Hi all, I recently started playing around with threejs and am looking for suggestions on implementing terrain following. I have a simple demo here: http://rhuno.com/tests/webgl/height/ This works to a degree, but it isn't very smooth. The box just kind of pops to a new height. My current technique just combines triangles into quads, checks to see which quad the box/player is within and then sets the box's y position to the average y of the quad's vertices. The code is below. for(var j = 0, len = geometry.faces.length; j < len; j+=2){ face1 = geometry.faces[j]; face2 = geometry.faces[j+1]; if( pos.x >= verts[face1.a].x && pos.x <= verts[face2.b].x) { if(pos.z >= verts[face1.a].z && pos.z <= verts[face2.b].z) { var avgY = verts[face1.a].y + verts[face1.b].y + verts[face1.c].y; avgY += verts[face2.a].y + verts[face2.b].y + verts[face2.c].y; targetY = avgY * 0.166 + 4.5; } }}// increase y positionif(targetY != undefined && Math.abs(targetY - pos.y) > 0.5){ if(pos.y < targetY) pos.y += 0.5; else if(pos.y > targetY) pos.y -= 0.5;} I was just wondering if anyone had any tips or good resources for a better implementation and smoother results. Cheers.
  14. Hi, we just released a new chess variant called Courier Chess (12th century) We worked a lot on textures and pieces low poly generation, in the end the scene has less than 30.000 faces, which makes it very fluid. Feedbacks very welcome. Thanks, jerome Direct access to game: http://www.jocly.com/#/play/courier-chess More details in our post: http://www.jocly.com/node/378 Technologies: webgl, threejs, html5, angularJS Tools: Blender
  15. Hi there, we come back with a 2nd 3D game upgrade on Jocly platform: chess! We are very happy with the rendering, what do you think? You can play it here: http://www.jocly.com/jocly/hubdemo/chess If you don't have a compatible browser or graphic card for WebGL, here is a demo video: jerome
  16. yanipra

    Pixel shader

    Hi, All i'm newbie I have question about code <html><head> <title>FIRST THREE.JS TUTORIAL</title> <script id="vertexShader" type="x-shader/x-vertex"> uniform sampler2D baseTexture; varying vec2 vUv; void main() { vUv = uv; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition; } </script> <script id="fragmentShader" type="x-shader/x-vertex"> uniform sampler2D baseTexture; uniform float alpha; varying vec2 vUv; void main() { vec4 grass = texture2D( baseTexture, vUv ); grass.a = alpha; gl_FragColor = grass; } </script></head><body> <div id="treejs" style="position: absolute; left:0px; top:0px"></div> <script type="text/javascript" src="js/three2.js"></script> <script src="js/loaders/ColladaLoader.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/libs/stats.min.js"></script> <script type="text/javascript"> var container; var scene, camera, renderer, stats, controls, sceneCube; var geometry, material; var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; var clock = new THREE.Clock(); //-- variable uniforms //var customUniforms; init(); animate(); function init() { container = document.getElementById('treejs'); document.body.appendChild(container); scene = new THREE.Scene(); //-- camera camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0,100,400); camera.lookAt(scene.position); scene.add(camera); //-- light var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); light.lookAt(scene.position); scene.add(light); //-- axes var axes = new THREE.AxisHelper(1000); scene.add(axes); //-- grid var grid = new THREE.GridHelper(500,500); scene.add(grid); // Skybox sceneCube = new THREE.Scene(); var path = "resource/Cloudy-Sky/"; var format = '.jpg'; //-- bt buttom, ft front, up top, var urls = [ path + 'px' + format, //benar salah path + 'nx' + format, // benar path + 'py' + format, // path + 'ny' + format, //bawah benar path + 'pz' + format, //benar benar path + 'nz' + format // benar ]; var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() ); var shader = THREE.ShaderLib[ "cube" ]; shader.uniforms[ "tCube" ].value = textureCube; var material = new THREE.ShaderMaterial( { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms ,depthWrite: false, side: THREE.BackSide } ), meshSkybox = new THREE.Mesh( new THREE.CubeGeometry( 10000, 10000, 10000,1 ,1 ,1, null, true ), material ); scene.add( meshSkybox ); var jsonLoader = new THREE.JSONLoader(); var modelTexture = jsonLoader.load( "resource/heightmap/IceAge.js", addModelToScene ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container.appendChild( renderer.domElement ); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); } //-- model function function addModelToScene(geometry, material) { var texture1 = new THREE.ImageUtils.loadTexture("resource/images/grass-512.jpg"); texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping; this.customUniforms = { baseTexture : { type:"t", value: texture1}, alpha : { type:"f", value: 1.0} }; //this.customUniforms.texture.value.wrapS = this.customUniforms.texture.value.wrapT = THREE.RepeatWrapping; this.shMaterial = new THREE.ShaderMaterial ( { uniform: customUniforms, fragmentShader : document.getElementById('fragmentShader').textContent, vertexShader : document.getElementById('vertexShader').textContent, //side: THREE.DoubleSide } ); terrain = new THREE.Mesh(geometry, shMaterial); terrain.scale.set(128,128,128); scene.add(terrain); } function animate() { requestAnimationFrame(animate); render(); update(); } function update() { var delta = clock.getDelta(); time = clock.getElapsedTime() * 1000; stats.update(); controls.update(delta); } function render() { renderer.render(scene, camera); } </script></body></html>I have question i can't my texture on my object (black object) the result is: Please Help me, thank
  17. Hi, we just released Tafl Games, ancient medieval board games. We worked hard on graphics for the 3D webgl rendering and for performances. We managed to be very low poly, which is good for game play The board textures are dynamically painted depending on the number of cells or notations via canvas and then applied as texture to 3D board's materials (threejs), or painted to board canvas for 2D views. Canvas are also used for 2D pieces and clickers. To play, all the different boards and play links are available at the bottom of this post. Here is a short presentation video. As usual any feedback is very welcome jerome Examples of 2D/3D views (click on boards to play) Ardri 7x7 board From Scotland Tablut 9x9 board From Laponia
  18. Hi, we released a new game on Jocly platform: Penguin Soccer Here is a short presentation video: As discussed in a previous Chess 3D topic, we worked on RAM use optimisation. We tried to get very low poly meshes. We first designed high res penguins, then retopology to create low poly caracters with texture baking. In the end we get very light scene and a much smoother user experience. We can also now make our own sky environnement: the moon, stars and boreal are a 3D scene rendered to 6 images for a cube projection. Hope you'll like it! jerome
  19. Hi! We just released our latest webgl game / demo. It's called "Kid Disco" and is a music driven platformer. It uses Three.js (webgl) for rendering and chipmunkJS for the physics. It runs best in Chrome but should also work in latest FF, IE11 and Safari. Have fun! http://www.asmallgame.com/kiddisco
  20. Ironbane is an open source cooperative action MMO played straight from your browser, using 3D graphics and a retro graphics style. The game focuses on simple gameplay without leveling and combat using swords, axes, daggers, bows and magic staves. Our intention is to create a vast alive and immersive world. The main objective of the game is to defeat Ironbane, a dragon hiding in a castle waiting for a challenger. Future updates will include the ability to buy houses, participate in player arenas, do quests, make use of transports such as hot air balloons, boats and trains and many other things that we are still thinking of. Play the game at http://www.ironbane.com/ Looking for programmers Are you looking for a fun side project to work on? Ironbane runs in the browser and is on the cutting edge of web technology. It will be also great for your portfolio as we are an already mature project (started in Feb 2012). How's the code like? Ironbane runs on pure Javascript, on both client and server. Javascript is arguably an easy language to work with, and it allows you to program more productively with easy debugging and no need to recompile (atleast on the client). What am I allowed to work on? Anything you like! You can work on the game code, the 3D renderer, boss scripts, forum software, or others! You can work on whatever you want to work on, you basically have the power to change anything you like. All the source code is waiting for you on GitHub. With that said, you need to learn how to use Git if you haven't yet. It's an incredible powerful tool and you will need it at some point in your life anyway. What's Git? I'm scared! No need to be. Read this tutorial, it explains Git well and will get you up and running in no time. How do I contribute? By making pull requests on the repository you're working on! It's that simple. Make a pull request and one of the lead developers will check it out and give you feedback. If the code looks fine, it will be pushed live to Ironbane.com instantly. Start by reading the Getting started pages on the GitHub repository. If you need help, feel free to make an issue there or here on the forums. Also looking for a Project Manager Ironbane is a fun project to work on, but I have to focus on code and cannot at the same time manage a project, because it takes up too much of my time. If you have experience and motivation to manage a group of ~10 people as well as the general direction of the game, drop me a line. Contact E-mail : nikke@ironbane.com Skype: janssen.n You can also contact me or a team member using our forum. Screenshots
  21. Hi, we just released a completely new interface for our html5 board game platform: http://www.jocly.com (already more than 50 games) We used AngularJS and provided a responsive design to be able to use the same interface on the smallest phone to the biggest desktop screen. Most of the games are available in 3D (WebGL thanks to Threejs), video chat available depending on your device (WebRTC), and many other features. We are looking for feedback, all comments are very welcome. More details here: http://www.jocly.com/node/360 Thanks!
  22. FeatherUp is a super simple arcade game I made in less than 24 hours for the FiMaRu feather contest. You simply fly around trying to get feathers to keep your feather power up while grabbing coins on the way. http://psych.gs/public_html/playgame.php?gameId=FeatherUp PLAY ^
  23. Hey guys, i'm looking for some nice people who want to create a 3d tower defense strategy game. The focus should be on multiplayer (like the classical warcraft 3 td maps). The techstack is voxeljs (which is set up on threejs), vagrant for virtualization, npm & nodejs. I think i have a very clear game concept in mind and also wrote down some stuff in a private wiki. Also done first code lines (strategy game cam + some event listeners for the input). It's a very early state and i'm searching for some people. I'm in my working time i'm a backend developer in a gaming company and do this in my spare time. If you're interested to join my project then just write a small anser or if you don't want to do this in public then write a private message or mail me: dev@5on5.org Greetings, ThY
  24. this is my situation: I want to show twitter tweets like this: http://threejs.org/examples/css3d_periodictable.html This is what I have now: http://nielsvroman.be/twitter/root/index.php The boxes are tweets from the user: @BachelorGDM. What I would like now is that there is always one selected and that you can navigate through them with the arrow keys on the keyboard. This is my javascript code: // THE TWEETS var data = loadTweets()// FUNCTION SHOW THE TWEETSfunction ShowTweets(){// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROWvar table = [];var column = 1;var row = 1;// LOOP THROUGH DATA AND CREATE TABLE WITH TWEET DETAILS + PLACE $.each(data, function(i) { // DETAILS TWEET var idstring = data[i].id_str; var screenname = data[i].user.screen_name; var imageurl = data[i].user.profile_image_url; // 9 TWEETS NEXT TO EACH OTHER if(column % 9 == 0) { row++ column = 1; } var array = [imageurl, idstring, screenname, column, row ] column++; table.push(array);});// VARIABLES THREE JSvar camera, scene, renderer;var controls;var objects = [];var targets = { table: [], sphere: [], helix: [], grid: [] };init(); // CALL INIT FUNCTIONanimate(); // CALL ANIMATE FUNCTIONfunction init() { // INITIALIZE CAMERA camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 ); camera.position.z = 1800; // INITIALIZE SCENE scene = new THREE.Scene(); // LOOP THROUGH TABLE ARRAY (ARRAY WITH ARRAYS IN IT) for ( var i = 0; i < table.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var element = document.createElement( 'div' ); element.className = 'element'; element.id = item[1]; // ITEM IDSTRING element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; // BG COLOR + OPACITY FROM FRAME var number = document.createElement( 'div' ); number.className = 'number'; number.textContent = i + 1; // NUMBER IN THE RIGHT TOP element.appendChild( number ); var symbol = document.createElement( 'div' ); symbol.className = 'symbol'; var img = document.createElement('img'); img.src = item[0]; // IMAGE SOURCE IS LINK TO IMAGE symbol.appendChild(img); element.appendChild( symbol ); var details = document.createElement( 'div' ); details.className = 'details'; details.innerHTML = "" + '<br>' + item[2]; // SCREENNAME element.appendChild( details ); var object = new THREE.CSS3DObject( element ); // POSITION OBJECTS AGAINST EACH OTHER object.position.x = Math.random() * 4000 - 2000; object.position.y = Math.random() * 4000 - 2000; object.position.z = Math.random() * 4000 - 2000; // ADD OBJECTS TO SCENE scene.add(object); // ADD OBJECT TO OBJECTS ARRAY objects.push(object); } // TABLE VIEW for ( var i = 0; i < objects.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var object = new THREE.Object3D(); object.position.x = ( item[3] * 160 ) - 1540; // X-POSITION (COLUMN) object.position.y = - ( item[4] * 200 ) + 1100; // Y-POSITION (ROW) // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.table.push(object); // PUSH OBJECT IN TABLE ARRAY (IN TARGETS ARRAY) } // SPHERE VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = Math.acos( -1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var object = new THREE.Object3D(); object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi ); object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi ); object.position.z = 1000 * Math.cos( phi ); vector.copy( object.position ).multiplyScalar( 2 ); object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.sphere.push( object ); // PUSH OBJECT IN SPHERES ARRAY (IN TARGETS ARRAY) } // HELIX VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = i * 0.175 + Math.PI; var object = new THREE.Object3D(); object.position.x = 1100 * Math.sin( phi ); object.position.y = - ( i * 8 ) + 450; object.position.z = 1100 * Math.cos( phi ); vector.copy( object.position ); vector.x *= 2; vector.z *= 2; object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.helix.push( object ); // PUSH OBJECT IN HELIX ARRAY (IN TARGETS ARRAY) } // GRID VIEW for ( var i = 0; i < objects.length; i ++ ) { var object = new THREE.Object3D(); object.position.x = ( ( i % 5 ) * 400 ) - 800; object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800; object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000; // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.grid.push( object ); // PUSH OBJECT IN GRID ARRAY (IN TARGETS ARRAY) } renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.domElement.style.position = 'absolute'; // ADD RENDERER TO CONTAINER document.getElementById( 'container' ).appendChild( renderer.domElement ); // TRACKBALLCONTROLS => WHEN YOU HOLD DOWN MOUSECLICK controls = new THREE.TrackballControls( camera, renderer.domElement ); controls.rotateSpeed = 0.5; //controls.minDistance = 500; // MAX ZOOM IN => MIN DISTANCE controls.maxDistance = 2500; // MAX ZOOM OUT => MAX DISTANCE controls.zoomSpeed = 1; // STANDARD IS 1.2 controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ]; controls.addEventListener( 'change', render ); // RENDER ON CHANGE var button = document.getElementById( 'table' ); button.addEventListener( 'click', function ( event ) { transform( targets.table, 2000 ); }, false ); var button = document.getElementById( 'sphere' ); button.addEventListener( 'click', function ( event ) { transform( targets.sphere, 2000 ); }, false ); var button = document.getElementById( 'helix' ); button.addEventListener( 'click', function ( event ) { transform( targets.helix, 2000 ); }, false ); var button = document.getElementById( 'grid' ); button.addEventListener( 'click', function ( event ) { transform( targets.grid, 2000 ); }, false ); transform( targets.table, 5000 ); // window.addEventListener( 'resize', onWindowResize, false ); // WHEN PRESSED ON KEY window.addEventListener( 'keydown', keydown, false ); function keydown( event ) { };}function transform( targets, duration ) { TWEEN.removeAll(); for ( var i = 0; i < objects.length; i ++ ) { var object = objects[ i ]; var target = targets[ i ]; new TWEEN.Tween( object.position ) .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); new TWEEN.Tween( object.rotation ) .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); } new TWEEN.Tween( this ) .to( {}, duration * 2 ) .onUpdate( render ) .start();}function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );}function animate() { requestAnimationFrame( animate ); TWEEN.update(); controls.update();}// RENDER SCENE/CAMERAfunction render() { renderer.render( scene, camera );}}My tweets are initially in the variable data. I now have added this to my code: controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];window.addEventListener( 'keydown', keydown, false );function keydown( event ) {};But now how can I navigate through the tweets (boxes) with my arrows on the keyboard? I want to change the css of the selected box and open an overlay of the associated tweet. (You can see this when you click on a box on the link) I have no clue on how to start with this. Can somebody help me?
  25. Hi, we just released yesterday a full WebGL game: Yohoho 3D (it's actually a new skin of our Yohoho game) This was done on our jocly.com dev platform with pure javascript + threejs library for WebGL. This was a first try for us, the result is beyond our expectations Hope you'll like it: here it is Also available on the Hub for other player modes (turn based, live, ...) jerome (Not working on all devices, but many of them)