ai编程结合threejs生成正方体6个面

2025-11-02 15:47:47

41 0 0 0

文章目录

开通会员

解锁全部文章权限

小程序码

扫一扫在小程序看此文章

热门文章

php基础入门课程资料文档课件实战源码 4866

vscode里如果出现中文空格标出黄色突出显示，怎么去掉？ 4778

wordpress主题开发文档资料下载 4092

vscode插件code runner详细配置说明 3437

2025新版fastadmin新手小白入门课免费文档 3391

php进阶课程文档资料下载 3198

使用ffmpeg将mp4格式转为m3u8 2201

phpstudy怎么手动安装php8.3.0版本？ 1980

推荐2款mac电脑里非常好用的php集成开发环境 1852

把php加入系统环境变量 1769

![](https://resource.maoshu.fun/storage/default/20251102/image2e2e04ee8e36fc7d088a97b424e50179f97a0581.png?e=1762464130&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:VZZ46BbA8DC_J1EwCvuZV-WElAE=)

### 提示词：

```
我是一名小学数学老师，要做一个教学使用的3d动画，来解释正方体的6个面排列规则，动画内容是：正对着的面的颜色相同，并用A B C和A1 B1 C1来标注，鼠标可以拖动正方体旋转，以看到每个面。使用three.js开发，生成单个html文件
```
### 最终代码：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体面排列规则 - 教学动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            background-color: #f0f8ff;
        }
        #container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: #333;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 10px;
            box-sizing: border-box;
        }
        #instructions {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: #555;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="info">
            <h2>正方体面排列规则</h2>
            <p>正方体有6个面，正对着的两个面颜色相同，并用字母标注对应关系</p>
        </div>
        <div id="instructions">
            <p>使用鼠标拖动可以旋转正方体，滚轮可以缩放视图</p>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script>
        // 初始化场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f8ff);
        
        // 初始化相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        
        // 初始化渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('container').appendChild(renderer.domElement);
        
        // 添加轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        
        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
        
        // 添加定向光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        
        // 创建立方体
        const cubeSize = 2;
        const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
        
        // 创建带有字母的纹理
        function createTextTexture(text, color) {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            const size = 256;
            canvas.width = size;
            canvas.height = size;
            
            // 填充背景色
            context.fillStyle = color;
            context.fillRect(0, 0, size, size);
            
            // 添加边框
            context.strokeStyle = '#333';
            context.lineWidth = 8;
            context.strokeRect(0, 0, size, size);
            
            // 添加文字
            context.fillStyle = '#fff';
            context.font = 'bold 100px Arial';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillText(text, size/2, size/2);
            
            return new THREE.CanvasTexture(canvas);
        }
        
        // 定义面和对应的纹理
        const materials = [
            // 右面 - A (红色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('A', '#ff4444')
            }),
            // 左面 - A1 (红色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('A1', '#ff4444')
            }),
            // 上面 - B (绿色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('B', '#44ff44')
            }),
            // 下面 - B1 (绿色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('B1', '#44ff44')
            }),
            // 前面 - C (蓝色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('C', '#4444ff')
            }),
            // 后面 - C1 (蓝色)
            new THREE.MeshPhongMaterial({ 
                map: createTextTexture('C1', '#4444ff')
            })
        ];
        
        // 创建网格
        const cube = new THREE.Mesh(geometry, materials);
        scene.add(cube);
        
        // 添加坐标轴辅助
        const axesHelper = new THREE.AxesHelper(3);
        scene.add(axesHelper);
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        
        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // 开始动画
        animate();
    </script>
</body>
</html>
```

0

0

铜牌 · 会员

解锁全部文章

全部课程8折购买

如果在b站充值了专属会员，可联系猫叔直接开通相同时间的此会员

¥50/年

金牌 · 会员

解锁全部文章

全部课程5折购买

微信一对一答疑

优先解决问题

¥1999/年