three.js , ThreeJS LOD clone()


ThreeJS LOD clone()

Question:

Tag: 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 yet display an instance of all level meshes at the nearest distance, and add an other instance of those mesh if it is the current one.

It may not be veeery clear so example : http://codepen.io/Astrak/pen/RPVjje

Did i miss something or is it an issue ?


Answer:

Until next revision it can be solved by removing or commenting

THREE.Object3D.prototype.clone.call( this, object ); 

in

THREE.LOD.prototype.clone

Related:


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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

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

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?

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

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

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

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

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

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

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

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

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