threejs sprite

// threejs sprite 示例代码

// 引入 Three.js 库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个纹理加载器
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/happy.png');

// 创建精灵材质
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });

// 创建精灵
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(2, 2, 1); // 设置精灵的大小

// 将精灵添加到场景中
scene.add(sprite);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

解释说明：

1. 引入 Three.js 库：通过 import 语句引入 Three.js 库。
2. 创建场景、相机和渲染器：分别创建了 Scene、PerspectiveCamera 和 WebGLRenderer，并将渲染器的 DOM 元素添加到页面中。
3. 加载纹理：使用 TextureLoader 加载一张图片作为精灵的纹理。
4. 创建精灵材质：使用加载的纹理创建 SpriteMaterial。
5. 创建精灵：使用 Sprite 创建一个精灵，并设置其大小。
6. 将精灵添加到场景中：将创建的精灵添加到场景中。
7. 渲染循环：通过 requestAnimationFrame 实现一个简单的渲染循环，不断更新并渲染场景。