Three.js基本用法

Three.js是一个基于JavaScript的开源3D图形库，用于在Web浏览器中创建和展示各种3D场景和交互式图形。以下是使用Three.js的基本步骤：

引入Three.js库

首先，在HTML文件中引入Three.js库。你可以从官方网站（https://threejs.org）下载库文件，或者使用CDN链接。例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

创建场景、相机和渲染器

在JavaScript代码中，你需要创建一个场景、相机和渲染器。场景是一个容器，用于存放3D对象。相机定义了观察者的视角。渲染器负责将场景和相机的内容渲染到HTML元素中。

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);

添加3D对象

你可以创建各种3D对象，如立方体、球体、平面等，并将它们添加到场景中。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

设置相机位置和场景内容

设置相机的位置，以便你可以从不同的视角观察场景中的3D对象。你还可以调整场景中的物体位置、旋转和缩放。

camera.position.z = 5;

渲染场景

在动画循环中，使用渲染器将场景内容渲染到HTML元素中。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

这是一个简单的Three.js示例，用于创建一个旋转的彩色立方体。在实际应用中，你可以根据需要创建更复杂的场景、光源、材质和纹理，并添加交互性、动画等功能。

如果你希望更深入地学习Three.js，可以查阅官方文档和示例，了解更多高级特性和用法。