I create a mesh with transparency texture over the ground. but when I move the mesh, the transparent part of the texture changed to the background color of the scene somewhere. how to solve this problem? am I missing some configuration here?
mainCode:
this.renderer = new THREE.WebGLRenderer({antialias: true,alpha: true,logarithmicDepthBuffer:true});
let material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide,color: 0xFFFFFF,map: new THREE.TextureLoader().load(_background),transparent: true,opacity: 1,});
set depthTest:false in material
means :
this.renderer = new THREE.WebGLRenderer({antialias: true,alpha: true,logarithmicDepthBuffer:true});
let material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide,color: 0xFFFFFF,map: new THREE.TextureLoader().load(_background),transparent: true,opacity: 1,depthTest:false});
Related
I would like to use the rendering result of the scene as a texture in ThreeJS.
Does ThreeJS have such a function?
Do I need to modify ThreeJS?
Thanks.
You can render a scene to a texture by passing a THREE.WebGLRenderTarget to THREE.WebGLRenderer.render().
First, create a render target of the desired size (this is your texture) :
var renderer = new THREE.WebGLRenderer();
var renderTarget = new THREE.WebGLRenderTarget(512, 512);
You can then use THREE.WebGLRenderTarget.texture on a material :
var geometry = new THREE.PlaneGeometry(1.0, 1.0);
var material = new THREE.MeshBasicMaterial({
map: renderTarget.texture
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Finally render the scene in 2 passes :
renderer.render(fakeScene, fakeCamera, renderTarget);
renderer.render(scene, camera);
You may want to create a new scene and a new camera to render on the renderTarget. It depends on what you want to do.
Take a look at this fiddle and this example.
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 know about texture tiling. However can a lightmap be tiled the same way?
I can't manage to tile a lightmap texture using the following snippet of code. No repeat or offset is taken into account.
var map = THREE.ImageUtils.loadTexture('Map.jpg');
var lightMap = THREE.ImageUtils.loadTexture('Light map.png');
lightMap.wrapS = lightMap.wrapT = THREE.RepeatWrapping;
lightMap.repeat.set(.455078, .455078);
lightMap.offset.set(.472343, .546562);
var material = new THREE.MeshLambertMaterial({map: map, lightMap: lightMap});
jsonLoader.load('Model.json', function (geometry) {
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Thank you for your help.
Lightmaps do not support offset/repeat in three.js, and in fact require a separate set of UVs.
three.js r.69
I have created a sphere geometry and wrapped a texture on it as follows.
scene = new THREE.Scene();
texture = THREE.ImageUtils.loadTexture("RESOURCES/360.jpg");
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
mesh = new THREE.Mesh(new THREE.SphereGeometry(500,60,40),new THREE.MeshBasicMaterial({map:texture,overdraw:true}));
mesh.scale.x = -1;
scene.add( mesh );
I move my camera around the sphere. When i use WEBGL renderer everything works fine but when i switch to canvas rendering mode the movement is not smooth. It gets stuck in between. Is there any way i could speed up the canvas rendering. What effect does the value radius , segment width and height have on performance of renderer.
Thanks in advance!!
I create a Mesh having a PlaneGeometry and the material defined by a texture loaded from a JPEG image. Everything is fine, excepting that there is a small amount of time before the texture image is loaded when the plane is displayed using a dark color. Is there a way to change this color to something else?
I tried the color option for material, but it is not applied.
var texture = new THREE.ImageUtils.loadTexture('/path/to/image');
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.NearestFilter;
var material = new THREE.MeshBasicMaterial({
side : THREE.DoubleSide,
map : texture,
color : 0xf0f0f0
// this doesn't seem to work
});
var geometry = new THREE.PlaneGeometry(Math.abs(line.x1 - line.x0), depth);
var mesh = new THREE.Mesh(geometry, material);
That black color is the texture rendering without any texture data. The easiest fix is to load the texture and the mesh, but do not render the mesh until both have fully loaded.
Another option is to create a very small 1x1 texture that is the color you want, use that as your texture initially, and then change the mesh material to your final texture once the desired texture has fully loaded.