I want to make a glowing circle, and I want to use CylinderGeometry to achieve the effect.
I created a CylinderGeometry mesh and made it transparent, but found that there is a vertical line.
Not sure what the reason is?
The link below is an example
var geometry = new THREE.CylinderGeometry( 1, 0.5, 1, 16 );
const sideMaterial = new THREE.MeshBasicMaterial({
color: 0x00ff00,
transparent: true,
opacity: 0.6,
side: THREE.DoubleSide,
});
const alphaMaterial = new THREE.MeshBasicMaterial({
transparent: true,
opacity: 0.0,
side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh( geometry, [sideMaterial, alphaMaterial, alphaMaterial] );
scene.add(mesh);
console.clear();
var scene, camera, renderer, controls;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
renderer = new THREE.WebGLRenderer({
antialias:true
});
renderer.setSize(
window.innerWidth,
window.innerHeight
);
document.body.appendChild( renderer.domElement );
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
light = new THREE.AmbientLight(0x222222);
scene.add(light);
// create Mesh
var geometry = new THREE.CylinderGeometry( 1, 0.5, 1, 16 );
const sideMaterial = new THREE.MeshLambertMaterial({
color: 0x00ff00,
transparent: true,
opacity: 0.6,
side: THREE.BackSide,
});
const sideMaterial_2 = new THREE.MeshLambertMaterial({
color: 0x00ff00,
transparent: true,
opacity: 0.6,
side: THREE.FrontSide,
});
const alphaMaterial = new THREE.MeshBasicMaterial({
transparent: true,
opacity: 0.0,
side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh( geometry, sideMaterial );
scene.add(mesh);
var mesh_2 = new THREE.Mesh( geometry, sideMaterial_2 );
scene.add(mesh_2);
const planeGeometry = new THREE.PlaneGeometry( 1000, 1000 );
planeGeometry.rotateX( - Math.PI / 2 );
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff
});
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
scene.add(plane)
plane.position.y = -1;
camera.position.z = 2;
controls = new THREE.OrbitControls(camera);
};
var animate = function () {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, controls.object );
};
function onWindowResize() {
var w = window.innerWidth;
var h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
}
window.addEventListener('resize', onWindowResize);
//Init our scene
init();
animate();
I think that the line is created from the light and the position of the camera, for example, if you change the position of the camera, something like that camera.position.x = 10 you can see that the line is not there, and it appears only if you move the object.
Looks like a sorting issue to me, while objects are sorted to some degree in render order for correct blending, the individual faces on the geometry canβt be, their order is only the fixed order they have in the buffer.
If you set depthTest to false the issue disappears.
2 Likes
But I want to put the object inside to achieve the effect that the object is glowing
If depthTest = false , the object path becomes weird
If the Mesh is turned to an angle where no lines can be seen, then, using the lookAt(camera.position), It seems to solve.
You should be using depthWrite instead of depthTest.
const sideMaterial = new THREE.MeshBasicMaterial({
color: 0x00FF00,
transparent: !0,
opacity: 0.6,
side: 2,
depthWrite: !1 });
sideMaterial.renderOrder = -1; // DELETE this line
const alphaMaterial = new THREE.MeshBasicMaterial({ visible: !1 });
You can either set depthWrite: false to false or depthTest: false, both cases prevent it from conflicting with itself, and with depthWrite to false you can put your cube inside.
1 Like
