I want to load an image on to a plane.But I am having a problem in loading.So,here I am getting the image like this.
var texture = new THREE.ImageUtils.loadTexture('Silk.png');
var Silk = new THREE.Mesh(new THREE.PlaneBufferGeometry(15,15),new THREE.MeshPhongMaterial({map:texture,color:'skyblue'}));
scene.add(Silk);
Silk.position.z = -2;
And This is the result
I want only the image not the background
How can I do that?
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.
//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'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 want to merge two images,one image is of 300x300 and other is 100x100, First i have created a canvas and then i created two images which i have added to the both the images to canvas and the canvas is added to the content panel, then i created a writeablebitmap and render the canvas and created a method savejpeg which saves the image to isolated stoarage,but isolated storage is not showing the whole image it save a black screen.
First i created a canvas through code set its height width and background color then i created two images programmatically which i have added to the canvas and then canvas is added to the contentpanel
my code is:
public void CreateImage()
{
Canvas canvas = new Canvas();
canvas.Height = 400;
canvas.Width = 400;
canvas.Background = new SolidColorBrush(Colors.Red);
Image img1 = new Image();
img1.Source = (ImageSource)new ImageSourceConverter().ConvertFromString("Image/Desert.jpg");
img1.Height = 300;
img1.Width = 300;
img1.Margin = new Thickness(0, 10, 0, 0);
Image img2 = new Image();
img2.Source = (ImageSource)new ImageSourceConverter().ConvertFromString("Image/Jellyfish.jpg");
img2.Height = 50;
img2.Width = 50;
img2.Margin=new Thickness(0,10,300,0);
canvas.Children.Add(img1);
canvas.Children.Add(img2);
ContentPanel.Children.Add(canvas);
WriteableBitmap wb = new WriteableBitmap(400, 400);
wb.Render(canvas, new MatrixTransform());
MemoryStream ms = new MemoryStream();
wb.SaveJpeg(ms,400,400,0,100);
using (var isoFileStream = new IsolatedStorageFileStream("myPicture.jpg", FileMode.OpenOrCreate, IsolatedStorageFile.GetUserStoreForApplication()))
{
wb.SaveJpeg(isoFileStream, 400, 400, 0, 100);
}
}
When i save the image then i am getting a black screen in isolated storage.
How to save both images on canvas?
Like Stephan said, I think you are not getting the image to your source. Any way I created a sample application for you. In that you can find two partitions, you can add image to that by double tapping on the container. After that try save and check your saved image. I tested the app and every thing is working for me. Still you face any kind of issues please leave a comment.
https://www.dropbox.com/s/1vjbbou96w0r15r/SaveImageApp.zip
Please check weather you are getting image or not to image source. If you are getting the image; try this method to take snapshot from control and save that to Iso store.
http://stackoverflow.com/questions/13837148/how-can-i-take-a-screenshot-full/13990649#13990649
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