javascript - three.js 中圆形粒子的正方形纹理

Question

我无法在 three.js 中正确渲染粒子。我正在尝试关注 this tutorial设置粒子。不幸的是，虽然它们被正确放置和显示，但它们显然是矩形的，而不是圆形的。 这是 Material 的代码

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

问题是雾被添加到您的粒子中。在 PointMaterial

中将 fog 设置为 false

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();
    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/r123/three.min.js"></script>
<div id="world">
</div>

请注意，如果您的图像与您的网页不在同一个域中，则您不能在 WebGL 中使用该图像，除非您都请求跨源访问并且提供该图像的服务器给予许可。

此外，除非服务器发送 CORS header 以获得使用图像的权限，否则您不能使用来自第三方域的图像。 postimg.org 服务器未授予图像许可。 imgur 的服务器做到了。

您还必须关闭 depthTest，否则前面绘制的点最终会挡住后面绘制的点。由于您正在使用透明度和添加混合进行绘图，这可能就是您想要的。