js 3d方块源码

以下是一个使用Three.js库创建简单3D方块的JavaScript示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Cube</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <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(1, 1, 1);

        // 创建方块材质
        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', () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });


    </script>
</body>

</html>

一、基础概念

Three.js
- 这是一个用于在网页上创建3D图形的JavaScript库。它简化了WebGL（Web Graphics Library）的操作，WebGL是一种在浏览器中渲染3D图形的底层API。

场景（Scene）
- 是所有3D对象、灯光等的容器。就像一个舞台，所有的元素都在这个舞台上进行展示。
相机（Camera）
- 决定了从哪个视角去看场景中的内容。这里使用的是透视相机（PerspectiveCamera），它会模拟人眼看到的透视效果。
渲染器（Renderer）
- 负责将场景和相机视图转换为可以在屏幕上显示的图像。
几何体（Geometry）和材质（Material）
- 几何体定义了物体的形状，这里使用的是BoxGeometry表示立方体的形状。材质定义了物体的外观，如颜色、纹理等，MeshBasicMaterial是一种简单的材质类型。

二、优势

跨平台性
- 可以在任何支持Web浏览器的设备上运行，无需额外安装软件。

易于上手
- 相对于直接使用WebGL，Three.js提供了更高层次的抽象，使得创建3D效果更加容易。
丰富的资源
- 有大量的示例代码、教程和社区支持，方便开发者学习和解决问题。

三、应用场景

游戏开发
- 可以用于创建简单的3D游戏场景、角色模型等。

数据可视化
- 例如将一些三维数据结构（如建筑模型、分子结构等）以直观的方式展示出来。
虚拟展厅
- 创建虚拟的展览空间，展示艺术品、文物等。

四、可能遇到的问题及解决方法

渲染性能问题
- 如果场景中有大量的3D对象或者复杂的几何体，可能会导致渲染速度慢。
- 解决方法：
  - 优化几何体结构，减少不必要的面数。
  - 使用合适的材质，例如对于不需要光照效果的物体可以使用简单的材质类型。
  - 合理设置相机的视锥体（frustum），减少不必要的渲染内容。