three.js环境配置

three.js是一个基于WebGL的JavaScript库，用于创建逼真的3D图形和动画。在开始使用three.js之前，你需要进行一些环境配置。以下是一些关键步骤：

1. 引入three.js库：在HTML文件中，你需要链接到three.js的CDN，或者将其复制到项目中的js文件夹并引用。例如：

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>

2. 加载场景、相机和渲染器：创建一个`Three.js`对象、`PerspectiveCamera`和`WebGLRenderer`，这是基本结构：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

3. 渲染器设置：将渲染器挂载到页面上，并设置它的大小：

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. 窗口resize监听：添加窗口大小改变时调整视口的事件处理：

window.addEventListener('resize', onWindowResize);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

5. 渲染循环：创建一个`requestAnimationFrame`函数来持续渲染动画：

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