Artificial intelligence functionality in three.js

Does Three.JS have a function or capability of AI( Artificial intelligence )? Specifically let's say a FPS game. I want enemies to look for me and try to kill me, is it possible in three.js? Do they have a functionality or a system of such?

Best How To :

Webgl

create buffer

bind buffer

allocate data

set up state

issue draw call

run GLSL shaders

three.js

create a 3d context using WebGL

create 3 dimensional objects

create a scene graph

create primitives like spheres, cubes, toruses

move objects around, rotate them scale them

test for intersections between rays, triangles, planes, spheres, etc.

create 'materials' (rather than shaders)

javascript

write algorithms

I want enemies to look for me and try to kill me

Yes, three.js is capable of doing this, you just have to write an algorithm using three's classes. Your enemies would be 3d objects, casting rays, intersecting with other objects, etc.

any webgl engine that might have it ? or is it just not a webgl thing

Unity probably has everything you can possibly think of. Unity is capable of outputting WebGL.

Three Js is the best and most powerfull WebGL 3d engine that has no equal on the market , and its missing out on such an ability

Three.js isn't exactly a 3d engine. Wikipedia says:

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js uses WebGL.

so if i need to just draw a car, or a spinning logo, i don't need them to come looking for me, or try to shoot me. I just need them to stay in one place, and rotate.

The renderTarget (or targets) used by EffectComposer is not being resized when the window is resized. In your onWindowResize callback, be sure to call both of the following methods: renderer.setSize( width, height ); composer.setSize( width, height ); three.js r.71...

I think your problem is in your animate function you call tween.update(). It should be TWEEN.update(). HERE is an example (using your delay and start). Click the button and the box will move to the sphere position....

The <canvas> element is treated by default as an inline object, similar to the <img> element. This makes it posibble to mix text and images by using float:left; or float:right; properties. I have added some text inside the parent div and a transparent red background in order to exhibit this...

update after further clarifications and chat The whole proint is that 3D transformatins are not commutative. This means that translating and then rotating is different that rotating and then translating (will produce different results). In some special cases these can coincide (e.g origins are at 0,0,0 and so on..), but...

You can set your objects geometry to center, so the center of the mesh will then be at position (0,0,0) and it wont "move away" while rotating. Do it like this: geometry.center(); var drawnObject = new THREE.Mesh( geometry, defaultMaterial ); scene.add( drawnObject ); Update Because you want to use picking...

As answered in this issue: https://github.com/leapmotion/leapjs-widgets/issues/4 #area is a custom method added by this project to particular THREE.js geometries. This error occurs when you try and turn a non-supported geometry in to a button. Supported geometries are PlaneGeometry and CircleGeometry. I have some code sitting around from MozVR which will...

It turns out that according to the vertex order when added to face, the camera is looking at the back side of the mesh. So, it can be solved by: var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, color: 0xff0000, side: THREE.BackSide })); ...

