三角形中圆形粒子的方形纹理

Question

我在three.js中正确渲染粒子时遇到了问题。我试图关注this tutorial来设置粒子。不幸的是，当它们正确放置并显示时，它们显然是矩形的，而不是圆形的。 这是材料的代码

var texture = new THREE.TextureLoader().load(   
"textures/disc.png",
function(texture) {

  var material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 16,
    map: texture,
    transparent: true,
    blending: THREE.AdditiveBlending,
  });

  particles = new THREE.Points( geometry, material );
});

和here是一支带有完整代码的笔。

老实说，当它在教程中的示例中完美运行时，他们不知道为什么他们会这样渲染。

Answer 1

问题是雾被添加到粒子中。在fog

中将false设为PointMaterial

var scene,
		camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
		renderer, container;

function createScene() {
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

  scene = new THREE.Scene();

  scene.fog = new THREE.Fog(0xf7d9aa, 100, 950)
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
  	fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );

  camera.position.x = 10;
  camera.position.z = 290;
  camera.position.y = 25;

  renderer = new THREE.WebGLRenderer({
  	alpha: true,
    antialias: true
  });

	renderer.setClearColor(new THREE.Color(0, 0, 0));
  renderer.setSize(WIDTH, HEIGHT)
  renderer.shadowMap.enabled = true;

  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', handleWindowResize, false);
}

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}


var hemisphereLight, shadowLight;

function createLights() {
}

var sphere;
function createSphere() {
	var geometry = new THREE.SphereGeometry( 150, 32, 32 );
	var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
	sphere = new THREE.Mesh( geometry, material );
	sphere.visible = false;
	scene.add( sphere );
}

function createParticles() {
    var loader = new THREE.TextureLoader();
    loader.crossOrigin = '';
	var texture = loader.load(  	
  	"https://i.imgur.com/9fW07EI.png",
    function(texture) {
      editGeometry = sphere.geometry;
      var geometry = new THREE.Geometry();
      for ( i = 0; i < editGeometry.vertices.length; i ++ ) {

        geometry.vertices.push(editGeometry.vertices[i]);

      }

      var material = new THREE.PointsMaterial({
        color: 0xFFFFFF,
        size: 16,
        map: texture,
        transparent: true,
        blending: THREE.AdditiveBlending,
        fog: false,
        depthTest: false,
      });

      particles = new THREE.Points( geometry, material );
      particles.sortParticles = true;
      scene.add( particles );
  });
}

function loop() {
  renderer.render(scene, camera);
	requestAnimationFrame(loop);
}


function init() {
	createScene();
	createLights();
	createSphere();
	createParticles();
	loop();
}
init()

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<div id="world">
</div>

请注意，如果您的图片与您的网页不在同一个域中，那么您不能在WebGL中使用该图像，除非您同时请求跨源访问和服务该图像的服务器授予权限。

我通过将代码更改为此

来更改代码以请求跨源访问

    var loader = new THREE.TextureLoader();
    loader.crossOrigin = '';
    var texture = loader.load(...

但这只是两个必要步骤中的第一步。 postimg.org服务器未授予该图像权限。 imgur的服务器确实。

我也关闭了depthTest否则前面绘制的点会阻挡后面绘制的点，因为你正在绘制透明度和添加剂混合，这可能是你想要的。

Answer 2

这对我不起作用，也许我使用了 ShaderMaterial ，但是String v = globals.get("getSubtitle").invoke().toString();有用。

depthTest: false