three.js实现全景图片水晶球效果代码

以下是使用three.js实现全景图片水晶球效果的示例代码：

// 初始化three.js场景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建球体
var geometry = new THREE.SphereGeometry(5, 32, 32);
var material = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('panorama.jpg')
});
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 监听鼠标移动事件
var mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

// 渲染函数
function render() {
  // 计算球体的旋转角度
  var rotationX = (mouseX / window.innerWidth) * 2 - 1;
  var rotationY = (mouseY / window.innerHeight) * 2 - 1;
  sphere.rotation.y = rotationX * Math.PI;
  sphere.rotation.x = rotationY * Math.PI;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

这段代码中，首先创建了一个three.js场景，并加入了一个球体，球体的材质使用了全景图片。然后监听鼠标移动事件，根据鼠标在屏幕上的位置计算球体应该旋转的角度。最后，在渲染函数中将计算出的旋转角度应用到球体上，并使用渲染器将场景渲染到屏幕上。