Three.js-实现加载图片并旋转

在Three.js中，要实现加载图片并旋转，你可以使用THREE.TextureLoader来加载图片，并创建一个THREE.Mesh使用THREE.PlaneGeometry和THREE.MeshBasicMaterial，其中THREE.MeshBasicMaterial使用了加载的纹理。然后，你可以通过设置mesh.rotation的属性来旋转网格。

以下是一个简单的例子：

// 初始化Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 加载图片
const loader = new THREE.TextureLoader();
loader.load('path/to/your/image.jpg', function(texture) {
    // 创建一个平面作为网格
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
 
    // 旋转网格
    mesh.rotation.x = Math.PI / 4; // 旋转x轴，使其倾斜
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        mesh.rotation.y += 0.01; // 不断旋转
    }
    animate();
});
 
camera.position.z = 5;

在这个例子中，我们首先设置了Three.js的场景、相机和渲染器。然后，我们使用THREE.TextureLoader加载图片，在加载完成后，创建一个网格，并将该网格添加到场景中。我们还设置了网格的旋转属性，使其沿着y轴旋转。最后，我们启动了一个渲染循环，不断地更新网格的旋转。