I have created a very basic cube using Three.js and Physijs. I am mapping a texture that has transparency, and I would like to see the texture on the other side of the cube through the transparency. Right now, I see the background through the transparency, but not the texture on the back of the cube.
var cube = new Physijs.BoxMesh(
new THREE.BoxGeometry( 2, 2, 2),
new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('border.png') } ),
1 );
The texture used:
The result:
As you can see, the background shows through the cube, but not the texture on the back faces. I guess that the back of a 2d texture can't be seen, but it there anyway for me to apply the texture to both sides of each face then?
This is my first go with Threejs, and there looks to be a lot to take in, so I hope I haven't missed something obvious :)
Setting the side to THREE.DoubleSide may does it for you:
var material = new THREE.MeshPhongMaterial( {
map: new THREE.TextureLoader().load( "image.png" ),
transparent: true,
side: THREE.DoubleSide // apply to both sides of the faces
} );
But the illusion is not perfect as you can see here:
Related
Using Three.js, I would like to create a box that you are able to change the color of on all sides using BufferGeometry. My current solution is creating boxes like this:
// Creating the Cube
let cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), [new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors
}), new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors,
transparent: true,
opacity: 0
})]);
// Editing the sides (have to set +1 because CubeGeometry has 12 sides with 2 triangles per side)
cube.geometry.faces[faceIndex].color.set(new THREE.Color(color));
cube.geometry.faces[faceIndex + 1].color.set(new THREE.Color(color));
The problems with this being that CubeGeometry is deprecated and this solution has very bad performance wise because BufferGeometry is not being utilized. I've tried to use BoxBufferGeometry but it does not allow you to edit individual faces in the same way. I also don't know if the Three.js built in ray tracer will be able to pick out sides of a BoxBufferGeometry mesh like it does for CubeGeometry.
I´m using Three.js and trying to create some custom shapes, similar to one that appears in a project from one of agencies using threejs:
three.js featured project esample
How did they generated these boxes with holes inside? (on that examples
boxes basically have only borders around and are empty inside).
As I saw in the code (I was trying to figure out myself) they use BoxGeometry but I have no idea how to accomplish that. Does anyone know or can give me any directions? It would be really helpfull as i´m stuck with this and have no idea on how to create them.
So in THREE.js Meshes represent any kind of 3D object. They combine Geometries and Shaders. Generally to create a mesh you call
var mesh = new THREE.Mesh( geometry, shader );
If you use any of the builtin shaders (also known as Materials [ MeshBasicMaterial, MeshLambertMaterial, etc]) they have a wireFrame boolean attribute that allows this functionality.
var geometry = new THREE.BoxGeometry( x, y, z ),
material = new THREE.MeshBasicMaterial( {
wireFrame: true, // This makes the object appear wireframe
color: 0xffffff // You can alter other properties
});
var box = new THREE.Mesh( geometry, material );
// You can also change it later
box.material.wireFrame = false;
I'm trying to make a simple solar system with three.js, I have finished everything, now I want to add some shading, but apparently it doesn't work when working on textures.
loader.load("earth.jpg", function ( texture ) {
var geometry = new THREE.SphereGeometry( 100, 20, 20 ),
material = new THREE.MeshLambertMaterial({
map: texture,
overdraw: true,
}),
mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
});
If I replace map: texture with color: 0xffffff it works very well, but when I add a texture, the light shading disappears.
Why lights doesn't works on textures?
Maybe should I create two spheres for every planet? One with a texture and another transparent with shadow?
This is a limitation of CanvasRenderer. It does not support MeshLambertMaterial and diffuse textures in combination.
You will have to switch to WebGLRenderer.
three.js r.65
How can I create a material that reflects other shapes from the scene? I have tried the reflectivity property but it didn't reflect anything.
There is an example that seems to have this effect
It doesn't look like standard materials were used to create this.
To go into a bit of the theory: a reflection is basically an image of the scene taken from a certain position. So if you want a planar mesh to serve as a mirror, you'll have to add a camera at that position, have it render the scene to a texture in the animation loop, and then use that texture in the material for the planar mesh. I would also recommend looking at http://stemkoski.github.io/Three.js/Reflection.html in addition to the examples WestLangley mentioned.
Also, play around with settings; for a less reflective effect, for example, try:
var mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: mirrorCamera.renderTarget } );
or
var mirrorMaterial = new THREE.MeshPhongMaterial( { emissive: 0x111111, envMap: mirrorCamera.renderTarget } );
https://threejs.org/examples/#webgl_materials_cubemap
I did it with the above example:
new THREE.MeshLambertMaterial ({
map: texture,
envMap: scene.background,
combine: THREE.MixOperation,
reflectivity: .5
})
The key variable, as i understand, is THREE.MixOperation
I'm trying to apply a texture to a plane. I am using and image that is 256x256. Currently it just renders black. Can someone tell me where I'm going wrong?
//create the floor
var floorTexture = new THREE.ImageUtils.loadTexture( 'carpet.jpg' ); //256x256
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
I can add more of my code if needed.
Thanks!
Can it be because you texture gets scaled down(so it can be repeated 100 times on the surface) and you just can't see the details of it? If the texture is dark itself this could be the matter. Maybe you try it with floorTexture.repeat.set(1, 1); to see if it actually gets applied.
Also you may consider to include your texture, so that anyone can test against it. I just ran your code in r.58 with a custom texture and it worked fine for me.
I just struggled with this myself for a while. Check the image's filesystem permissions. Mine were set to 640. When I changed them to 664, the image rendered as it should.
Your problem may be lack of ambient light in the scene, try adding a white ambient light to see if it solves your problem