In Forge Viewer I added and I tried to set color for THREE.PlaneBufferGeometry to #384c70 and as Material I used THREE.MeshPhongMaterial(). But there is a problem because that Color is transparent. If I used the same Color in THREEjs sandbox then it was right without transparent. Where is a problem?
I don't need transparent color. This error is also present for other colors not for all.
Thanks.
There is a example of my code:
this.viewer.overlays.addScene("custom-scene");
let plane = new THREE.PlaneBufferGeometry(100, 100);
let material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color("#384c70");
material.side = THREE.DoubleSide;
let mesh = new THREE.Mesh(plane, material);
mesh.position.set(0, 0, 0);
this.viewer.overlays.addMesh(mesh, "custom-scene");
this.viewer.impl.sceneUpdated(true);
This is a kind of a weird bug in Forge Viewer when using a certain kind of color in an overlay. The reason is - the overlay rendering pipeline uses a custom shader logic for turning a specific range of colors into a see-through selection highlight.
It's definitely something the viewer needs to fix but in the meantime, I'd suggest avoiding the overlays and adding your custom geometry using ModelBuilder instead.
Related
I am working on a project that uses three.js and I am using an orthographic camera. I have tried using an external MeshLine package and also the built in THREE.LineGeometry. The MeshLine has a known issue with orthographic cameras that has not been fixed and this THREE.LineGeometry (which I am focused on trying to get to work) seems to also have a problem when I use an orthographic camera. The line sort of takes its shape but it is as wide as the entire viewport, and I am not sure why it is doing this or if I can fix it with a property.
I am looking for either a solution to one of the line types I listed or any other working 2D line solutions for three.js.
This is an image of a THREE.LineGeometry that is supposed to be just a diagonal line. Those grey arrows are a part of my project, and are supposed to be there (my concern is that the line is large and clips through them currently).
Here is my code:
var lineGeometry = new LineGeometry();
lineGeometry.setPositions([0,0,0,1,0,1,2,0,2,3,0,3]);
lineGeometry.setColors([0,0,255,0,0,255,0,0,255,0,0,255]);
console.log(lineGeometry)
var lineMaterial = new LineMaterial({
color: 0xffffff,
vertexColors: true,
dashed: false,
lineWidth: 1,
});
var myLine = new Line2(lineGeometry, lineMaterial);
myLine.computeLineDistances();
this.Scene.add(myLine);
When using the LineGeometry in three.js, make sure to also set the viewport size for the line material shader either in the update loop or on window resize.
myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);
I'm trying to add custom geometry to my forge viewer, following this example. It mostly works fine, except when using certain colors.
I'm using the following code to add a sphere mesh:
const geometry = new THREE.SphereGeometry(0.4, 32, 32)
const material = new THREE.MeshBasicMaterial({
color: someColor,
transparent: false,
})
const sphere = new THREE.Mesh(geometry, material)
viewer.overlays.addScene('sphere-mesh-scene')
viewer.overlays.addMesh(sphere, 'sphere-mesh-scene')
for certain values of someColor the sphere is transparent, for other values, it's not:
e.g.
#6b6e75 and #54ffff yields a transparent sphere,
while
#000000 and #988888 yields an opaque sphere.
Is there any material properties I need to set to avoid this? Or do I need to deal with the material manager in forge?
I'm using forge viewer version 7.14.0.
Edit
I also get the same result for point clouds - with a point cloud with many different colors, some of the points are transparent, and get a "glowing outline" against the Forge geometry.
This is happending because by default the blend shader determines if it should add transparency (to selected nodes for instance) by its hue color in the overlay...
We can suppress this behavior by turning useIdBufferSelection in the initOptions like below when calling viewer.start/loadModel(svf,options,cb,cb,cb,initOptions):
viewer.loadModel(svf,null,null,null,{useIdBufferSelection:true});
See live demo here
I'm trying to set a texture to an already existing mesh like this:
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
(The source a HTML5 canvas and that part works ok.)
...
mesh.material[0].map = texture;
I can change the material color without any problems, but setting the texture doesn't change anything. I guess this is not how changing the texture should be done..? I'm using MeshPhongMaterial.
So, long story short: I want to be able dynamically change a texture of an mesh.
Edit:
I'm trying to set the texture to one of the materials of a Collada model that is loaded. By using dev tools I can see that the texture is there in the object, but it is just not visible. I can change the color of the same material without any problems. Sometimes I can see the texture appearing with wrong colors after a very long idle time (which is weird).
So, the scene include an earth spinning on its axis, a moon rotating around the earth, and a light source to the right that will help to simulate the effect of an eclipse. I thought it would be easy because we've done shadows and transformations before but I ran into a problem.
In our template we have the following at the top:
// For the assignment where a texture is required you should
// deactivate the Detector and use ONLY the CanvasRenderer. There are some
// issues in using waht are called Cross Domain images for textures. You
// can get more details by looking up WebGL and CORS using Google search.
// if ( Detector.webgl )
// var renderer = new THREE.WebGLRenderer();
// else
var renderer = new THREE.CanvasRenderer();
My problem is, when I leave it like that, the spotlight doesn't appear on the scene. However, as was warned, if I activate the Detector, the textures won't work.
But I need both textures and the spotlight. How do I work around this?
You are confusing yourself. Detector.webgl only checks for support of WebGL on the browser. The code below uses the WebGL renderer if the current browser supports WebGL and CanvasRenderer if there is no WebGL support.
if ( Detector.webgl )
var renderer = new THREE.WebGLRenderer();
else
var renderer = new THREE.CanvasRenderer();
With WebGL - loading textures will run into a cross domain issue. Best to then execute the code either on a web server or a local server like http://www.wampserver.com/en/ for Windows or https://www.mamp.info/en/ for Mac. Or npm-package like https://github.com/tapio/live-server.
As far as I know shadows are not supported on the CSSCanvasRender. I would ask your assignment head to clarify.
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.