Problem :
I Created a mesh and cloned it. When I try to select one, both is selected. Meshes have different ids but material and geometry ids are the same.
I created a simple jsfiddle example: jsfiddle
How I clone :
var cloned = object.clone();
or
var cloned = new THREE.Mesh(object.geometry, object.material);
In both cases result is the same, on click one - selects both. I tried to change material id, doesn't help.
If I create new material, then everything is fine, I can select each object separately :
var cloned = new THREE.Mesh(object.geometry, new THREE.MeshLambertMaterial(....));
or
var cloned = new THREE.Mesh(object.geometry, object.material.clone());
My question. What is the difference in materials between object.clone().material and
object.material.clone()?
The same behavior is when I create many meshes with same material. On mouse down on one mesh will select all 10 meshes. Example:
var geo = new THREE.CubeGeometry(....)
var material = new THREE.MeshLambertMaterial(....)
for(var i = 0; i < 10; i++){
var mesh = new THREE.Mesh(geo, material);
}
When I try to select one, both is selected.
That is not true. Only one is being selected, but both are being highlighted.
Cloning a mesh creates a new mesh, but the new mesh shares the material (and geometry) with the original mesh.
So in your demo, you only have one instance of the material that both meshes share.
This is why, when you change the color of one mesh, the other changes, too.
Related
I'm working on an app where I visualize ATV trails in a 3d perspective (NAIP imagery draped over elevation data). I am using three.js for the rendering engine.
In the above image, the white line you see is just a THREE.Line instance, where I convert a trails gps coordinates into threejs coordinates. I'd like to add more of 3d perspective to this line. I tried implementing a THREE.TubeGeometry where the path was a THREE.CatmullRomCurve3 using the same Vector3 points as how I built the line you see in the image above. That did not produce a desirable result...
From the many, many THREE examples I have looked at, I really think an extruded geometry would achieve the look I am after... But I cant for the life of me figure out how to extrude a geometry for the line. Any suggestions/thoughts?
UPDATE 1:
Here is my desired look (same trail - no imagery). This image was produced in QGIS using the Q2Threejs plugin
UPDATE 2: Here is a code of how I have attempted to create a tubegeometry. Maybe I am messing something up in there...
// trailVectors are an array of Vector3 - same as ones used to create line
var trailCurve = new THREE.CatmullRomCurve3(trailVectors);
var tubeGeometry = new THREE.TubeGeometry(trailCurve,80,1,15,false);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
var wireframeMaterial = new THREE.LineBasicMaterial({color:0xffffff,lineWidth:2});
var wireframe = new THREE.Mesh(tubeGeometry,wireframeMaterial);
tubeMesh.add(wireframe);
scene.add(tubeMesh);
UPDATE 3
THREE.TubeGeometry(trailCurve,80,4,2,false) per mzartman request
I think that you should be able to achieve what you want with a TubeGeometry. I think the big thing is that your example (from the picture shown) has more than 2 radius segments. That gives it the tubular shape and makes it look sort of like a blob. If you set the radial segment count to 2 (as it's shown below) then I think it would look a lot better.
tubeGeometry = new THREE.TubeBufferGeometry(
[YOUR_PATH_HERE],
params.extrusionSegments, // <--- Edit this for higher resolution on the spline
3, // <--- This defines the height
2, // <--- This 2 keeps 2D (i.e. not a tube!!!!)
true );
var mesh = new THREE.Mesh( geometry, material );
var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
mesh.add( wireframe );
scene.add( mesh );
Update:
I think that you might do better with a material that shows some shadow like the MeshPhong. Also, to do the wireframe you want to add it as an option in the material initialization. Give it a show with the following:
var tubeGeometry = new THREE.TubeGeometry(curve,80,1,2,false);
var material = new THREE.MeshPhongMaterial({color:0x00ff00, wireframe: true});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
scene.add(tubeMesh);
I have a square shape .obj model and 2 textures. How do I apply one texture on it's top face and another on rest of faces?
There are a ton of ways to do what you're asking all with varying complexity depending on your needs. It looks like you want to apply two materials to your object and not two textures.
It looks this way because it seems you want the textures to be interchangeable so there's no way you're going to combine the images and keep resolution and OBJ & THREE.Material only support one set of uv attributes so you can't use a single material and multiple textures. So multiple materials it is...
Multiple materials
If you have two materials (2 THREE.Materials which correlate to 2 WebGL programs) then each face needs to know what material it's assigned to.
While the THREE.js multi material API has been in flux for quite a while and there are differences between THREE.Geometry and THREE.BufferGeometry, fortunately for you THREE.OBJLoader supports material groups out of the box. To get this into THREE.js, you want to apply multiple materials in your 3D editor to your object and then export the OBJ to get everything. Doing it by hand is a little harder and requires calling addGroup as shown in the docs/the link above.
In THREE.js you simply pass in all the materials as an array to your object demonstrated in this answer. I also updated your fiddle to do the same thing. Relevant code shown below
var loadingManager = new THREE.LoadingManager();
var ObjLoader = new THREE.OBJLoader(loadingManager);
var textureLoader = new THREE.TextureLoader(loadingManager);
//Material 1 with first texture
var material = new THREE.MeshLambertMaterial({map: textureLoader.load('https://dl.dropboxusercontent.com/s/nvnacip8fhlrvm4/BoxUV.png?dl=0')});
//Material 2 with second texture
var material2 = new THREE.MeshLambertMaterial({map:
textureLoader.load('https://i.imgur.com/311w7oZ.png')});
ObjLoader.load(
'https://dl.dropboxusercontent.com/s/hiazgei0rxeirr4/cabinet30.obj?dl=0',
function ( object ) {
var geo = object.children[0].geometry;
var mats = [material, material2];
//These are just some random groups to demonstrate multi material, you need to set these up so they actually work for your object, either in code or in your 3D editor
geo.addGroup(0,geo.getAttribute("position").count/2,0);
geo.addGroup(geo.getAttribute("position").count/2,
geo.getAttribute("position").count/2,1);
//Mesh with multiple materials for material parameter
obj = new THREE.Mesh(geo, mats);
obj.position.y = 3;
});
Im trying to make portals with ThreeJS. I found this page Mini-Portals That explains how to make portals with OpenGL. So i tried to replicate the portal view function in TJS. Now this is my result:
The left portal(right camera) is normal camera and right portal(left camera) is the view matrix gotten from tutorial. As you can see the portal view on the right is quite weird.
The main issue here is that the scaling of the images is all wrong and the angle im seeing the images in portal is wrong. Currently its flat and show where i pointed the camera, but what i want is portal where the scaling is correct(image on portal is same scale as the world itself) and what is see in portal depends on the angle where im watching.
What am i doing wrong and what should i do to fix it?
For people who want a great Portal system with Three.js :
https://github.com/markotaht/Portals
Its been a while. But i have found a way to do what i needed. The 4th parameter in not needed. Basically i send camera, and my 2 portal objects(Meshes) to my function. Instead of using the matrix multiplication way(does not work in ThreeJS because ThreeJS does some weird stuff with it) I split the matrices into pieces. Then manually calculate the new position and rotation and construct the new matrix from it. And i set this new matrix as my cameras worldMatrix. Voila a working portal. Next step is oblique view fusrum, because we want our nearplane to be the portal otherwise we can have some objects between the camera and portal.
And the rendering procedure itself uses stencil buffer to render the portals correctly. If anyone needs, this will help you: https://th0mas.nl/2013/05/19/rendering-recursive-portals-with-opengl/
function portal_view(camera, src_portal, dst_portal, kordaja) {
src_portal.updateMatrixWorld()
dst_portal.updateMatrixWorld()
camera.updateMatrixWorld()
var camerapos = new THREE.Vector3();
var camerarot = new THREE.Quaternion();
var camerascale = new THREE.Vector3();
camera.matrix.decompose(camerapos,camerarot,camerascale);
var srcpos = new THREE.Vector3();
var srcquat = new THREE.Quaternion();
var srcscale = new THREE.Vector3();
src_portal.matrix.decompose(srcpos, srcquat, srcscale);
var destquat = new THREE.Quaternion();
var destpos = new THREE.Vector3();
var destscale = new THREE.Vector3();
dst_portal.matrix.decompose(destpos,destquat,destscale);
var diff = camerapos.clone().sub(srcpos);
var ydiff = src_portal.rotation.y - dst_portal.rotation.y - Math.PI;
diff.applyAxisAngle(new THREE.Vector3(0,1,0),-ydiff);
var newcampos = diff.add(destpos);
var yrotvec = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0),-ydiff);
console.log(yrotvec)
srcquat = srcquat.multiply(destquat.inverse());
camerarot = camerarot.multiply(yrotvec);
var inverse_view_to_source = new THREE.Matrix4();
inverse_view_to_source.compose(newcampos,camerarot,camerascale);
return inverse_view_to_source;
}
NOTE:
I moved my answer to the answers so i can mark an answer.
I have a Box Mesh where I subtract another Box with Three.CSG to create a wall with a window.
After doing so, there are tiny holes in the Mesh alongside the cut. They are not visible alle the time, but show up when moving around.
How to close these holes?
This is part of the code how I am creating the Mesh:
var wallBsp = new ThreeBSP( myWallMesh );
var subMesh = new THREE.Mesh( mygeo );
var subBsp = new ThreeBSP( subMesh );
var subtract_bsp = wall_bsp.subtract( subBsp );
var result = subtract_bsp.toMesh();
result.material.shading = THREE.FlatShading;
result.geometry.computeVertexNormals();
Update
I have created a jsfiddle, but it is difficult to reproduce the error, I couldnt make it visible there: http://jsfiddle.net/L0rdzbej/23/
However, you can see the full application here.
Like #gaitat suggested, geometry.mergeVertices() does not look like it changes anything for me. Chandler Prall hinted at the source where precisionPoints, which is a variable inside the mergeVertices function, could solve this. Depending on the scale of the scene its value should be lower or negative, but I had no success so far.
I have a simple rectangular wall and I like to place multiple window holes on it. It always works great for the first hole, but as soon as I add additional holes the polygon becomes messed up. See the images below to see what I'm talking about.
How can I draw holes properly in Three.js?
The right hole is not drawn properly.
After increasing the height of the right hole the entire wall mesh becomes halfcut.
Here is a sample code that causes above problem:
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 1);
var windowHole = new THREE.Path();
windowHole.moveTo(0.14999999888241292, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.3448275862068965)
windowHole.lineTo(0.14999999888241292, 0.3448275862068965)
shape.holes.push(windowHole);
windowHole = new THREE.Path();
windowHole.moveTo(0.5999999955296517, 0.7758620689655171)
windowHole.lineTo(0.7499999944120646, 0.7758620689655171)
windowHole.lineTo(0.7499999944120646, 0.6034482758620688)
windowHole.lineTo(0.5999999955296517, 0.6034482758620688)
shape.holes.push(windowHole);
var mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), this.material);
root.add(mesh);
The above code results in a warning:
Warning, unable to triangulate polygon!
at public_html/libs/three.js:27785
It turned out that this was a bug that is now fixed in version 66dev.
The bug was reported and discussed here:
https://github.com/mrdoob/three.js/issues/3386
The fixed version that I'm using now is developer built version 66dev committed at Jan 27th, 2014 here:
https://github.com/mrdoob/three.js/tree/dev/build
I assume this fix will be merged with the main three.js soon, but until then you can use the link above.
Some code might help. if possible link your code in jsfiddle...
just you need to change the order of the path creation... refer the link... http://jsfiddle.net/ebeit303/BuNb2/
var shape = new THREE.Shape();
shape.moveTo(-5, -5);
shape.lineTo(-5, 5);
shape.lineTo(5, 5);
shape.lineTo(5, -5);
shape.lineTo(-5, -5);
var windowHole = new THREE.Path();
windowHole.moveTo(-2,-2);
windowHole.lineTo(0,-2);
windowHole.lineTo(0,0);
windowHole.lineTo(-2,0);
windowHole.lineTo(-2,-2);
shape.holes.push(windowHole);
windowHole1 = new THREE.Path();
windowHole1.moveTo(3,3);
windowHole1.lineTo(4,3);
windowHole1.lineTo(4,4);
windowHole1.lineTo(3,4);
windowHole1.lineTo(3,3);
shape.holes.push(windowHole1);
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial({color:0xffccff, side:2, overdraw:true} );
var mesh = new THREE.Mesh(geometry, material );
group.add(mesh);
Have a look on http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/. Whatever your codes are it will help you in doing it better. Substraction, addition, union, intersection everything is possible.