In Object3D contains a mesh
Object3D has an arbitrary scaling
Mesh has an arbitrary rotation. So my mesh is scaled relative to world coordinates.
But when I detach my mesh in the scene (for example, with the aid of THREE.SceneUtils.detach (mesh, obj3d, scene) I get an incorrect result, the mesh is scaled only locally.
I tried to change the geometry of the mesh, but still get an incorrect result:
http://jsfiddle.net/Ni55aN/VsWb9/3426/
var euler = new THREE.Euler(-mesh.rotation.x,-mesh.rotation.y,-mesh.rotation.z);
mesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationFromEuler(mesh.rotation));
mesh.geometry.applyMatrix(new THREE.Matrix4().makeScale(
obj.scale.x,
obj.scale.y,
obj.scale.z
));
mesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationFromEuler(euler));
mesh.geometry.verticesNeedUpdate=true;
I realized what was my mistake.
It was necessary to apply getInverse of my first matrix instead .makeRotationFromEuler with negative values
var firstMatrix=new THREE.Matrix4().makeRotationFromEuler(mesh.rotation);
var inverseMatrix=new THREE.Matrix4().getInverse(firstMatrix);
mesh.geometry.applyMatrix(firstMatrix);
mesh.geometry.applyMatrix(new THREE.Matrix4().makeScale(
obj.scale.x,
obj.scale.y,
obj.scale.z
));
mesh.geometry.applyMatrix(inverseMatrix);
mesh.geometry.verticesNeedUpdate=true;
Related
Im trying to make a particle system adapt to a certain geometric shape, I am using THREE.GeometryUtils.randomPointsInGeometry and can and array from this that I can then position particles however regardless of the geometry I use (primitive or dae) the particles fill the space of the geometry bounding (I presume) and always fill a box shape.
The key lines
var object = new THREE.Mesh( new THREE.OctahedronGeometry( 50, 2 ), new
THREE.MeshBasicMaterial( {color: 0x00ff00} ) );
var positionsX =
THREE.GeometryUtils.randomPointsInGeometry(object.geometry, 20000);
Full running code here:
https://jsfiddle.net/joe_shields/5sbcfzqt/5/
Any Ideas what I need to change to ensure that the particles honour the shape fo the original geometry?
In my current project, I need a way to outline a mesh.This color outline will represent the object's current state, relevant for me.
The problem is that it is a custom mesh, loaded using JSONLoader.
I've tried different approaches, following (mainly) these 2 examples: https://stemkoski.github.io/Three.js/Outline.html and
THREEx.geometricglow. In both cases, I scale the mesh outline to a bit bigger than the original. My main problem is that scaling equally in all axis will not cover my object the way I intended to.
Here is the code I'm using:
var outlineMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide, transparent: true, opacity:0.5 } );
var outlineMesh2 = new THREE.Mesh( object.geometry, outlineMaterial2 );
outlineMesh2.position.copy(object.position);
outlineMesh2.scale.copy(object.scale);
outlineMesh2.scale.multiplyScalar(1.1)
scene.add( outlineMesh2 );
`
With a simple cube mesh, the outline will be good.
But with my custom mesh, the scale will not fit the shape correctly.
Here is a image demonstrating: http://s13.postimg.org/syujtd75z/print1.png
Also, using Stemkoski approach, the outlining mesh will also show in front of the object, not just outline (as seen in the above picture).
My question is: How should I resize the mesh? For what I know, it might have something to do with face normals.
Thanks for your time.
I want to get the exact intersection point of a ray and a sprite. But when I do this:
var ray = new THREE.Raycaster( camera.position, vector.sub(camera.position ).normalize());
var sprite = new THREE.Sprite(spriteMaterial);
var intersect = ray.intersectObject(sprite);
then intersect.point is just the position of the sprite, instead of the exact point that I need.
I need this so I can check if the part of the texture that has been clicked is visible or not. (Alpha value)
Is there a way to get the exact intersection, or is there a better way to achieve my goal?
This is not currently supported. See Raycaster.js if you want to try to hack your own solution. Sprites can be rotated (turned on their side), so the solution is not trivial.
A reasonable work-around is to create a Mesh from a PlaneGeometry and set
mesh.quaternion = camera.quaternion.
three.js r.64
In my game that uses Three.js (r52) I'm having some trouble getting the lighting right.
This dungeon level uses simple cuboids as the walls and the roof. For some reason the lighting is bright at the beginning of each mesh, but then fades to dark towards the other side.
Notice that the floor doesn't have artifacts, this is because it is one huge quad.
The light used is a PointLight. The materials for my meshes are simply created like this:
var texture = new THREE.Texture( image,
new THREE.UVMapping(),
THREE.RepeatWrapping,
THREE.RepeatWrapping,
THREE.NearestFilter,
THREE.NearestMipMapLinearFilter );
return new THREE.MeshLambertMaterial({
map : texture
});
The cuboids are exported OBJ models from 3ds max, converted using gw::OBJ-exporter. These are my export settings:
Any ideas?
Apparently you hit the same issue as in this thread: https://github.com/mrdoob/three.js/issues/1258
You need to use something like material.shading = THREE.FlatShading;
I have this object I'm loading with THREE.objLoader and then create a mesh with it like so:
mesh = new THREE.SceneUtils.createMultiMaterialObject(
geometry,
[
new THREE.MeshBasicMaterial({color: 0xFEC1EA}),
new THREE.MeshBasicMaterial({
color: 0x999999,
wireframe: true,
transparent: true,
opacity: 0.85
})
]
);
In my scene I then add a DirectionalLight, it works and I can see my object, however it's like the DirectionalLight was an ambient one. No face is getting darker or lighter as it should be.
The object is filled with the color, but no lighting is applied to it.
If someone can help me with that it would be much appreciated :)
What could I be missing ?
Jsfiddle here: http://jsfiddle.net/5hcDs/
Ok folks, thanks to Maël Nison and mr doob I was able to understand the few things I was missing, being the total 3d noob that I am... I believe people starting to get into the 3d may find useful a little recap:
Basic 3d concepts
A 3d Face is made of some points (Vertex), and a vector called a normal, indicating the direction of the face (which side is the front and which one is the backside).
Not having normals can be really bad, because lighting is applied on the frontside only by default. Hence the black model when trying to apply a LambertMaterial or PhongMaterial.
An OBJ file is a way to describe 3D information. Want more info on this? Read this wikipedia article (en). Also, the french page provides a cube example which can be useful for testing.
Three.js tips and tricks
When normals are not present, the lighting can't be applied, hence the black model render. Three.js can actually compute vertex and face normals with geometry.computeVertexNormals() and/or geometry.computeFaceNormals() depending on what's missing
When you do so, there's a chance Three.js' normal calculation will be wrong and your normals will be flipped, to fix this you can simply loop through your geometry's faces array like so:
/* Compute normals */
geometry.computeFaceNormals();
geometry.computeVertexNormals();
/* Next 3 lines seems not to be mandatory */
mesh.geometry.dynamic = true
mesh.geometry.__dirtyVertices = true;
mesh.geometry.__dirtyNormals = true;
mesh.flipSided = true;
mesh.doubleSided = true;
/* Flip normals*/
for(var i = 0; i<mesh.geometry.faces.length; i++) {
mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x;
mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y;
mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z;
}
You have to use a MeshPhongMaterial. MeshBasicMaterial does not take light in account when computing fragment color.
However, when using a MeshPhongMaterial, your mesh becomes black. I've never used the OBJ loader, but are you sure your model normales are right ?
Btw : you probably want to use a PointLight instead. And its position should probably be set to the camera position (light.position = camera.position should do the trick, as it will allow the light to be moved when the camera position will be edited by the Controls).