Текстура не отображается на карте материалов с тремя точками

#javascript #html #css #three.js

#язык JavaScript #HTML #CSS #three.js

Вопрос:

Я пытаюсь загрузить это изображение в виде карты PointsMaterial с TextureLoader , но безуспешно, оно не выдает ошибок, но текстура по какой-то причине не отображается. Я делаю что-то не так или что?

Код:

 const scene = new THREE.Scene();  const camera = new THREE.PerspectiveCamera(  75,  window.innerWidth / window.innerHeight,  1,  1000 );  const particleBufferGeometry = new THREE.BufferGeometry(); const positionArray = [];  for (let i = 0; i lt; 10000; i  ) {  positionArray.push((Math.random() * 2 - 1) * 200);  positionArray.push((Math.random() * 2 - 1) * 200);  positionArray.push((Math.random() * 2 - 1) * 200); }  particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3));  const particlePointsMaterial = new THREE.PointsMaterial({  size: 0.3,  map: new THREE.TextureLoader().load("./sparkle.png"),  transparent: true, });  const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);  const renderer = new THREE.WebGLRenderer({  antialias: true,  alpha: true,  canvas: document.getElementById("three") });  renderer.setClearColor(0x000000, 0); renderer.setSize(  window.innerWidth,  window.innerHeight );  scene.add(particlePoints);  renderer.render(scene, camera);

1. Похоже, что ваша текстура загружается, но ваши точки настолько малы, что вы не видите деталей. Попробуйте увеличить свои очки.

2. Не помогает, что они все еще невидимы.

Ответ №1:

Другой вариант — использовать цикл анимации:

 body{  overflow: hidden;  margin: 0; }

 lt;canvas id="three"gt;lt;/canvasgt; lt;script type="module"gt; import * as THREE from "https://cdn.skypack.dev/three@0.135.0";  const scene = new THREE.Scene();  const camera = new THREE.PerspectiveCamera(  75,  window.innerWidth / window.innerHeight,  1,  1000 );   const positionArray = []; for (let i = 0; i lt; 10000; i  ) {  positionArray.push(new THREE.Vector3().random().subScalar(0.5).multiplyScalar(400)); } const particleBufferGeometry = new THREE.BufferGeometry().setFromPoints(positionArray);  const particlePointsMaterial = new THREE.PointsMaterial({  size: 3,  map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/spark1.png"),  transparent: true, });  const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);  const renderer = new THREE.WebGLRenderer({  antialias: true,  alpha: true,  canvas: document.getElementById("three") });  renderer.setClearColor(0x000000, 1); renderer.setSize(  window.innerWidth,  window.innerHeight );  scene.add(particlePoints);  renderer.setAnimationLoop(() =gt; { // animation loop  renderer.render(scene, camera); }); lt;/scriptgt;

Ответ №2:

Я понял, почему это происходит. Я передавал текстуру в виде карты до ее загрузки.

Это неправильно.

 const particlePointsMaterial = new THREE.PointsMaterial({  size: 0.3,  map: new THREE.TextureLoader().load("./sparkle.png"),  transparent: true, });

load() функция TextureLoader имеет второй параметр onLoad, который выполняется при загрузке текстуры. Таким образом, решение заключается в:

 new THREE.TextureLoader().load("./sparkle.png", (texture) =gt; {  const particlePointsMaterial = new THREE.PointsMaterial({  transparent: true,  map: texture  });   const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);   scene.add(particlePoints);   renderer.render(scene, camera); });