I have a geometry object which looks like this:
I am trying to do the following to create a single complete edge around the geometry:
var edges = new THREE.EdgesGeometry( pointsOfIntersection );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.add(line);
However this code results in nothing. I'm new to three.js so sorry if I'm making a rookie mistake.
Related
I'm trying to animate a polygon in A-frame, seen also here Add polygon in A-frame:
// Create new shape out of the points:
var shape = new THREE.Shape( vector2List );
// Create geometry out of the shape
var geometry = new THREE.ShapeGeometry( shape );
// Give it a basic material
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 1} );
// Create a mesh using our geometry and material
var mesh = new THREE.Mesh( geometry, material ) ;
// add it to the entity:
this.el.object3D.add( mesh );
The goal now is to change the opacity of the shape in an animation. I don't know how to access the shape/polygon attributes within the animation - maybe something like this:
// animation
let opacityAnimation = document.createElement( 'a-animation' );
following lines are not clear:
opacityAnimation.setAttribute( 'mesh.material', 'opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );
edit:
here is a live-example: fiddle
You set mesh.material to opacity. I believe You want to specify the animated attribute. As the animation element should look like this:
<a-animation attribute="material.opacity"
to = "0"
dur = "5000">
</a-animation>
Your js must be setting those accordingly:
// animation
let opacityAnimation = document.createElement( 'a-animation' );
opacityAnimation.setAttribute( 'attribute', 'material.opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );
Now, if you want to use the material component with a custom/polygon geometry, You need to create it a bit differently.
Instead of creating a new mesh, consisting of its own geometry, and material, lets make the geometry in three.js, and use the existing material component.
So i simply replaced adding the new mesh with a simple:
var myShape = new THREE.Shape(points);
var geometry = new THREE.ShapeGeometry(myShape);
this.el.getObject3D('mesh').geometry = geometry;
You should wait till the object3D is loaded to do it properly, in my fiddle i just made a simple timeout.
Now we can use the animation component as intended, and change the material.opacity.
Check it live on a box here.
Check it live on a polygon here.
How can I get outline affect the same as in THREE.js editor ?
I've tried this:
// child = child of my object
var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide } );
var outlineMesh1 = new THREE.Mesh( child.geometry, outlineMaterial1 );
outlineMesh1.position = child.position;
outlineMesh1.scale.multiplyScalar(1.05);
scene.add( outlineMesh1 );
Trying to do the same as in this example (code). I'm getting completely different effect:
Same questions: #1 and #2.
Did you try wireframe?
var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide, wireframe: true } );
Not sure if you would need THREE.BackSide or not.
take a look at the parameters for MeshBasicMaterial here
Have you looked at the code for the editor to see how it does it?
EDIT
I think the editor is using a BoxHelper object which creates the outline
EDIT
HERE is a stack question showing how to have the BoxHelper render on top.
HERE is a fiddle as an example implementing the above.
If you need somethink of this when user tap on mesh you can use this code :
let geo = new THREE.EdgesGeometry(intersects[0].object.geometry);
let mat = new THREE.LineBasicMaterial({ color: "black", linewidth: 10 });
let wireframe = new THREE.LineSegments(geo, mat);
wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd
intersects[0].object.add(wireframe);
I'm pretty new to three.js and I tried for hours to create a skybox/skydome for a better visual feeling to my world (in this case space). Googled, checked tutorials, asked here on StackOverflow. And nothing worked, or I got a silly and dumb answer here on SO. Question is simple: how to make a skybox/dome?
This is how you do a skydome in threejs.
var skyGeo = new THREE.SphereGeometry(100000, 25, 25);
First the geometry. I wanted it big and made it big
var loader = new THREE.TextureLoader(),
texture = loader.load( "images/space.jpg" );
Loads the texture of your background space. One thing here is that you need it to run through a server to be able to load the texture. I use wamp or brackets preview.
Create the material for the skybox here
var material = new THREE.MeshPhongMaterial({
map: texture,
});
Set everything together and add it to the scene here.
var sky = new THREE.Mesh(skyGeo, material);
sky.material.side = THREE.BackSide;
scene.add(sky);
This might not be the best solution for this, but it´s easy specially for a beginner in threejs. Easy to understand and create.
This is how you can load image as texture and apply that on innerside of a sphere geometry to emulate skydome.
Complete solution with error callback for future reference
//SKY
var loader = new THREE.TextureLoader();
loader.load(
"./assets/universe.png",
this.onLoad,
this.onProgress,
this.onError
);
onLoad = texture => {
var objGeometry = new THREE.SphereBufferGeometry(30, 60, 60);
var objMaterial = new THREE.MeshPhongMaterial({
map: texture,
shading: THREE.FlatShading
});
objMaterial.side = THREE.BackSide;
this.earthMesh = new THREE.Mesh(objGeometry, objMaterial);
scene.add(this.earthMesh);
//start animation
this.start();
};
onProgress = xhr => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
};
// Function called when download errors
onError = error => {
console.log("An error happened" + error);
};
is it possible to add border around a material, as attached in the image,
i can set the material color by following code
object.traverse( function ( child )
{
if ( child instanceof THREE.Mesh )
child.material.color.setRGB (1, 0, 0);
});
where object is my loaded 3d model, so am assume there should be a way to draw the border, is there any option in three.js.
As per the #shiva's comment i have tried it with the following code to draw the glow effect
if(childObject.material.name=="material4046")
{
mesh = new THREE.Mesh( globalGeomtry, material );
// mesh.visible = false
scene.add( mesh );
console.log(mesh);
// create a glowMesh
var glowMesh = new THREEx.GeometricGlowMesh(mesh);
mesh.add(glowMesh.object3d);
// example of customization of the default glowMesh
var insideUniforms = glowMesh.insideMesh.material.uniforms;
insideUniforms.coeficient.value = 2;
insideUniforms.power.value = 1.4;
insideUniforms.glowColor.value.set('red');
var outsideUniforms = glowMesh.outsideMesh.material.uniforms;
outsideUniforms.coeficient.value = 2;
outsideUniforms.power.value = 1.4;
outsideUniforms.glowColor.value.set('red');
}
now the ouput is looking as like in the second image,
i want this glow effect as the border around that material, is it is possible
I think this is what you were after. It is achieved with:
new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide } );
You can see a demo here:
https://stemkoski.github.io/Three.js/Outline.html
Source code of the demo: https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html
I tried my level best to achieve it, but unfortunately I can't get it, so I decided to do it with the wireframe option to highlight the material:
if(childObject.material.name=="material9695")
{
var mesh = new THREE.Mesh( globalGeomtry, material );
scene.add( mesh );
var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000,wireframe : true } );
var outlineMesh1 = new THREE.Mesh( globalGeomtry, outlineMaterial1 );
scene.add( outlineMesh1 );
}
Now the wireframe is added for the material material9695 so I can identify that the material material9695 is currently selected
This is not the exact answer I expected but it is enough right now after some hard hours
I have a house model in my game, and I have some materials for the house geometry. There is a material for the wall of the house, and I have a texture-map-image to show the bricks.
var mat = new THREE.MeshPhongMaterial( {
ambient: 0x969696,
map: THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' ),
overdraw: true,combine: THREE.MultiplyOperation
} );
In this way above, the texture map appears like GL_CLAMP I want it to show like GL_REPEAT.
What should I do?
If you can not see the images check this.
I have posted a full working example at:
http://stemkoski.github.com/Three.js/Texture-Repeat.html
The relevant part of the code example is:
// for example, texture repeated twice in each direction
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );
var lavaBall = new THREE.Mesh( THREE.GeometryUtils.clone(sphereGeom), lavaMaterial );
scene.add( lavaBall );
It's called THREE.RepeatWrapping there. The loadTexture defaults to THREE.ClampToEdgeWrapping (see ctor function from previous link). Don't know if you can use the callback (because this in JS is a bit weird (looks like it points to the created Image, not the created Texture)). Signature:
loadTexture: function ( path, mapping, callback ) {
Better you just name the texture locally and set the wrap modes manually:
var t = THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' );
t.wrapS = t.wrapT = THREE.RepeatWrapping;
Looks like you're not going far with threejs without looking at the actual code...
Image must be 8x8, 16x16, 32x32, 128x128, 256x256, 512x512 etc.
And all be working.
=)