Am new to three js. Am trying to set background image and want to change front face with image also.
Gone through more example from net, but am not getting idea.
Please tell me with simple examples.
Here is the cube link
You just can add your texture to your box:
var dice = new THREE.Mesh(
new THREE.BoxGeometry( 50, 50, 50),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('texture.png')
})
);
dice.material.side = THREE.DoubleSide;
scene.add( dice );
And for background you can use SphereGeometry() geometry and change the background.
Related
I'm trying to apply a texture to a planeGeometry using the three.js engine.
I should be seeing a football field, I'm actually seeing black.
If I replace the map:texture argument with color:0x80ff80, I get a field of solid green, demonstrating that the geometry is in the correct place.
The page contains an which appears in the files before any scripts. I can display that image, demonstrating that there isn't a problem with the image.
The files are being served locally by an http server.
The code I'm using to build the material and PlaneGeometry is below. Any ideas appreciated. Thank you.
function buildField( fieldLength, fieldWidth, scene) {
var image = document.getElementById("fieldTexture");
var texture = new THREE.Texture(image);
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5);
var material = new THREE.MeshBasicMaterial( {map:texture, side:THREE.DoubleSide});
var field = new THREE.Mesh(geometry, material);
field.rotation.x = -Math.PI/2;
scene.add(field);
}
THREE.ImageUtils is already deprecated. (source)
Use THREE.TextureLoader().load('field.png') instead
Try this, own THREE.js methods usually work better...:
texture = THREE.ImageUtils.loadTexture('field.png');
material = new THREE.MeshBasicMaterial({map: texture});
var field = new THREE.Mesh(geometry, material);
Blender Exported UV Map Texture Not Showing In Three JS
Greetings, Nov 13th 2014
Briefly, I am attempting to use the below code to aid three.js in recognizing the material from a blender exported file that has been successfully loaded while the morph influences work great! However, the UV mapped texture from within blender doesn't show up and there are no thrown errors to the console? I can easily use the imageutils to load the texture separately but of course the UV mapping is lost! Oddly when I do load the UV graphic separately I get the odd pattern that symbolizes a UV graphic but the significance defeats me?...I, new to three.js, have tried numerous code combinations as the below last attempt represents. Any ideas how to attempt three.js to recognize the UV material?
Appreciatively,
Ted
mesh = new THREE.Mesh(
geometry,
new THREE.MeshLambertMaterial({
THREE.UVMapping(THREE.ImageUtils.loadTexture("clothtexturegreenuv.jpg"),
morphTargets: true
})
);
mesh.scale.set( 35, 35, 35 );
scene.add( mesh );
Try this:
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture( "clothtexturegreenuv.jpg"),
morphTargets: true
});
mesh.scale.set( 35, 35, 35 );
scene.add( mesh );
It works in the examples with MeshFaceMaterial automatically, no UVMapping or loadTexture calls are needed when the exported json already has the UVs and the texture reference I think. From the example at http://threejs.org/examples/webgl_loader_json_blender.html :
var loader = new THREE.JSONLoader();
loader.load( 'models/animated/monster/monster.js', function ( geometry, materials ) {
var faceMaterial = new THREE.MeshFaceMaterial( materials );
//(...) that example uses morph anims too but I cut the extras (...)
morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
scene.add( morph );
}
We also document use of UVs + different maps in a manual there and it's similar (but only updated last spring for now whereas the threejs.org example is current): https://forge.fi-ware.org/plugins/mediawiki/wiki/fiware/index.php/3D-UI_-WebTundra-_User_and_Programmers_Guide#Exporting_3D_scenes_from_authoring_applications
I'm just getting started with webgl and was trying to make an animation based on a spritesheet. I've found an example and changed the spritesheet to my own. However even though I removed the white background, saved it as a transparant png, the animation still shows up with a white background.
This is the example I used:
http://stemkoski.github.io/Three.js/Texture-Animation.html
Is there any way how I can get rid off the white background?
Thanks in advance.
EDIT:
var runnerTexture = new THREE.ImageUtils.loadTexture( 'images/run.png' );
annie = new TextureAnimator( runnerTexture, 10, 1, 10, 75 ); // texture, #horiz, #vert, #total, duration.
var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide } );
var runnerGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
var runner = new THREE.Mesh(runnerGeometry, runnerMaterial);
runner.position.set(-150,25,0);
scene.add(runner);
To support PNGs with an alpha-channel, you have to modify the MeshBasicMaterial accordingly: There is an attribute 'transparent' which you could set to 'true'.
Try using the following line instead:
var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide, transparent: true } );
See also the reference from Material:
.transparent
Defines whether this material is transparent. This has an effect on
rendering as transparent objects need special treatment and are
rendered after non-transparent objects. For a working example of this
behaviour, check the WebGLRenderer code. When set to true, the extent
to which the material is transparent is controlled by setting opacity.
I need to create CubeGeometry with wireframe but without diagonals, I used BoxHelper but I cannot color cube. Can any one suggest me how to color cube using BoxHelper.
You have several options. Here are the patterns to follow:
var mesh = new THREE.Mesh( new THREE.BoxGeometry( 10, 10, 10 ), new THREE.MeshNormalMaterial() );
//scene.add( mesh ); // optional
var helper = new THREE.BoxHelper( mesh );
helper.material.color.set( 0x00ffff );
scene.add( helper );
// alternate method
var helper = new THREE.EdgesHelper( mesh, 0xff0000 );
scene.add( helper );
Here is a fiddle to help you: http://jsfiddle.net/Lv2jseLb/
note: CubeGeometry has been renamed to BoxGeometry.
three.js r.84
I just want to draw one cube, such as one building(I got the places on the ground which is consisted of four points),and I also knew the height of the building. So how to draw? Thanks very much.
This is pretty straightforward:
http://threejs.org/docs/#Reference/Extras.Geometries/CubeGeometry
var building = new THREE.CubeGeometry(width, height, depth, 1, 1, 1);
var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
var mesh = new THREE.Mesh(building, material);
scene.add(mesh);