Three.js中如何渲染Sprite？Sprite不显示问题求解

你的Sprite无法显示的核心问题是正交相机的参数设置错误，导致相机视锥体宽度为0，无法捕捉到任何场景内容。Sprite完全可以独立渲染，以下是修正后的完整实现：

问题分析 #

你初始化OrthographicCamera时传入的参数是(0, 0, w, h, 0, 1000)，其中前两个参数left和right都设为0，意味着相机的水平视场宽度为0，自然看不到任何物体。

修正方案 #

调整相机参数，同时适配左上角为(0,0)的坐标系需求：

完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<body id="body">
  <canvas id="main"></canvas>  
</body>

body {
  margin: 0;
  padding: 0;
  border: 0;
}

const canvas = document.getElementById('main');

const w = 200;
const h = 200;

const scene = new THREE.Scene();
// 修正正交相机参数：left, right, top, bottom, near, far
const camera = new THREE.OrthographicCamera(0, w, h, 0, 0, 1000);
const renderer = new THREE.WebGLRenderer({canvas});

scene.background = new THREE.Color(0xffff00);
renderer.setSize(w, h);
const sprite = createSprite(w, h);
scene.add(sprite);

// 调整相机位置并指向场景中心
camera.position.set(w / 2, h / 2, 500);
camera.lookAt(w / 2, h / 2, 0);

function createSprite(w, h) {
  const material = new THREE.SpriteMaterial({ color: 0xff0000 });
  const sprite = new THREE.Sprite(material);
  // Sprite位置设为画布中心，确保填满整个画布
  sprite.position.set(w / 2, h / 2, 0);
  sprite.scale.set(w, h, 1);
  return sprite;
}

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

关键调整点 #

• 相机参数修正：将OrthographicCamera的参数改为(0, w, h, 0, 0, 1000)，这样坐标系的左上角为(0,0)，右下角为(w,h)，符合你的需求。
• 相机位置调整：将相机放在(w/2, h/2, 500)的位置，确保能完整覆盖场景视口，同时通过lookAt指向场景中心，保证物体正确显示。
• 画布尺寸匹配：将w和h改为你原本计划的200，让Sprite填满整个画布。

内容的提问来源于stack exchange，提问作者Agendum