three.js实现光柱

three.js是一个基于WebGL的JavaScript库，用于创建动态、交互式的3D图形。要实现光柱（也称为光源立方体），你可以按照以下步骤操作：

1. **创建场景**：首先，你需要设置一个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);

2. **创建光源立方体**：然后，你需要创建一个立方体贴图材质，该材质通常使用`THREE.MeshBasicMaterial`或`THREE.MeshPhongMaterial`，并应用到一个立方体上作为光柱模型。

const lightGeometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const lightMesh = new THREE.Mesh(lightGeometry, material);
lightMesh.castShadow = true; // 如果你想让光线产生阴影
scene.add(lightMesh);

3. **调整光源位置**：将立方体光源移动到所需的位置。这可以是任意三维坐标，比如`(0, 0, -1)`表示光源位于视口前方。

lightMesh.position.set(0, 0, -5); // 调整光源距离

4. **渲染**：最后，在循环中更新场景内容，并通过渲染器显示出来。

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