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
Related
I have a problem with this warning I'm getting from three.js. The warning is: THREE.WebGLRenderer: image is not power of two (600x480). Resized to 512x512
I have tried adding THREE.LinearFilter, but it does nothing.
var texture = new THREE.TextureLoader().load(data[i]['image']);
texture.minFilter = THREE.LinearFilter;
var paintingGeometry = new THREE.BoxGeometry(1, 1, 1);
var paintingMaterial = new THREE.MeshPhongMaterial({
map: texture
});
var painting = new THREE.Mesh(paintingGeometry, paintingMaterial);
What are your suggestions? Thanks.
There isn't a problem here - all textures need power of two images. If you're having issues with how the texture is scaled and applied to your geometry you should check out the docs for THREE.Texture, specifically the wrap and repeat properties.
Possibly dumb question but here goes. Three.js geometries have 'parameter' feilds associated with them, see the box geometry here...
box Geometry parameters
I am trying to update these parameters like this...
var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));
scene.add(mesh);
mesh.geometry.parameters.depth=20;
But of course, the geometry remains unchanged. Is there a way of updating the geometry by editing these parameters?
fiddle here https://jsfiddle.net/kn3owveg/2/
Any help appreciated!
parameters.depth is only used at geometry construction time. it has no effect when modifying it. you can think of it as read only.
Use the example at BoxGeometry and the gui on the right to see how to achieve what you want.
Gaitat is totally right, you can't change geometry with changing of parameters.
And there can be another solution. With scaling of your cube.
function setSize( myMesh, xSize, ySize, zSize){
scaleFactorX = xSize / myMesh.geometry.parameters.width;
scaleFactorY = ySize / myMesh.geometry.parameters.height;
scaleFactorZ = zSize / myMesh.geometry.parameters.depth;
myMesh.scale.set( scaleFactorX, scaleFactorY, scaleFactorZ );
}
...
setSize(mesh, 10, 10, 20);
jsfiddle example
Technically, scaling only creates the illusion of an updated geometry. I would say a better approach would be to reassign the geometry value of your mesh to a new geometry.
mesh.geometry = new THREE.CubeGeometry(newSize, newSize, newSize)
With this approach you can update any aspect of the geometry including depth segments for example. This is especially useful when working with non cube geometries like cylinders or spheres.
Here is a full rework of your original code using this approach, really only the last line has changed:
var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));
scene.add(mesh);
mesh.geometry = new THREE.CubeGeometry(nodeSize, nodeSize, 20);
I'm looking for an efficient method of overlaying a texture to cover a mesh. I'm not an expert, more a novice, when it comes to 3 dimensional mapping/objects. Below shows how I would like the end product to look.
When attempting to apply texture with the following code, the end result looks similar to below. I have not done any UV mapping, I believe my answer may be lay here. As you can see from the below image it roughly takes the general shade of the picture but I get the impression that the texture is being drawn between each vertice of the model rather than across the entirity.
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('resource/images/materials/Mahogany.jpg');
var STLLoader = new THREE.STLLoader();
STLLoader.load( 'test.stl', function ( geometry1 ) {
var meshMaterial = new THREE.MeshBasicMaterial({map:texture});
var mesh = new THREE.Mesh( geometry1, meshMaterial );
mesh.scale.set(1, 1, 1);
mesh.position.set(5, 20, 80);
scene.add(mesh);
});
The cube has the correct texturing, whereas my STL loaded mesh does not.
Please ignore the rotation of the object in the above picture, I will move to unioning my objects together once I have fixed my texturing issues.
Fairly new at asking questions on here so please do comment to help me expand my question if it's too general or not percise enough. Thank you.
You may use
THREE.MeshPhongMaterial()
instead of
THREE.MeshBasicMaterial()
THREE.MeshPhongMaterial() will wrap the material outside the object and we can get curved material as per the object.
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:
I have created mesh and rendered " 10 " 3d objects using three.js?
how to access each object to perform scaling , rotation & all stuffs so there is a
need to get the div object individually?
help me to solve this issue ?
thanks !
You do not seem to be asking a real question. But rather asking for someone to teach you something. In the 'startup code' a SphereGeometry object is combined with a MeshBasicMaterial object in order to create the Mesh object which is your 3d object that you can then use to access/set the objects position, rotation, etc. Here are the lines of code I am referring to:
var geometry = new THREE.SphereGeometry( 75, 20, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
var mesh = new THREE.Mesh( geometry, material );
Once you create mesh objects you need to add them to the scene with a call to scene.add(mesh). At this point you can set or get the rotation or position as such
mesh.position.x = 50;
mesh.rotation.z = Math.PI / 2 // rotations are in radians