FAQ Database Discussion Community


THREE.Object3D.add: object not an instance of THREE.Object3D

javascript,three.js
so i'm getting this error and I cant find the source of it. I believe it has to do with me importing and creating my 3d objects in my scene but i'm not sure what i'm doing wrong. here is the code: I call this function before I call init...

how to draw Highcharts in Three.js

javascript,three.js,html5-canvas
I am new to js, I want to draw 2d Highchart in Three.js on a face of the cube. I am able to draw a cube and post a image on that but however I am confused with highcharts.

three.js transparent sphere glitch

three.js
I have a transparent sphere and a spot light and that's about it. My sphere displays visual glitches, like striations. see: http://jsfiddle.net/blwoodley/tvcogqkg/3/ (Note the grid is not necessary to manifest the bug. I just put it in there to show that transparency is working otherwise fine). Any thoughts on how...

Artificial intelligence functionality in three.js

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?

Centering three.js renderer.domElement (canvas) inside a parent div

css,three.js
I'm having difficulty understanding how to 'style' the output of a threejs renderer within an html div. For instance here is a simple scene: jsFiddle html: <div id="myPlanet"></div> css: body { background : #000; padding : 50px; margin : 0; } #myPlanet { width : 400px; min-height: 400px; margin :...

THREEJS Shader Material overwritten

javascript,three.js,textures,webgl,shader
I have a shader material that works as expected. This shader has a texture attached. I want to create 2 meshes using this shader material, with a different texture for each mesh. Problem is that if I try to render my 2 meshes in the scene, the first object's material...

How to make the arc corners go out not in with a Three.js Shape

javascript,three.js,shapes
How to make all three corners ( created using shape.absarc) of the Three.js Shape go out and not in? See http://jsfiddle.net/theo/v7v4fu2v/ // Shape var radius = 10; var material = new THREE.MeshNormalMaterial(); pt1 = new THREE.Vector3(40, 50, 0); pt2 = new THREE.Vector3(-40, 0, 0); pt3 = new THREE.Vector3(30, -20, 0);...

Using library extensions with TypeScript + requirejs

