Question

我正在使用带有精灵的粒子，然后绘制一些线条。线条具有透明度，精灵具有Alpha通道。

线条放置在相机附近，而粒子在线条后面。

然而，线条似乎“切穿”了粒子，好像在渲染线条的碎片上......粒子被跳过。

你可以在这里看到一个复制问题的小提琴：http://jsfiddle.net/SimoneGianni/fzsjd1qc/2/

当线条的透明度在0附近下降时，您可以看到背后的背景和球体，就好像那里没有粒子一样。

我做错了什么还是渲染错误？

代码如下：

THREE.ImageUtils.crossOrigin = '';
var container;

var camera, scene, renderer;

var particleSystem;
var line,lineM;

init();
animate();

function init() {

	container = document.getElementById('container');

	camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
	camera.position.z = 350;
    camera.position.y = 35;

	scene = new THREE.Scene();

	raycaster = new THREE.Raycaster();
	raycaster.params.PointCloud.threshold = 3;
	
	var particles = 100;
	var particlesGeometry = new THREE.Geometry();
	var n = 200, n2 = n / 2; // particles spread in the cube

	for (var i = 0; i < particles; i++) {
		var x = Math.random() * n - n2;
		var y = Math.random() * n - n2;
		var z = Math.random() * n - n2;

		particlesGeometry.vertices.push(
				new THREE.Vector3( x, y, z )
		);
	}

	var particlesMaterial = new THREE.PointCloudMaterial({
		map : THREE.ImageUtils.loadTexture('http://i.imgur.com/cxUw2NL.png'),
		size : 70,
		sizeAttenuation : true,
		transparent : true,
		opacity : 0.6
	});
	particleSystem = new THREE.PointCloud(particlesGeometry, particlesMaterial);
	particleSystem.sortParticles = true;
	scene.add(particleSystem);
    
    sphereG = new THREE.SphereGeometry(50);
    sphereM = new THREE.MeshNormalMaterial();
    sphere = new THREE.Mesh(sphereG,sphereM);
    sphere.position.z = -300;
    scene.add(sphere);
    
    lineG = new THREE.Geometry();
    lineG.vertices.push(new THREE.Vector3(-100,30,120));
    lineG.vertices.push(new THREE.Vector3(100,30,120));
    lineM = new THREE.LineBasicMaterial({color: 0xeeeeee, linewidth:50, transparent:true});
    lineM.opacity=0.1;
    line = new THREE.Line(lineG, lineM, THREE.LinePieces);
    scene.add(line);
    
	
	renderer = new THREE.WebGLRenderer({
		antialias : false
	});
	renderer.setSize(window.innerWidth, window.innerHeight);

	container.appendChild(renderer.domElement);

	window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
	requestAnimationFrame(animate);

	render();
}

function render() {
	var time = Date.now() * 0.001;

	particleSystem.rotation.x = time * 0.025;
	particleSystem.rotation.y = time * 0.05;
    
    lineM.opacity = Math.cos(time);
	
	renderer.render(scene, camera);
}

body {
    color: #cccccc;
	font-family:Monospace;
	font-size:13px;
	text-align:center;

	background-color: #050505;
	margin: 0px;
	overflow: hidden;
}

#info {
	position: absolute;
	top: 0px; width: 100%;
	padding: 5px;
}

a {
    color: #0080ff;
}

<body>    
    <div id="container"></div>
    <!--<img src="http://threejs.org/examples/textures/sprites/ball.png"></img>-->
    <script src="http://threejs.org/build/three.js"></script>
</body>

webgl渲染器上的粒子透明度

0 个答案: