//textures
let loader=new THREE.TextureLoader()
let stars = loader.load("./../static/textures/stars3.jpg");
//BACKGROUND
scene.background = new THREE.CubeTextureLoader()
.load([
"./../static/textures/stars2.jpg",
"./../static/textures/stars3.jpg",
"./../static/textures/stars2.jpg",
"./../static/textures/stars3.jpg",
"./../static/textures/stars2.jpg",
"./../static/textures/stars3.jpg",
]);
// scene.background = loader.load(
// "./../static/textures/stars3.jpg"
// );
the stars image are not showing as 3d background. When I use simple textureloader to load just one static image it works as the background but not cubetextureloader.
I don't get any errors just 3 warnings
"GL_INVALID_VALUE: Each cubemap face must have equal width and height.",
"GL_INVALID_OPERATION: Level of detail outside of range.", * 6
"GL_INVALID_OPERATION: Texture format does not support mipmap generation."
All I get is a black background.
Related
I am currently working on a project where I am trying to replace the texture of a 3D model with an image from a canvas that has the original texture and with same resolution. I have been able to successfully load the image from the canvas and apply it to the model's material, but the texture is appearing distorted and stretched.
Original glTF before using the canvas image as the texture
After using the canvas image as the model's texture
Currently this is the code I am using to load the image from the canvas to the glTF:
this.button.addEventListener("click", () => {
var image = new Image();
image.src = this.canvas.toDataURL();
image.onload = function()
{
var texture = new THREE.Texture(image);
texture.encoding = THREE.sRGBEncoding;
material.map = texture;
texture.needsUpdate = true;
}
});
I am wondering if anyone has any experience with this issue and can offer any suggestions or solutions. Any help would be greatly appreciated.
Thank you.
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 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.
In ThreeJS (JavaScript/ WebGL) how can I create a static background image that is part of the scene but resizes to fit the full inner browser window exactly? It works when I use CSS but then the background image won't show when making a "screenshot" via renderer.domElement.toDataURL('image/png'), which I want to. Thanks!
You can use a separate background scene to render the background image.
var bg = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({map: backgroundTexture})
);
// The bg plane shouldn't care about the z-buffer.
bg.material.depthTest = false;
bg.material.depthWrite = false;
var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
bgScene.add(bgCam);
bgScene.add(bg);
Then in your render loop, draw bgScene before your real scene.
renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render(scene, cam);
It wasn't clear for me if you are trying to make a panorama viewer or something like that...
If that was your goal, here's an answer I gave to solve the problem of inserting an equirectangular image to the rendered sphere (which can be controlled by mouse and/or deviceOrientation[accelerometer in smartphones]):
https://stackoverflow.com/a/37129356/1920145