three.js,requirejs,typescript
I'm currently messing around with THREE.js and socket.io to make a little game - I'm wanting to use the OrbitControls extension for THREE.js (i've used it before in a non-TS project) for camera controls. The problem is that the client can't seem to find it (it compiles fine): Uncaught TypeError:...

3D Lines disappear sometimes

javascript,d3.js,3d,three.js
I am building 3d line chart from data here is the code Demo the part of code that generate line is parentTransform = new THREE.Object3D(); var _color = d3.scale.category10(); for (var i = 5; i > 0; i--) { var material = new THREE.LineBasicMaterial({ // color: 0x0000ff,linewidth: 30 color: _color(i),...

How do I clear THREE.JS Scene

javascript,three.js
I am trying to find ways of clearing all the objects in a scene without destroying the scene itself. I know that naming the object is one way and then when we want to delete the object, we just "get" it by its name. However, I want to find a...

Export ThreeJS Geometry to JSON

three.js,xml3d
I need to export Three Geometry to JSON so I can used with xml3D. I am trying to find the THREE.GeometryExporter() but I can't. Has it been completely deprecated? It is mentioned here Once I have the Three JSON I should be able to use this converter to obtain the...

How to Load Obj file with its respective material

three.js
I am trying to load object with its material that I designated when I create the obj file. So far when I load the object, I only receive a black object. However, I wish to create a way to load the objects with its respective materials. Is there a way...

How to cast shadow to an object which is inside a sphere

javascript,three.js
I have a object which is inside a sphere. I want to use light on the object and the shadow should be displayed on the sphere. I have used SpotLight and checked but it didn't work. Suggest me how I can set lights and which type of light is best...

Why translating matrix on Z axis is not the same as changing position on the Z axis by same number?

math,matrix,3d,three.js
I have a mesh that has origin point at the bottom. I want to move it by -132 on Z axis. If I change the position of the Mesh it is on the correct position. But If I translate it on the Z axis by -132, the mesh is off...

TypeError: this.mesh.geometry.area is not a function

javascript,three.js,leap-motion
I've working lately with JavaScript and Three.js with Leapmotion, and I started using the leap widgets (http://blog.leapmotion.com/leapjs-widgets-new-library-3d-web-design/here!) library to add some cool buttons to my program. After many hours, I got this type error from one of the libraries. Is it something mine? I just can't figure it out... TypeError:...

Use alpha channel from texture as specular map?

three.js
Is there a way to get MeshPhongMaterial to use the alpha channel of the diffuse colour texture as the specular map rather than having to use a separate texture? I would think this would be quicker to load and more efficient to render (requiring 1 less texture unit.)

How to switch Three/js camera controls from First Person to Orbit and back

javascript,3d,three.js
You can switch from Three.js Orbit Controls to FirstPerson controls without a problem. But when you go from First Person to Orbit the display gets stuck in a 'mousedown' mode. What do you need to do to go back and forth between First Person and Orbit controls seamlessly? The jsBin...

EdgesHelper loses its mesh when scene is rotated

three.js
I've drawn a mesh with a edgeshelper. When I rotate the scene using the mouse, the edges seems to react twice as fast the mesh. The result is that the edges don't "fit" around the mesh anymore when the scene is rotated. What am I doing wrong ? <html> <body...

How to increase perspective without stretching foreground in three.js

javascript,three.js
I have a three.js scene with a textured floor plane that needs a very specific perspective to align with a static 2D overlay My problem is that the more I increase the camera FOV to get the perspective I need the more the foreground stretches and I don't want that....

Resizing Window when using EffectComposer

three.js,renderer
I found this fiddle a mounth ago and I implemented it succesfully. It works like a charm except a specific scenario. If I resize the window, from very small to large, it becomes really obvious that the camera Projection Matrix doesn't get updated. This happens both on the jsFiffle example...

Require.js not loading Three.js

javascript,three.js,requirejs
So I have some generated JavaScript (from TypeScript): define(["require", "exports", "three", "jquery", "./test"], function (require, exports, THREE, jQuery, Test) { var Main = (function () { function Main() { this.container = jQuery('#test'); this.scene = new THREE.Scene(); ... This ends up with an error in the browser (on the last line...

Three.js - toggle between OrbitControls and FirstPersonControls

javascript,jquery,three.js
I am trying to toggle back and forth between three.js OrbitControls and FirstPersonControls. Per Mr. Doob's comment on SO and DVPassos's example, I have tried to make my own button that switches between the two controls. My html has: <button id="controla" type="button" class="btn btn-default">1st</button> <button id="controlb" type="button" class="btn btn-default">3rd</button> <script...

ThreeJS place voxel on grid with selected size

javascript,canvas,three.js,voxel
I am using the voxel painter example from the ThreeJS git repo. I have changed grid size to 5x5. However doing this means the roll over mesh isn't fixed to the grid and instead goes over 4 half on different grid squares. Also i need to have possibility to change...

Atmosphere Scattering for Earth from space and on the ground

three.js,glsl,webgl
Please provide prompt how to make the atmosphere of the Earth so that it is visible from space and from the ground (as shown in the image) a model of the earth: Earth = new THREE.Mesh(new THREE.SphereGeometry(6700,32,32),ShaderMaterialEarth); model of the cosmos: cosmos= new THREE.Mesh(new THREE.SphereGeometry(50000,32,32),ShaderMaterialCosmos); and a light source: sun...

How can I render .mtl for object on iPhone 5 using ThreeJS?

javascript,ios,three.js,webgl,.obj
I am trying to load .obj files through ThreeJS and have it be cross compatible. I am using the OBJMTLLoader method. The object loads and renders fine for Firefox, Chrome, and IE on Windows; see falloutfan.com/eyebot for reference. On iPhone 5, I am able to see the object, but it...

using renderOrder in three.js

three.js,render,overlap,zbuffer
I want to have two overlapping objects in a scene but I want to define which object should be drawn first. I have a sample of the code here: http://jsfiddle.net/sg02e5sm/1/ I'm using renderOrder = 1 for the second object to make it appear always on top of the first object...

Animating JSON models without three.js

javascript,three.js,webgl
I know that we can load JSON models in WebGL, but I don't know how to animate them if we have a rigged model loaded. Is there any way of doing this without three.js?

Three.js - Creating shadows with MeshFaceMaterial

javascript,three.js
I have tried a few different lights now (Directional, Spot, Point), but none of them produce a nice shadow on MeshFaceMaterial objects. Instead, the entire MeshFaceMaterial object will become black. My Test Website (please view with a grain of salt, constantly being changed). How can I use lights to create...

how to catch the click event on a specific mesh in a group

javascript,three.js
I have a group of circle geometry elements which are positioned on the vertices of a icosahedron element. I want to do a click event on each individual circle element using jQuery. So how to implement jQuery click events on these elements.. Suggest me some good references for doing it.....

Three.js: Trouble with dynamic geometry and merging

three.js
I want to display a lot of cubes. Their position is calculated during runtime, one more per frame. Just doing scene.add(cube) each time works but is too slow. So I want to merge their geometries each time. But when I try to add the merged geometry to the scene, it...

Three js, block textures are blured

javascript,web,three.js
I'm trying to make a 3D block with the three.js library. I've done it. Now i wan't to put a texture on it. I did that and it's working : var textureHerbe = [ new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif')}), new...

Traverse is undefined and performance lagging THREE.js Clock? *although it works*

javascript,html5,three.js
It seems to be doing what it is supposed to be doing -- traversing the scene and updating the meshes -- however, it's not listing all my meshes in the scene -- although they are being rendered (bizarre). It's also giving me error messages saying it can't traverse the scene...

My .obj model is white even though I attached an .mtl file to it

three.js,.obj,dds-format
I'm working on three.js and I'm trying to import a .obj file with its corresponding mtl file. The textures the mtl file was referencing were .bmp so I tweaked the mtl file to point to all .dds files and converted all my assests to dds. Problem is that its just...

How to rotate a THREE.PlaneBufferGeometry with THREE.WaterShader and MirrorMesh

rotation,three.js,shader
In this example we have a THREE.PlaneBufferGeometry with WaterShader and Water Normals texture. If you try to delete the rotation at line 119, the plane rotates as expected but the Shader and the normals aren't working correct anymore but they are distorted. How can you rotate without distortion?Is it something...

how to move an Object to other object position in THREE.JS?

javascript,three.js
What i want is to move an object to the position of another object. what i get from the internet is use TWEEN library but the problem is that i am not being able to add tween in my code help would be appreciated :) <script src="js/three.min.js"></script> <script src="js/OrbitControls.js"></script> <script...

How to draw a line on the diameter of a sphere in ThreeJs?

javascript,three.js
Suppose I've got a sphere like this: var geometry = new THREE.SphereGeometry( 1, 32, 32 ); window.sphere = new THREE.Mesh( geometry, material ); scene.add( window.sphere ); How would I then draw a line around the diameter of a sphere? Preferably parallel to the x axis. The end goal here is...

combining several iterations of same object in different location using .add() or .merge()

merge,three.js,geometry,rendering,mesh
I am trying to make a coil with several small loops. I have a custom function to create a single helix for each loop, and at first I was calling that within a for loop several hundred times, but it was taking too long to render and slowed down the...

can I send an array of data as a vertex attribute?

three.js,glsl,webgl,shader
I have a PointCloud in which I am using to visualize some time-related data points. For each vertex in the PointCloud.Geometry, I'd like to assign an attribute which is an array of epoch times. These epoch times are ints, an example would be: epochTimes = [1432314839, 1432314840, 1432314841]; the custom...

Javascript 3D rotate independent object within other object

javascript,three.js
In my program, I have four Physijs.BoxMesh(...), and they are all added to an independent object. I want to rotate the four physics boxes, but once they are all added to the 5th object, they won't rotate. Is there any way to rotate the objects that are contained? EDIT :...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

three.js,webgl,vertex-shader
I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial. When I create a PointCloud with PointCloudMaterial and set the size property to 1, the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the...

Rotate the mergeometry object at its center in Three.js

javascript,three.js
I am struggling to find the way to rotate the object at its center. At the moment i am able to rotate the scene, but when i do the rotation, the object goes away from the user. I look into the some the already asked questions in the same line...

Load multiple OBJ-files together with multple textures

ajax,three.js,textures
Using the many examples on ThreeJS, I'm able to load multiple OBJ files into my scene. I'm also able to load multiple images as textures. However, the textures get assigned to the objects in 'order of appearance' and therefore, sometimes the wrong image gets assigned to the OBJ files. I...

Three.js: Switching between Cameras and Controls

javascript,three.js
I have a Three.js v72dev scene composed of objects imported through THREE.ObjectLoader. This works well. I am now importing cameras that are translated to Three.js cameras from my CAD package. I start to get issues when I move the camera with OrbitControls. With one camera, one does not notice the...

Three.js object3d.translateZ causes NaN in all position values

javascript,three.js
It seems that when I use translate[X|Y|Z] on my object, its position gets mangled and only contains NaN values. Three.js r70 The position is relative, the absolute is different: My code if (!this.following) return false; var mesh = this.get(); //One mesh this.mesh.lookAt(this.mesh.worldToLocal((new THREE.Vector3(0, 0, 0)).setFromMatrixPosition(this.following.whom.matrixWorld))); //this.following.whom is another mesh var...

How do I submit and use text with a button to upload objects?

javascript,text,three.js,submit
I'm trying to load obj files using three.js and webGL. Currently I can load one object by directly changing the code, but I want users to be able to submit their own .obj files. So far, this is the code that I have. I tried using various examples but I...

Strange JavaScript Loop Happening with Three.Js

javascript,jquery,angularjs,three.js
I am building a prototype SPA with Angular and Three.Js to learn both technologies. I have a few Angular templates that are selectable via a nav, and show different 3D elements rotating. The cube element is exhibiting strange behaviour; when you navigate to another tab and then navigate back, its...

Is it possible to enable unbounded number of renderers in THREE.js?

javascript,three.js
In order to avoid the XY problem, let me explain where I'm coming from. I would like to plot a large number of waveforms stacked on top of each other using the same time axis, using THREE.js. The waveforms are simply THREE.Line's and I am implementing zoom/pan/scaling of these waveforms...

Create a 2D texture from existing textures

three.js,textures,webgl,texture-atlas
I have an application where I load a series of medical images (jpg), create a texture object for each image and display those textures on 3D planes. The amount of images depends in the CT scanner's resolution but my prototype should work with up to 512. As an additional task,...

Why aren't shadows showing up?

javascript,three.js
I have a pretty standard scene in Three.js. There are a few objects, a ground plane, and a few directional lights, one of which casts a shadow. Most of my objects cast shadows without any problem. A few, for some reason, do not. All of the Mesh objects are embedded...

How do I make an object perpendicular to a face with Three.js?

javascript,3d,three.js
Relevant codepen: http://codepen.io/OpherV/pen/yNebep In my game I have a model of an alien tree. For each face of this tree I generate a pyramid (CylinderGeometry with 4 faces), and position it at the center of the face. Then I wish for this pyramid to be perpendicular to the face, so...

Loading Legacy vs. XML VTK Files with Three.js

xml,three.js,vtk,legacy
I don't quite understand the difference between the two types of VTK files. I know that there is a simple legacy format and an XML format, but how can you tell the difference between the two? This helps and I think it gives me a good understanding of the legacy...

Three.js - set different clear color when doing GPU ping-ponging

javascript,three.js
Trying to implement something using GPU ping-ponging in Three.js and I'm running into a weird issue where setting the clear color for the renderer seems to overwrite the output of the fragment shader responsible for rendering things out. If I set the clear color to white, pixels go white. If...

Three.js how to get PointCloud vertices with global positions

javascript,three.js,point-clouds
I have a PointCloud in my scene. The PointCloud is translated and rotated. Now I want to export all pointCloud vertices with gloabalWorld positions. PointCloud.geometry.__vertexArray returns all vertices at the local positions. In which way I can get the global positions? Thanks...

jQuery Dialog not working in three.js

javascript,jquery,three.js
jQuery dialog is not working while using in three.js. I'm trying to implement a click event on a Circle(using Circle Geometry) using jQuery. But it not supporting. Here is my code: function onDocumentMouseDown(event) { event.preventDefault(); var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) *...

Three.js set face color

javascript,three.js
I want to set the color of a face but failed. If I use wireframe, the result seems to be correct. But if not, the face seems not to be rendered. var geo = new THREE.Geometry(); geo.vertices.push(new THREE.Vector3(1, 1, 0)); geo.vertices.push(new THREE.Vector3(1, 0, 0)); geo.vertices.push(new THREE.Vector3(0, 0, 0)); geo.faces.push(new THREE.Face3(0,...

How much data does texImage2D in WebGL need?

javascript,three.js,webgl
I created a DataTexture in ThreeJS, which in turn will call texImage2D. var twidth = 50; var theight = 50; var tsize = twidth * theight; var tileData = new Uint8Array( tsize * 3); //fill it with some data tileDataTexture = new THREE.DataTexture(this.tileData, twidth, theight, THREE.RGBFormat); As you can see,...

Want to `return` more than once

javascript,three.js,return
I want to return multiple lines (one line each time the for-loop goes around), but it only returns the first line. I tried to write a function just to return the line, but I got errors with it because I don't know where to put it. What's a good way...

three.js transparent texture and shader material

javascript,three.js
I'm using a circle texture to render particles: The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below: The white particle is the nearest to the camera, the cyan (0x00ffff) is...

Javascript Three.js point camera at fixed coordinate

javascript,three.js
In Javascript THREE.js, given the coordinates of the camera and the coordinates of a point (x, y, z), how would I rotate the camera to look directly at the point?

How apply different materials to either sides of a plane in three.js?

three.js
I have created the simple triangle plane using materials = []; material1 = new THREE.MeshPhongMaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: THREE.FlatShading, side: THREE.FrontSide } ); material2 = new THREE.MeshPhongMaterial( { color: 0xf0f0ff, specular: 0xf0f0ff, shininess: -3, shading: THREE.FlatShading, side: THREE.BackSide } ); materials.push(material1); materials.push(material2); mat = new...

Find distance the mouse has moved along a vector in Three.js

javascript,three.js
I'm trying to find the distance that the mouse has traveled along a normal vector. The idea is to move a set of vertices within an object along the intersecting face's normal vector. Currently, I have an onmousedown event handler that finds the intersecting face, adjacent faces with the same...

WebGL vs CSS3D for large scatter plot of images

three.js,webgl
I am building a web application which will display a large number of image thumbnails as a 3D cloud and provide the ability to click on individual images to launch a large view. I have successfully done this in CSS3D using three.js by creating a THREE.CSS3DObject for each thumbnail and...

THREE.js lookAt - How to pan smoothly between old and new target positions?

javascript,three.js
Example JSfiddle I can get my cone to point at each target sphere in turn (red,green,yellow,blue) using the THREE.js "lookAt" function. // Initialisation c_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false); c_geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) ); c_material = new THREE.MeshNormalMaterial() myCone = new THREE.Mesh(c_geometry, c_material); scene.add(myCone);...

Interactive Meshes in Three.js

javascript,three.js,mesh,interactive
I new to javascript and three.js so this is probably a noob question. BTW, I'm working on the example interactive/cubes/tween and I'm trying to modify it to test something else. At the moment the MouseDown event gives the tween effect to the intersected geometry, here's the function: function onDocumentMouseDown( event...

Glitching drag&drop direction in WebGL

javascript,three.js
I am trying to implement camera movement in WebGL project by drag&drop. I've did it via calculating differences from previous position in the event, and then this value adding to current rotation level. Here is the piece of code which is doing the job: function animate() { // drag and...

Javascript three.js smooth camera motion

javascript,three.js
In javascript, I can use the document.addEventListener('keydown', function(event){...}); to add a key listener. However, when using three.js and moving the camera with the key, the camera moves once, delays, and then continues moving. This is because the computer delays key holding for a fixed amount of time. How would I...

How do I get the height of a cube in Three.js

three.js
I have the following code; // World var geometry = new THREE.BoxGeometry( 100, 200, 100 ); var material = new THREE.MeshLambertMaterial( { color: 'green' } ); var cube = new THREE.Mesh( geometry, material ); cube.position.y = (cube.height / 2); // this doesn't work scene.add( cube ); What is the correct...

click events with treex.domevents.js don't work

three.js
I've been googling for days now and still can't find a working solution for my problem. I just want to make a three.js object clickable. With threex.domevents.js it should be easy, but as it seems, not for me ;-) My code so far: <!DOCTYPE html> <html> <head> <script src="scripts/three.min.js"></script> <script...

Issue with threejs and shaders showing an sphere glow

three.js,shader
I am working on a 3d visualization. I need to show a world with its atmosphere and I based on an example that was with threejs r40 but mine is r71. When I try to add the atmosphere (kind of a glow to the sphere that represents the world) I...

Orbit camera lookAt change

javascript,camera,three.js
Is there any possibility to change the lookAt target of Orbit camera? I have it set for my 'static' camera, but when activating the orbit camera it always looks at (0,0,0)....

three.js merge geometry and octree selection

merge,three.js,geometry,selection,octree
I am using Three.js to show a number of custom geometry's in various positions and rotations. They are static and rarely change, but the user can add, delete or change the shape of each individual object. This has worked well using the code snippet below: var Mat=new THREE.MeshBasicMaterial( { color:...

Three r71 SubdivisionModifier not included

three.js
I cant find THREE.SubdivisionModifier in r71, r60 works fine. There are some changes or it is totaly removed? Is there any alternative to to this? http://client.kadrmasconcepts.com/blog_examples/html5-webgl-subdivision/...

Loaded OBJ in Three.js doesn't receive shadows even though the property is set to true

javascript,three.js,shadows,directional-light
I'm currently diving into Three.js and came across my first real issue when switching from native primitives to imported OBJ objects. I have a simple model of a dodecahedron that I UV-mapped in Cinema4D r15 and exported as OBJ file. When using this model over a DodecahedronGeometry, the geometry is...

Error setting Color

javascript,three.js
I'm new with three.js. Basically I want to make something like a chessboard. I got this: for( x=-30; x<=50;x=x+10){ for( y=-30; y<=20;y=y+10 ){ var TileGeometry = new THREE.PlaneGeometry(5,5); var TileMaterial = new THREE.MeshBasicMaterial(); var Tile = new THREE.Mesh(TileGeometry,TileMaterial); //tile.receiveShadow = true Tile.rotation.x=-0.5*Math.PI; Tile.position.x = x; Tile.position.y = 0; Tile.position.z =...

ThreeJS LOD clone()

three.js
In threejs, LOD objects created with clone() method show all levels of details at once. If i have two LODs, named LOD1 & LOD2, if LOD2 is a clone of the first and that both are updated in the render loop, then LOD1 will behave as expected. But LOD2 will...

Drawing an open arc with three.js

javascript,three.js
I am trying to draw an open arc with three.js using the code from an example in three.js docs. The problem with this code is that it draws a straight line from the end point of the arc back to its starting point. I wonder if there is a way...

Understand Vectors use

three.js
From my physics studies a vector is similar to an arrow, it has, in 3-dimensional space, 3 coordinates (x,y,z), a magnitude, a direction (cosines). In three.js you can define Vector3 just by 3 coordinates. Is in three.js a Vector3 object like a point in space?

Is JSON model format is better for THREE.js

three.js
I am using Three.js to create a simple game, i load about 100 low poly models in obj format but the performance is not smooth, all models size not more than 18 MB, if i use JSON format will it be faster although the size will be more than double?...

How to make a skyBox with THREE.Js

javascript,three.js,skybox
I have looked a a number of different examples of skyboxes in three.js, however I can't get any of them to work in my three.js project. Here is what I have so far, with a skybox (which doesn't work). Can someone help me make a skybox or help fix my...

Three.js - Convert mesh velocity to mesh rotation

javascript,vector,three.js
Suppose I have a three.js mesh, and a velocity vector3. The velocity is being altered elsewhere, and then added to the mesh.position every frame. What I want is for the mesh.rotation to correspond to the velocity, i.e, the mesh is an arrow that always points in the direction it's going...

Drag a loaded object with threejs?

three.js,draggable
I've been trying to get a loaded object to be draggable in threejs. The first block of code below (which is only a snippet) displays a cube and I can rotate the view, but not the cube itself. The second block of code creates a box that is draggable, but...

What does three.js's Matrix4.multiply() method do?

javascript,matrix,three.js,linear-algebra,matrix-multiplication
I'm learning three.js and am trying to multiply two translation matrices together to get a single matrix that describes both translations: | 1 0 0 -2 | | 1 0 0 3 | | 0 1 0 7 | * | 0 1 0 4 | | 0 0 1...

CannonJS floor. Make a ball stick to the ground

javascript,three.js,cannon.js
Noob Question: I'm trying to drop a ball to the floor and make it stick there or even roll over a plane. Right now it passes trough the plane. I'm not sure where I made a mistake or if I'm doing anything wrong. var world, timeStep=1/60, scene, renderer, camera, icosahedronBody,...

apply rotationmatrix to Three.Box3

three.js
Whats the proper way to apply a rotation from a Mesh to a THREE.Box3 Object? I saw that Box3 has an applyMatrix function so I tried to apply a Matrix from the Meshs rotation which i created with: var mat4 = new THREE.Matrix4().makeRotationFromEuler(obj3d.rotation) box3.applyMatrix4(mat4) but the rotation / position won't...

Convert autodesk .dwg and .dwf files to three.js json format

json,three.js,autodesk,dwg
I want to render 3D graphics files of autodesk (.dwg and .dwf) using three.js but three.js requires 3D data to be in json format. So, I need to convert these files to three.js readable json format. I tried searching on the internet but couldn't find any solution. Can anyone tell...

How to store loaded mesh?

javascript,three.js
Hi I have been trying to store objects which are loaded from an obj files. Basically I am trying create new mesh and store it inside the mesh variable so that later in the Javascript I can refer to that object and change its attribute. However, when I declared this...

Stripped shadows on collada objects

javascript,three.js,shadow,stripes,directional-light
I have a scene with two collada objects and a directional light. The first collada is pretty much a plane, and the second one is made of multiple boxes. It appears that when the scene is rendered, some "side" shadows are really stripped, although the shadows casted on ground are...

Create an equilateral triangle using three.js

javascript,three.js,triangle-generation
I am trying to create an equilateral triangle using three.js. What I am coming up with appears to be a bit too tall. I am defining my vertices like so: new THREE.Vector3(0, 0, 0), new THREE.Vector3(4, 0, 0), new THREE.Vector3(2, 4, 0) Here is a fiddle with what I have...

Three.js shatter/explode plane geometry

javascript,three.js
I'm trying to create a glass shattering effect in Three.js with Tween and plane geometry but am a bit lost. The mesh/geometry is not updating with the tween, if I call shatter() before the first render you can see that the tween is working, but only for one pass. After...

Updating a material's texture map with images rapidly (every 50ms or so) causes huge stuttering

javascript,three.js
Question: How should I update a sphere's material texture map with images (stored in a HTML5 canvas) very rapidly (50ms ~ 200ms interval) without the browser choking? I have a series of panoramic images to map onto a sphere. These images are updated every 50ms ~ 200ms. The code seems...

Rotate object around the world axis

javascript,rotation,three.js
I found several different supposedly working ways to rotate an object around the world axis but all of them kept rotating the object around it's own axis instead of rotating it around the world's. So, what's the proper way to rotate an object around the world's axis? If I wasn't...

Three JS - problems while rendering a scene v71 in some browsers

javascript,three.js
Using three.js v71, I'm trying to add a meshphong material and display it on-screen after adding material caps. When I try to render it on Chrome v42.0 (Linux) it works fine. But when I try to run it on Chrome v42.0, I get an error pointing to the library file...

Translucent lines inconsistently showing as opaque

javascript,three.js
I've got a bunch of curved translucent Lines stacked on top of each other inside a rotating container. The opacity set on the lines seems to only be working some of the time, tho. I can't actually figure out what's making it work in some instances but not others. Here's...

Keyboard Controls With DeviceOrientationControls

javascript,three.js,google-cardboard,virtual-reality
I am currently creating a VR web app using three.js. As the camera controls I am using the device orientation controls used here in the google cardboard three.js demo. What I need to do is add keyboard controls to this(e.g Up arrow to go forward etc). I've fiddled around with...

Multiple WebGL models on the same page

graphics,three.js,webgl
My research lab is working on a webpage that displays a long scrollable list of 3d models, about 50 or so. Our first idea was to do this with separate THREE.js WebGL contexts, but it seems this isn't advisable given the architecture of WebGL, and browsers seem to limit the...

How to get the inverse of a Matrix3 in three.js?

javascript,matrix,three.js,matrix-inverse
The three.js documentation states that Matrix3 has a .getInverse function. But it takes a Matrix4 as the its first parameter. So I tried it the naive way in r71: var m = new THREE.Matrix3(); console.log('Initial:', m.elements); m.set(10,8,3,15,7,2,10,6,1); console.log('Set :', m.elements); console.log('Inverse:', m.getInverse(m).elements); http://jsfiddle.net/as8g61nb/5/ (tested only in Chrome) But this gives...

Three js custom geometry - lighting does not work

javascript,3d,three.js
I have the following code that draws a diamond in Three.js: var material = new THREE.MeshPhongMaterial({color: 0x55B663, side:THREE.DoubleSide}); var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0, 1, 0)); geometry.vertices.push(new THREE.Vector3(0, -1, 0)); geometry.vertices.push(new THREE.Vector3(-1, 0, -1)); geometry.vertices.push(new THREE.Vector3(1, 0, -1)); geometry.vertices.push(new THREE.Vector3(1, 0, 1)); geometry.vertices.push(new THREE.Vector3(-1, 0, 1)); geometry.faces.push(new THREE.Face3(0, 4,...

canceling loading an object into a scene in THREE.js

javascript,angularjs,three.js
So I have a THREE.js scene in which I have to cancel uploading a file to a scene. In my page I can upload multiple possible files, but I'm trying to set it up so that you can only upload one at a time for viewing in the scene. I'm...

Three.js - VRControls integration - How to move in the scene?

three.js,oculus,vr,webvr
I use Three.js to render and move (my orbitControl changes camera.position) in a small scene. Now I have an oculus rift. So I added VRControls and VREffect. There is no problem to move the head. But I can no more move in the scene because VRControls override the camera parameters...

How to toggle preserveDrawingBuffer in three.js?

javascript,three.js
Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems: there is no method in renderer to dispose all the buffers, canvas goes black if I do renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true}); How do I...