I have two renderer in one canvas as, I want that renderer to be transparent I applied this below code. but it didn't work out. could anybody help me out?
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x000000, 0 );
Don't use setClearColor if you want a transparent background. It overrides alpha, which is what makes the background transparent. EDIT: Using setClearColor with the WebGLRenderer.alpha property is fine. Just remember to include an alpha parameter if you want the background to be transparent: renderer.setClearColor( hexColor, alphaValue );
I don't understand what you mean by "two renderer in one canvas" though. That sounds dangerous, at best. If you're trying to draw two things to the same canvas, consider combining them into one scene, or render two scenes using the same renderer.
(This also has nothing to do with TrackballControl.)
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);
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.
I get ugly shadow artifacts on my 3D model of a furniture module. They appear where two planes are connected. In these places there should be no shadows at all.
Screenshot with shadow artifacts
I played around with shadow.bias, but without a nice result.
Is there anything else I can try to get rid of these shadows?
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
My code on Plunker
Update 2018-04-18
I updated my code on Plunker as WestLangley suggested. The only thing that seems to have an impact is the value for bias.
I'm not happy with the result, when I set bias = -0.0018. With a negative bias all the shadows aren't in the right place anymore.
I don't think the problem is self-shadowing. The shadows are casted by the nearby objects and not by itself.
Example with simple cubes on jsfiddle
Screenshot with shadows
Probably I have to live with this issue and the only solution is a trade-off with bias.
With side: THREE.FrontSide and shadowSide: THREE.FrontSide on the material and shadow.bias = -0.004 on the light I get a nice result.
I updated my plunker
I'm trying to render a scene and then have a half-transparent post-processing effect rendered on top of it. I'd like to make it work with effect composer so I can later use more passes easily.
My basic structure is this:
composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass
copyPass has renderToScreen = true, transparentPass is my custom fragment shader with each pixel's alpha is set to 0.5 and loaded with ShaderPass.
I've tried blending, depthTest and transparent for the shaderMaterial.
Also tried alpha and premultipliedAlpha options for renderer, autoClear off.
I'm getting either the scene from renderPass with nothing else or the transparentPass on any renderer.clearColor I choose. Not the composite of both. What do I need to set to make this work?
Thank you.
EDIT:
Here is a codepen example:
http://codepen.io/Eskel/pen/PzaOWb?editors=0010
And the code of my shader:
http://eskel.cz/js/three79/RGBAShader.js
It shows all white (and not a rotating cube underneath) even though all pixels are rendered with alpha channel set to 0.5. Should I mix it with the tDiffuse render target in the shader or is there a way to make the shaderPass transparent?
It's a really late response, but maybe it would help someone.
In constructor ShaderPass creates internal ShaderMaterial and we should set this material's transparency to true:
copyPass.material.transparent = true
I'm having an issue rendering sprites using Three.js, to complicate the issue further I'm using a game engine voxel.js to manage the instance.
Example: http://christopherdebeer.com/sandbox/voxeljs/
I've tried messing with depth{write|test}:
material = new game.THREE.SpriteMaterial({
map: spriteB,
useScreenCoordinates: false,
alignment: game.THREE.SpriteAlignment.bottomCenter,
color: 0xffffff,
fog: true,
depthWrite: true,
depthTest: false
});
for the semi transparent meshes on the left of the example.
What I need is a transparent mesh or voxel to give a volume of space some substance while displaying a 2d sprite at that position.
How can I solve this issue, or what am I doing wrong?
This is almost exactly a year after you needed it, but #WestLangley described how sprites are rendered last and thus do not play well with transparent objects. He provides some tips on working around this.
three.js - cannot view a sprite through a mesh with transparency?
It seems to be an alpha test missing to me: try to add the parameter alphaTest: 0.5 to the parameters you pass to the SpriteMaterial and see if it helps (try with depthTestset to true)