three.js绘制各面颜色不同的立方体（一）

马黑黑 · 发表于 2025-5-8 12:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 或其它不会自发光的材质，我们就需要添加光源才能够看。加光源可能会令效果更细腻，这将是下一个帖子的内容，敬请期待。