I am trying to simply change the colour of a model in autodesk forge. I am using the following code.
Creation of the material
var material = new THREE.MeshPhongMaterial
({
color: new THREE.Color("rgb(255, 0, 0)"),
transparent: false
});
Adding it to the list of materials
materials.addMaterial(
'NewMaterial',
material,
true)
Line of code that actually sets the material
fragList.setMaterial(fragId, material);
This works almost perfectly. The colour of the model changes to red as it should but as you move the view around, what looks like the underlying grey of the model seems to be showing through the red like its clipping through in certain areas.
I have been through https://threejs.org/docs/#api/materials/MeshPhongMaterial and messed with a bunch of properties of the material and while they changed the look of the material especially the lighting properties however nothing would stop the grey clipping through. Any suggestions on what could be causing this or where to look would be appreciated
Not sure if there is a down side to using this method but I used the setThemingColour that was demonstrated in the easter code sample.
https://forge.autodesk.com/blog/happy-easter-setthemingcolor-model-material
var red = new THREE.Vector4(1, 0, 0, 0.5);
viewer.setThemingColor(dbId, red);
Changed the colour, doesnt show through other models like overlays and doesnt have the clipping issue I had.
use this extension from Autodesk forge instead of working on three.js directly.
https://forge.autodesk.com/cloud_and_mobile/2015/12/change-color-of-elements-with-view-and-data-api.html
It is very simple, you just have to write few lines:
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Color');
viewer.setColorMaterial([objectIds],colorcodes);
Related
We are using forge viewer to display Revit files. We want to display a custom image as background. We tried different options. However, the image is rotating and we don't want the custom image to rotate. Would it be possible to add the custom image using code to the Environment and avoid rotating? We also tried using three.js mesh. It displays the image but the image is rotating. What can we do to avoid the custom image from rotating?
Thank you for your help.
The following is our sample code using Mesh. It displays the image but it rotates.
const imgTexture = THREE.ImageUtils.loadTexture('images/bsd-speclink-logo.jpg')
var transparentMaterial = new THREE.MeshBasicMaterial({
map: imgTexture,
color: 0xffffff,
opacity: 0.1,
transparent: true
})
viewer.impl.matman().addMaterial('transparent',transparentMaterial,true)
var geometry = new THREE.PlaneGeometry(50, 40, 40, 40);
var mesh = new THREE.Mesh(geometry, transparentMaterial)
mesh.position.set(60, -60, 0);
viewer.impl.scene.add(mesh)
viewer.impl.invalidate(true)
See this blog post here to set the canvas transparent so you can slip in a background underneath.
Or try the skybox workaround here to emulate background in the canvas.
Cesium has the ability to make circles (such as by creating an Entity with ellipse defined, for one), and arcs (polylines). But I haven't been able to find the way to create partial, filled-in, circles.
We use Cesium to display bar charts and other report details overlaid on a map.
We now have a request to display pie charts over the map. To do this, we'd need to be able to create, say, 50%, 30%, 20%, or some other arbitrary percentage of a circle, filled in with a given color. Is there a way to do this in Cesium?
I could just create an arc and two connecting lines, to create a partial circle outline, but I can't find a way to create a partial circle with a fill color (similar to what EllipseGraphics itself allows for.)
As of version 1.62, CesiumJS includes modifications I made to allow drawing partial ellipsoids. You should be able to leverage this to get what you want. For example,
let viewer = new Cesium.Viewer('cesiumContainer');
viewer.entities.add({
name: 'Pie piece',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
innerRadii: new Cesium.Cartesian3(1, 1, 1),
minimumClock: Cesium.Math.toRadians(0),
maximumClock: Cesium.Math.toRadians(270),
minimumCone : Cesium.Math.toRadians(89.8),
maximumCone : Cesium.Math.toRadians(90.2),
material: Cesium.Color.RED,
}
});
I'm having difficulty with transforming colour in Flash. It should be easy I think, but for some reason my code isn't working as expected.
I have a bitmap graphic consisting of a colour spectrum from red to yellow to green (you know, like you see in an audio level meter).
I simply want to sample a colour from that bitmap and then tint a movie clip on stage that sampled colour. (the effect I'll be going for is coloured progress - the closer you get to 100% green is displayed, the closer you are to 0% it's red - I haven't implemented that part yet, but I'm not worried about that).
Anyhow, I sample the colour just fine, and tint my clip, but no matter what I tint the clip it comes up a different colour than what I've sampled (the trace is a different colour than what I see on the clip). I can't see where I'm going wrong - I'm hoping it's a stupid mistake and someone can spot it easily.
import flash.display.BitmapData;
var bmd:BitmapData = new BitmapData(mc_colourbar.width, mc_colourbar.height);
bmd.draw(mc_colourbar);
var pixelvalue:uint = bmd.getPixel(0, 1);
trace(pixelvalue.toString(16));
var colourtransform:ColorTransform = mc_box.transform.colorTransform;
colourtransform.color = uint("0xff" + pixelvalue);
mc_box.transform.colorTransform = colourtransform ;
mc_box is the clip on stage I'm trying to tint - it's simply a white square.
Any help is appreciated, thanks in advance!
ColorTransform.color expects an RGB value, and it appears as though you're attempting to give it an ARGB value*.
Change the line:
colourtransform.color = uint("0xff" + pixelvalue);
to just:
colourtransform.color = pixelvalue;
and your code should work as expected.
*Though I don't think the way you're trying to do it here is correct.
I am using Primefaces barChart in one of my projects where in a small area I need to display a chart that contains multiple data points. When the chart is rendered, the bars become very thin, which is ok for me. However, there are shadows of each of the bars that look confusing on the chart.
Is it possible to disable shadows in Primefaces charts?
The bar chart has a 'shadow' attribute. Setting it to false should make the shadow dissapear.
However, at least in version 3.1.1 I was not able to make the shadow dissapear using this attribute, it seems that it doesn't work. If you have the same issue, add the following style to your css file:
.jqplot-series-shadowCanvas {
display: none;
}
It hides the shadows of bar chart (and probably the shadow of other charts too, I haven't tested it).
I know that it is an old question but for anyone else looking for help here you can do:
BarChartModel barChartModel = new BarChartModel();
barChartModel.setShadow(false);
It work also with linecharts:
LineChartModel result = new LineChartModel();
result.setShadow(false);
and should work with other kinds of charts as well.
I've two different stages on top of another.
And, I'm adding layers to them and placed two image objects.
Now, I've given "click" event to those image objects.
However, since recently added layer is on top of other layers, Only top layer is triggering the events.
Problem : Clicking on purple indicator , I'm getting the alert. But, yellow indicator does not trigger any event since it is behind the layer.
(Check JSFiddle Link which is provided at the bottom)
How to overcome this issue..?
Here is the code sample that I'm using to add & position the image.
Working JS Fiddle Link : http://jsfiddle.net/v4u2chat/aqf9Y/8/
NOTE : Use the Slider to change the position of the image.
Image Positioning Code
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}
Thanks **Steve** for your input.
The actual problem lies in Stage. I'm using two different stages which is not required.
Now, I changed my code to single Stage and it works like charm :)
Layer will not occupy the whole canvas area. It'll occupy only the area of the shape for which we have created the layer. So, No fuss or problem with Layers.
Updated JS Fiddle can be found from the below mentioned link.
http://jsfiddle.net/v4u2chat/aqf9Y/9/