three.js , EdgesHelper loses its mesh when scene is rotated

EdgesHelper loses its mesh when scene is rotated


Tag: 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 ?

  <body onmousemove="bmousemove(event);">
    <script src="three.min.js"></script>
      var prevX = 0, prevY = 0;
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000);
      var renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);

      geometry = new THREE.BoxGeometry( 10, 20, 40, 1, 1, 1 );
      material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
      object = new THREE.Mesh( geometry, material );

      edges = new THREE.EdgesHelper( object, 0xffffff );

      camera.position.z = 100;

      scene.add( object );
      scene.add( edges );

      function render()
        renderer.render(scene, camera);

      function bmousemove(e)
        if (prevX == 0) 
          prevX = e.clientX;
          prevY = e.clientY;

        scene.rotation.y += (e.clientX - prevX) / 100;
        scene.rotation.x += (e.clientY - prevY) / 100;

        prevX = e.clientX;
        prevY = e.clientY;

I'm using version r71 under Windows 7


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:

  1. EdgesHelper must be added to the scene, directly.

  2. The scene can't have a transform applied (for example, be rotated).

Consequently, you will have to rotate the mesh, instead.

three.js r.71


Create a 2D texture from existing textures

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,...

Interactive Meshes in Three.js

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...

how to draw Highcharts in Three.js

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.

Resizing Window when using EffectComposer

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...

Want to `return` more than once

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...

Strange JavaScript Loop Happening with 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...

Three.js set face color

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,...

Orbit camera lookAt change

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)....

canceling loading an object into a scene in 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...

Stripped shadows on collada objects

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...

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

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...

3D Lines disappear sometimes

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),...

Understand Vectors use

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?

how to move an Object to other object position in 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...

THREEJS Shader Material overwritten

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...

EdgesHelper loses its mesh when scene is rotated

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...

three.js transparent sphere glitch

I have a transparent sphere and a spot light and that's about it. My sphere displays visual glitches, like striations. see: (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...

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

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...

Using library extensions with TypeScript + requirejs

I'm currently messing around with THREE.js and 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:...

How to make a skyBox with THREE.Js

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...

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

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...

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

I've working lately with JavaScript and Three.js with Leapmotion, and I started using the leap widgets (!) 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:...

Javascript Three.js point camera at fixed coordinate

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?

Javascript three.js smooth camera motion

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...

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

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...

ThreeJS LOD clone()

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...

Keyboard Controls With DeviceOrientationControls

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...

Three.js: Switching between Cameras and Controls

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...

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

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...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

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...

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

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...

Rotate the mergeometry object at its center in 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...

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

How to make all three corners ( created using shape.absarc) of the Three.js Shape go out and not in? See // 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);...

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

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...

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

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 :...

Export ThreeJS Geometry to JSON

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...

jQuery Dialog not working in 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) *...

Error setting Color

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 =...

Three js, block textures are blured

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...

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?

How much data does texImage2D in WebGL need?

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,...

Is it possible to enable unbounded number of renderers in 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...

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

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...

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

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.....

Load multiple OBJ-files together with multple 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...

How apply different materials to either sides of a plane in 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...

How to toggle preserveDrawingBuffer in 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...

How to increase perspective without stretching foreground in 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....

three.js merge geometry and octree selection

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:...

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

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 for reference. On iPhone 5, I am able to see the object, but it...