Am I doing anything wrong?
const bambooTexture = new THREE.TextureLoader();
scene.background = bambooTexture.load('../images/bamboo.jpg');
Related
//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.
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});
I am new to three js. i want to display a video on plane Geometry . i tried with the following code but it is showing a blank web page with out any errors
var video = document.getElementById('video');
video.src = "***VIDEO URL***";
video.load();
video.play();
var texture = new THREE.VideoTexture(videoImage);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';
var meshPlace = new THREE.Mesh(
new THREE.PlaneGeometry(USE_WIDTH, USE_HEIGHT , 40),
new THREE.MeshBasicMaterial({ map: texture }),);
scene.add( meshPlace );
Think of video as a sequence of images. So to "play" this video on your 3D object - you'll have to pass every single frame of that sequence to your material and then update that material.
Good place to start is here: https://github.com/mrdoob/three.js/wiki/Updates
And here: http://stemkoski.github.io/Three.js/Video.html
I fount this on Using Video as texture with Three.js
Hope this helps :)
I render some part of my scene and I use this as a texture on my object. But now I want to export this texture as an image. Any idea on that?
This is how I create my texture object:
frameTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
And I assign this texture on my material:
var material = new THREE.MeshBasicMaterial( {map:frameTexture.texture} );
And this is how I render it to the texture:
renderer.render(frameScene,frameCamera,frameTexture);
Now the question is how to save frameTexture as an image.
Render the image to the canvas then call toDataURL
renderer.render(sceneThatHasASingleQuadPlaneUsingFrameTexture, camera);
var dataURL = renderer.domElement.toDataURL();
You can now do things with that dataURL like open a window
window.open(dataURL, "image");
Or make an image out of it
var img = new Image();
img.src = dataURL;
document.body.appendChild(img);
Send it to some server via XHR
const xhr = new XMLHttpReqeust();
xhr.open('PUT', 'https://myserverthatsavesimages.com', true);
xhr.send(dataURL);
...
Etc...
Another easy solution is to render a scene having the texture as a background, that way you don't have to setup a camera to align it.
const texture = /** load texture with textureloader **/
const renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 400);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight("rgb(255,255,255)", 1));
// Here
scene.background = texture;
const camera = new THREE.PerspectiveCamera();
renderer.render(scene, camera);
const imageURL = renderer.domElement.toDataURL("image/png");
var anchor = document.createElement("a");
anchor.href = imageURL;
anchor.download = "preview.png";
anchor.click();
anchor.remove();
texture.dispose();
renderer.domElement.parentElement?.removeChild(renderer.domElement);
renderer.dispose();
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);