I'm trying to update an image in a material of a pre-loaded .js model - i want it to have the same properties, whereas only the image is changed.
Was trying to use this post as a reference, but in the .js model file, the map appears as the "mapAmbient" property. I was thinking of somehow using the THREE.ImageUtils.loadTexture() function, but couldn't find where exactly it should be placed.
Moreover, the texture should be loaded using an Image() object generated using another canvas. Any help would be appriciated
*Edit:
Wasn't able to find actual way to change that property in runtime, but was able to change the image using base64 encoding:
//img is base64 encoded image
var tex = new THREE.ImageUtils.loadTexture(img);
currentMesh.material.materials[1].map = tex;
Related
While loading markups, I am not able to get markups array from markup extension as referneced in below code, actually I need client position coordinates of the loaded markup. In below code am getting markups array empty. But while drawing a new markup, we always have markup array filled.
Please advise
markup.viewer.restoreState(viewState);
markup.loadMarkups(svgTxt, "layerName")
var pos = markup.markups[0].getClientPosition()
Since you're not editing the layer you specified, the markupExt.markups will not contain anything. Please use this instead:
const activeLayerMarkup = markupExt.svgLayersMap[markupExt.activeLayer]
activeLayerMarkup.markups[0].getClientPosition()
Or try to edit the layer
markupExt.loadMarkups(svgTxt, 'layerName')
markupExt.enterEditMode('layerName')
markup.markups[0].getClientPosition()
Dear all I am using angular 2.4.10 and three js 0.85.0. After downloading a JSON file from the server, I have at my disposal the following JSON object:
https://drive.google.com/file/d/0B7IcIHZN137RdmVRTXpLZmlPaDg/view?usp=sharing
I am trying to load the object without using the loader URL using the following code suggested in another StackOverflow post:
loadModel(aJSONObject) {
console.log(aJSONObject);
let loader = new THREE.ObjectLoader();
let model = loader.parse( aJSONObject );
console.log(model);
.....
}
and it's working but it is not getting the materials. How can I get the material from the JSON file?
I tried to load your model and the unique material got imported correctly.
However, there is no texture nor color defined for this material in the JSON model. So the object will look white, the default color used for three.js materials.
Fiddle here.
To see your model in three.js make sure to scale it appropriately based on you camera position (I had to scale it down).Moreover, as the model is using a THREE.MeshPhongMaterial, don't forget to add some lights.
By the way, there are some X, Y and Z individual attributes defined in your model that increase its size uselessly (three.js won't use them).
I am studying HTML5. I want to create / draw some shapes in canvas and save it in MySQL database and restore it in the canvas itself.
I followed this tutorial
And saved the data in database. I got this in my database column
data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAEAUlEQVR4nO3dv48VVRgG4DcRtjEWJBQbOhortYQ%2FASOtyWpCBQkWFtQm1jTGnlBQEV2NCTWVfwCVNiRsZSwwuFRsRAJ7sbjBrLkz98cyO9%2Bc%2BDzJtJv3NPvmzHfO3AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOL7tJLMkr3ue2ZHneZL7NTEBmJLt9BfHps%2BbkjlM8jTJlRHXAcCIhiyPTUtmluQgyb0TXyUAg%2Bp7ZTXreMYumTc5bp7Y6gE4lr5S2N7gb9zPfB4yRtE8Pu5CARhW1z%2F7TcpjXVcyn4UcZpiSmSU5cwI5AdjA0Z3DSZTHJu5lPg8ZcjczS7I35iIAmIYzGfa12KskO6OuAIByjzP8gH6W5GWSJ0lujbcUACrcTPcpsZM6OTZL8mCUlQEwKTuZD%2FCH2rk8S3Ju1BUAMAl7GXZ3cmPc%2BABM0a3M5yEvs%2FlrsKMzlf3M78hcGDc%2BAFNzI8OeBpvFN8IA%2FnfOZT4HUSQAvJUHGeZ2vSIB4F8XMp%2BF7Ge9uYoiAWCpq1EkALyFdYrkWlk6ACZvVZG8TrJblg6AyVunSH4rSwfA5H2Z1UXyd5KzVQEBmLazSV5k9RHgO1UBAZi%2B37P6PslhkttVAQGYtt2sdzlRmQDQ6VrWvwE%2FS%2FJ%2BTUwApux21vvNk2dVAQGYvnXK5GFZOgCacCfLX3PdrYsGQAu%2ByPIdydW6aAC04G6WD9o%2FqosGQAsepr9IHhXmAqARy35Z8XphLgAa8EH6B%2B0HhbkAaMSP6d%2BNfF%2BYC4BGHKR%2FyP5eYS4AGnA9%2FbuRrcJcADTiUbp3IkoEgJU%2BjBIB4Ji20n1S693KUAC0oa9EzleGAqANW%2BkerF%2BuDAVAG%2FpK5KvKUAC0Yz%2BLJfJDaSIAmvFrFkvkl9JEADTjpyyWyJ%2BliQBoxtfpvityqjIUAG24nO7h%2BqXKUAC04Xy6S%2BS7ylAAtOF0kldZLJEXSd4pzAVAI3azWCKHSS5WhgKgDZfS%2FfmTbypDAdCGU0meZ7FEnsQXfQFYw7fpnot8XBkKgDZcTPeAfS%2FJ54W5AGjA6SR%2FpPu476eFuQBoxCdJ%2Fsp%2FC2SnNBEAzdjK%2FLjvz0k%2BK84CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADABv4B7KWsU334yWgAAAAASUVORK5CYII%3D
In one of my page I just need to render the saved image in a canvas...
Anyone please advice ?
the src attribute of an image can be a data-url - base64-encoded binary image data. The function canvas.toDataURL(); converts the content of the canvas to such a data URL. The code in the tutorial you posted then runs it through the encodeURIComponent function to get it into an ajax-friendly format.
When you retrieve that string from the database later, you need to run it through decodeURIComponent (this will replace %3A with :, %2F with a / and so on to turn it back into a syntactically correct data-url) and then assign the resulting string to a new Image() element. You should then be able to draw this image to a canvas.
I'd like to copy ALL contents of one canvas and transfer them to another all on the client-side. I would think that I would use the canvas.toDataURL() and context.drawImage() method to implement this but I am running into a few issues.
My solution would be to get Canvas.toDataURL() and store this in an Image object in Javascript, and then use the context.drawImage() method to place it back.
However, I believe the toDataURL method returns a 64 bit encoded tag with "data:image/png;base64," prepended to it. This does not seem to be a valid tag, (I could always use some RegEx to remove this), but is that 64 bit encoded string AFTER the "data:image/png;base64," substring a valid image? Can I say image.src=iVBORw...ASASDAS, and draw this back on the canvas?
I've looked at some related issues:
Display canvas image from one canvas to another canvas using base64
But the solutions don't appear to be correct.
Actually you don't have to create an image at all. drawImage() will accept a Canvas as well as an Image object.
//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);
Way faster than using an ImageData object or Image element.
Note that sourceCanvas can be a HTMLImageElement, HTMLVideoElement, or a HTMLCanvasElement. As mentioned by Dave in a comment below this answer, you cannot use a canvas drawing context as your source. If you have a canvas drawing context instead of the canvas element it was created from, there is a reference to the original canvas element on the context under context.canvas.
Here is a jsPerf to demonstrate why this is the only right way to clone a canvas: http://jsperf.com/copying-a-canvas-element
#robert-hurst has a cleaner approach.
However, this solution may also be used, in places when you actually want to have a copy of Data Url after copying. For example, when you are building a website that uses lots of image/canvas operations.
// select canvas elements
var sourceCanvas = document.getElementById("some-unique-id");
var destCanvas = document.getElementsByClassName("some-class-selector")[0];
//copy canvas by DataUrl
var sourceImageData = sourceCanvas.toDataURL("image/png");
var destCanvasContext = destCanvas.getContext('2d');
var destinationImage = new Image;
destinationImage.onload = function(){
destCanvasContext.drawImage(destinationImage,0,0);
};
destinationImage.src = sourceImageData;
I have image as Bitmap:
var bitmapImage:Bitmap=getDefaultImage();
I need to set this bitmap as canvas backgroundImage.
I find method
myCanvas.setStyle("backgroundImage",url);
But i dont need url. Whent i do this:
myCanvas.setStyle("backgroundImage",bitmapImage);
I have an error.
How to set bitmap image in canvas background?
I am not sure if this is possible... You see, setStyle and getStyle in AS3.0 both work on CSS base. And in CSS there is nothing like Bitmap, just URLs, URIs, numeric, string and type values... Nothing for byte data.
So - either you use your Canvas wrong (don't use it at all maybe?), or, if you really need to use the setStyle method for this, you will have to use the URL... However, I think it might be possible to embed the file into the SWF... Not just with the Embed directive, but something like Flex project. It might be possible to address the file with local URL such as "myBitmap.png".