three.js绘制各面颜色不同的立方体（一）
本帖最后由 马黑黑 于 2025-5-8 13:11 编辑代码：
<script type="module">
import * as THREE from 'https://esm.sh/three'; // 导入 three.js 模块
// 创建场景、相机和渲染器
const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 抗锯齿、背景透明
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染范围
document.body.appendChild(renderer.domElement); // 渲染器加入到body标签
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 为每个面创建不同的材质（留意顺序）
const materials = [
new THREE.MeshBasicMaterial({ color: 'red' }), // 右
new THREE.MeshBasicMaterial({ color: 'green' }), // 左
new THREE.MeshBasicMaterial({ color: 'blue' }), // 上
new THREE.MeshBasicMaterial({ color: 'yellow' }), // 下
new THREE.MeshBasicMaterial({ color: 'cyan' }), // 前
new THREE.MeshBasicMaterial({ color: 'magenta' })// 后
];
// 使用MultiMaterial创建网格对象（几何体+材质的立方体）
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube); // 立方体添加到场景
camera.position.z = 5; // 设置相机位置
// 渲染循环
function animate() {
requestAnimationFrame(animate); // 递归调用函数自身
cube.rotation.x += 0.01; // X轴
cube.rotation.y -= 0.01; // Y轴
//cube.rotation.z += 0.01; // Z轴
renderer.render(scene, camera); // 渲染
}
animate(); // 执行渲染函数
</script>
<style>
body { margin: 0; }
</style>以上代码可以拷贝到本地 .html 文档的 <body> 和 </body> 之间然后保存、用浏览器打开，也可以复制上述代码拿到 简易编辑器 在线运行。
原理：
three.js 的网格对象（比如立方体）Mesh 接受两个参数，其一为几何体（geometry），负责描述几何形状，其二为材质（material），是构建几何体的材料，包括颜色等外观属性。其中，参数二，材质，可以是单一个体（例如之前发的帖子里绘制简单的立方体），也可以是一个数组、用以存储几何体材质不同部分的属性，我们就利用这一点，各自构建立方体的每一个面然后存入数组，最后将几何体和材质数组构建一个立方体。
three.js 的材质（THREE.MeshBasicMaterial）中，MeshBasicMaterial 是基础材质，它能自发光，不需要光源就可以看到。但如果换成标准材质 MeshStandardMaterial 或其它不会自发光的材质，我们就需要添加光源才能够看。加光源可能会令效果更细腻，这将是下一个帖子的内容，敬请期待。
本帖最后由 杨帆 于 2025-5-8 13:26 编辑 <br /><br />大佬级分享，动感十足，老师威武{:4_191:}<br />
<videoloop autoplay controls src="https://cccimg.com/view.php/5ebe86064ff770ece3a044ecadbaf21f.mp4"style="width: 500px;height: 500px; aspect-ratio: 1;margin:0;object-fit: fill;" controlsList="nodownload"></video>
谢谢老师辛苦，欣赏学习。{:4_190:} 杨帆 发表于 2025-5-8 13:25
本帖最后由 杨帆 于 2025-5-8 13:26 编辑 大佬级分享，动感十足，老师威武
杨帆也厉害哦。{:4_199:} 梦江南 发表于 2025-5-8 17:06
谢谢老师辛苦，欣赏学习。
{:4_190:} 杨帆 发表于 2025-5-8 13:25
本帖最后由 杨帆 于 2025-5-8 13:26 编辑 大佬级分享，动感十足，老师威武
{:4_187:} 很棒的六面立方体旋转，
欣赏支持，
期待更完美升级效果{:4_199:} 黑黑这个六边形也是准备做播放器吗 小辣椒 发表于 2025-5-8 21:13
黑黑这个六边形也是准备做播放器吗
那不一定。这是Threejs绘制立方体的相关介绍 花飞飞 发表于 2025-5-8 20:49
很棒的六面立方体旋转，
欣赏支持，
期待更完美升级效果
它这个在这个绘制基础上已经是很完美的，只是实现形式不同 马黑黑 发表于 2025-5-8 21:23
它这个在这个绘制基础上已经是很完美的，只是实现形式不同
立方体还旋转的代码跟直线比居然起来少多了。。。神奇 花飞飞 发表于 2025-5-8 21:37
立方体还旋转的代码跟直线比居然起来少多了。。。神奇
Threejs擅长的是3d的绘制，画线条是为难它的 渲染的次序是右左上下前后，嗯，这个要记一下。
“MeshBasicMaterial 是基础材质，它能自发光，不需要光源就可以看到。”这个厉害了{:4_187:} 期待加光源效果{:4_187:} 红影 发表于 2025-5-9 14:06
期待加光源效果
光源共六种，有一些光源不带阴影，有一些支持阴影。光源有简单的，有特复杂的。这个和我们之前介绍过的光源差不多一个道理。 马黑黑 发表于 2025-5-8 22:07
Threejs擅长的是3d的绘制，画线条是为难它的
{:4_170:}原来如此，高维不擅长做低维的事 花飞飞 发表于 2025-5-9 19:06
原来如此，高维不擅长做低维的事
明天俺弄个画球体的，你会更惊讶：呀，肿么介么简单 马黑黑 发表于 2025-5-9 18:28
光源共六种，有一些光源不带阴影，有一些支持阴影。光源有简单的，有特复杂的。这个和我们之前介绍过的光 ...
这个区分得这么细致，真不容易{:4_204:} 马黑黑 发表于 2025-5-9 19:34
明天俺弄个画球体的，你会更惊讶：呀，肿么介么简单
矮油，那得好好期待一下。
嫩这节奏就是先难再易。。。
最先看到那个直线，代码复杂到看一眼就劝退十万里{:4_173:} 花飞飞 发表于 2025-5-9 22:58
矮油，那得好好期待一下。
嫩这节奏就是先难再易。。。
最先看到那个直线，代码复杂到看一眼就劝退十万 ...
也不是先难再易，顺序是这么来的，有线，有盒子，才有球