Content has nothing to do with Juqery Dialog , you can try it by adding any hardcoded contant, for events to work you need to bind these with buttons like, $( #dialog-message" ).dialog({ dialogClass: "no-close", buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } }...

In fact Autodesk already have a converter & wegbl viewer. Go to http://developer.autodesk.com and get a key for View & Data API. There is a server side REST API that allow you to upload a CAD file and convert to a JSON stream. You can hook to it and get...

Ok so i had to make a couple of (very simple) changes to the three.js and STLLoader files, and i got the idea from here cancel download jsonLoader & ImageUtils.loadTexture. Anyway, this is my own solution: In three.js I had to make the following change to THREE.XHRLoader: THREE.XHRLoader.prototype = {...

The easiest way is probably to load your textures into a 2d canvas to build your atlas. Let's assume we have a function that downloads 512 textures and we want to put them in a grid of 32 by 16 var width = 128; // just assuming this is the...

You don't need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event. So for example this will always work renderer.render( scene, camera...

The references to your textures in the .mtl directory should be with respect to where your html file is. So the .mtl should look like this: newmtl M_WhiteEditQuarter_M_WhiteEditQuarter map_Kd assets/M_WhiteEditQuarter_M_WhiteEditQuarter_D.dds map_Ks assets/M_WhiteEditQuarter_M_WhiteEditQuarter_S.dds bump assets/M_WhiteEditQuarter_M_WhiteEditQuarter_N.dds the newmtl is just a name so it does not have to prefixed with assets. The...

In your ShaderMaterial, you need to set scale: { type: 'f', value: window.innerHeight / 2 }, This is because of the following line in the WebGLRenderer method refreshUniformsParticle(): uniforms.scale.value = _canvas.height / 2.0; // TODO: Cache this. three.js r.71...

Adding a virtual object to an existing image requires matching the original camera parameters as closely as possible. In this case because the image is synthetic, ideally you would obtain those parameters from whoever generated it. Otherwise we can try to infer some of the parameters by taking measurements on...

Did you look in the JavaScript console for errors? Remote debugging is your friend. Also the iOS Simulator can be similarly debugged From your comments I'm going to guess if you had looked at the JavaScript console would tell you the error is either you ran out of memory, your...

Yes, this is a consequence of how EdgesHelper(and some of the other helpers) have been implemented. If you want to use EdgesHelper, you have to adhere to two rules: EdgesHelper must be added to the scene, directly. The scene can't have a transform applied (for example, be rotated). Consequently, you...

You need to create two instances of the material, using the same shader, and assign the appropriate texture/uniforms for each. edit Copying uniforms is a bit tricky. You lose the reference i think when you clone the material, so you might want to be careful how you manage them. ...

You can make the camera "look at" a world-space point by using the lookAt() method, like so: var point = new THREE.Vector3( x, y, z ); camera.lookAt( point ); Note: This method is limited, in that it will not work correctly if the camera is a child of another rotated...

how do you properly include an 'extension' library for a library you already have with TS and requirejs? Since you are calling THREE. here : new THREE.OrbitControls. You need to put import OrbitControls = require("three-orbitcontrols"); on THREE so: import OrbitControls = require("three-orbitcontrols"); THREE.OrbitControls = OrbitControls; Note: There isn't an...

When setting up your octree make sure undeferred is set to true. Like this - octree = new THREE.Octree( { undeferred: true, depthMax: Infinity, objectsThreshold: 8, overlapPct: 0.15 } ); That should do the trick!...

You can use one non-scrolling full window size canvas, and place holders DIVs for your wave forms. Then with 1 renderer have 1 scene per waveform and call renderer.setViewport and renderer.setScissor with the location of each div before rendering each scene. Effectively like this renderer.enableScissorTest( true ); scenes.forEach( function( scene...

The row lengths are aligned to multiples of 4, except for the last row. In your case this means each row needs 2 bytes of padding, for a total of 152 bytes (3 * 50 + 2) per row. 152 * (50 - 1) + 3 * 50 = 7598...

I solved this by different approach. I created an object3d which is moving in scene. Model and camera are child of this object. I'm rotating object 3d with camera and in the same time rotate model in opposite direction. When i rotate camera object looks keeping direction. when i want...

As suggested by 2pha, in this case what needed to happen was to call cancelAnimationFrame( id ); For anyone working with ThreeJs and Angular templates in the future, I simply ammended my "only-execute-once" function like this: if (typeof code_happened === 'undefined') { window.code_happened = true; render(); } else { function...

You are getting self-shadowing because the rays of the directional light are exactly parallel to some of the faces of your geometry. Move the directional light to a slightly different location. For example, directionalLight.position.set( 250, 500, 200 ); Usually, light.shadowBias is used to remedy self-shadowing problems, but it is not...

for ... in loops iterate the keys of an object so tile is actually the index not the object within the array, use a normal for loop or forEach. for (var i = 0; i < tiles.length; i++) tiles[i].material.color.setHex(i % 2 ? 0xffffff : 0); Read more about for ......

A few tips: You don't need to create new THREE.Texture() everytime you update the sphere texture. Create the texture once, and then update it using: material.map.needsUpdate = true; each time you draw something new in the canvas context. I supose, since you store the canvases in an array, you don't...

First of all you are loading the same texture several times. So assign it to a variable and then make the textures resolution-independent and render without blurriness. var border_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif'); border_tex.magFilter = THREE.NearestFilter; border_tex.minFilter = THREE.LinearMipMapLinearFilter; var top_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif'); top_tex.magFilter = THREE.NearestFilter; top_tex.minFilter = THREE.LinearMipMapLinearFilter; var...

In three.js, the Vector3 class can be interpreted as representing either a 3D point, or a 3D direction vector emanating from the origin. Be careful, though. Direction vectors, when used as arguments in three.js methods, are assumed to be normalized -- that is, of unit length. three.js has a method...

After trying several different approaches, I have something that seems to be working from all cases. In this approach I keep one main camera and one set of controls (this app only has one 'viewport'). The cameras I want to switch through are imported with THREE.ObjectLoader. Each has a unique...

The problem is in how you're iterating the matrix elements to print them. The .elements property returns the elements in column-major order (despite the constructor and .set() methods parameters being in row-major order!). So you should: function logMatrix(matrix) { var e = matrix.elements; var $output = $('#output'); $output.html(e[0] + '...

You can only return one value. The first call of return ends your function. You cannot solve this by wrapping your return statement in another function, either. Wrap the values you wish to return in an array, this allows you to access all of them in the calling function: var...

Both OrbitControls and TrackballControls have a property target which is both the center of rotation and the camera look-at position. You can set it like so: controls.target.set( x, y, z ); three.js r.71...