Assign the material from the video tag to the Mesh and get an inverted video. Before that, this place had a texture with the correct orientation. What can this be related to? I've have this problem when I switched from loading models in GLTF format
material = new MeshPhysicalMaterial();
const video = document.getElementById('myvideo');
video.play();
material.map = new VideoTexture(video);
material.map.format = RGBFormat;
http://prntscr.com/t4ldyf
If your texture is showing up vertically inverted, you can flip it with the Texture.flipY property. The default value is true, so try setting it to false.
material.map = new VideoTexture(video);
material.map.format = RGBFormat;
material.map.flipY = false;
Related
I am trying to apply an image dynamically on a gltf loaded mesh.
The code to load the model looks like:
const gltfLoader = new GLTFLoader();
const url = 'resources/models/mesh.gltf';
gltfLoader.load(url, (gltf) => {
const root = gltf.scene;
scene.add(root);
})
When looking from top the element looks like a rounded rect:
When inspecting the imported mesh I can see that the BufferGeometry has a count of 18.000 points:
Everything works fine however if I apply the texture like this:
const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
root.children[0].material = material;
The image is not visible but the mesh is now colored in 1 color.
Is it possible to apply the image just on the top face of the rect?
Hard to tell what the problem is without seeing the resulting image. However, I would just assign a new texture like this: root.children[0].material.map = texture instead of creating a whole new material, since you don't want to lose all the material attributes that came in the GLTF.
Additionally, MeshBasicMaterial always looks flat because it is not affected by lights.
I'm trying to apply an equirectangular reflection map to the .map field of a MeshBasicMaterial, to save performance vs rendering an entire MeshStandardMaterial just for the envMap.
Per three's texture constants page, I thought I could achieve this by manually setting the texture's mapping to THREE.EquirectangularReflectionMapping before I assign the texture to material.map. This doesn't work though, the image is still mapped to UVs instead of as a reflection map.
How can I force the texture to follow the mapping I set?
Example code:
var myGeo = new THREE.SphereGeometry(0.5, 32, 32);
var myTexture = new THREE.TextureLoader().load('myEquirec.png');
myTexture.mapping = THREE.EquirectangularReflectionMapping;
var myMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, map: myTexture});
var myMesh = new THREE.Mesh(myGeo, myMaterial);
scene.add(myMesh);
I would expect this to be possible, otherwise why does Three let us set the mapping modes?
I have this texture of 20x20pixels and and object from a collada 1.4.1 model.
So I want to give this object this new texture for testing
I do the following
var loader = new THREE.TextureLoader();
loader.load("/assets/images/texture2/TextureResource129.png", texture => {
var material = new THREE.MeshLambertMaterial({
map: texture
});
node.material = material;
material.needsUpdate = true;
});
Now what happens is that the object is in 1 color
How can I change the texture so it is just as the texture?
Instead of creating a new material that behaves differently than the one that comes in your Collada import, just change the texture of the existing material. Do this inside your texture loader callback:
node.material.uniforms.MatDiff2.value = texture;
That way you just change the texture input to the existing material.
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);
I'm trying the second approach to use Text in three.js, drawing on a canvas and using the result as a texture. It basically works, except for the following problem -don't know if it's a bug:
I create two texts, with transparent background, and overlap then. They show ok, but when I rotate one of them, the transparency is messed up.
I create the text objects with following (excerpt) function
function createText(text, ...){
var textHolder = document.createElement( 'canvas' );
var ctext = textHolder.getContext('2d');
...
var tex = new THREE.Texture(textHolder);
var mat = new THREE.MeshBasicMaterial( { map: tex, overdraw: true});
mat.transparent = true;
mat.map.needsUpdate = true;
var textBoard = new THREE.Mesh(new THREE.PlaneGeometry(textHolder.width, textHolder.height),mat);
textBoard.dynamic = true;
textBoard.doubleSided = true;
return textBoard;
}
and add them to the scene.
See demonstration with full code in jsfiddle
Transparency is tricky in webGL.
The best solution in your case is to do the following for your transparent text material:
mat.depthTest = false;
updated fiddle: http://jsfiddle.net/SXA8n/4/
three.js r.55