为什么在Three.js中为PointsMaterial设置纹理，使得效果出现在整个材质上而不是点上？

Question

我使用的是Three.js PointsMaterial，想给它添加纹理样式，但是我发现纹理样式效果是显示在整个材质上，而不是点上。我使用的Three.js版本是： 0.164.1.谁能告诉我问题是什么，谢谢。

这是我的代码：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.set(0, 0, 10);
scene.add(camera);

const sphereGeometry = new THREE.SphereGeometry(3, 30, 30);

const texture = new THREE.TextureLoader().load("./textures/particles/2.png");

const pointsMaterial = new THREE.PointsMaterial({
  size: 0.03,
  color: 0xfff000,
  wireframe: true,
  sizeAttenuation: true,
  map: texture,
  alphaMap: texture,
  transparent: true,
  depthWrite: false,
  blending: THREE.AdditiveBlending,
});

const points = new THREE.Points(sphereGeometry, pointsMaterial);

scene.add(points);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;


document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const clock = new THREE.Clock();

function render() {
  let time = clock.getElapsedTime();
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();


window.addEventListener("resize", () => {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
});

我使用的纹理图像： “./textures/articles/2.png” 我的代码运行效果： 在此输入图片描述 我期望的效果： 在此输入图片描述

Answer 1

您不能只绘制原始几何图形。我明白你的意思，但如果你这样做，正如你所看到的，纹理将覆盖所有几何体。通常，您需要使用自定义几何体或修改原始几何体的UV坐标，您需要计算或调整UV坐标。您可以使用

BufferGeometry

，其中每个顶点都可以有自己的位置、颜色和纹理坐标。改变平面上的球体，这样会更明显。

比如看这个例子，来自官方文档，做了一些调整。

https://thirdjs.org/docs/#api/en/core/BufferGeometry

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
] );
const indices = [
    0, 1, 2,
    2, 3, 0,
];
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://pixabay.com/get/g3408026987700e0dbdf4885995c626b42c1241b80235dc52157e542b76ac61e0435fb29dc949f14d11005a361d71eb92_640.png');
const material = new THREE.PointsMaterial( { map: texture } );
const points = new THREE.Points( geometry, material );
scene.add( points );