three.js的安装及使用

class three.js

three.js 的安装和使用相对简单，下面是详细的步骤：

1. 安装 three.js

方法一：使用 npm 安装

如果你使用 Node.js 和 npm，可以通过以下命令安装 three.js：

npm install three

方法二：直接引入 CDN

如果你不想使用 npm，可以直接在 HTML 文件中引入 CDN 链接。只需在 <head> 标签中添加以下代码：

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

2. 创建基本场景

以下是一个创建简单 three.js 场景的示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js 示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script>
        // 场景
        const scene = new THREE.Scene();
    
        // 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

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

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

        animate();

        // 处理窗口大小变化
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

3. 运行示例

  1. 将以上代码保存为一个 HTML 文件（例如 index.html）。
  2. 使用浏览器打开这个文件，你会看到一个旋转的绿色立方体。

4. 进一步探索

  • 添加光源：你可以使用 THREE.PointLight 或 THREE.DirectionalLight 来添加光源。
  • 使用纹理：加载纹理并将其应用于几何体。
  • 加载模型：使用 THREE.GLTFLoader 加载外部模型文件。
  • 实现交互：添加鼠标或键盘事件来实现交互效果。

如果你有任何问题或需要更深入的内容，请在下方留言！

评论区
评论列表
menu