Menu
Why the Points AdditiveBlending only works when look from right, not left? Set the depthTest:false will solve the problem, but trigger another problem that the Points overlay other meshes.
<html>
<head>
<title>My first three.js app</title>
<style>
html
,body
{height: 100%;}
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="/lib/threejs/three.js-master/build/three.js"></script>
<script src="/lib/threejs/three.js-master/examples/js/controls/OrbitControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var buffer_geometry=new THREE.BufferGeometry();
var vertices=new Float32Array([
-1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
])
buffer_geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));
var controls=new THREE.OrbitControls(camera, renderer.domElement);
var material = new THREE.PointsMaterial({
color:0x330000,
transparent:true,
// depthTest:false,
blending:THREE.AdditiveBlending,
size:.3,
})
var mesh = new THREE.Points( buffer_geometry, material );
scene.add( mesh );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
951
asked Mar 26 '26 07:03
With Three.Points, the points are rendered in the order they appear in the buffer. If depth-testing is enabled, you may see different results depending on the camera position and view direction.
Since you are using additive blending, a work-around can be to render the points last, and disable depth-write.
var material = new THREE.PointsMaterial( {
depthWrite: false,
blending: THREE.AdditiveBlending
} )
mesh.renderOrder = 999;
three.js r.86
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
