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

马黑黑

<script type="module">

import * as THREE from 'https://esm.sh/three'; // 导入three模块

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 反锯齿
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建两个每个面颜色随机的标准材质
const materials1 = Array.from( {length: 6}, () => new THREE.MeshStandardMaterial({ color: 0xffffff * Math.random() }) );
const materials2 = Array.from( {length: 6}, () => new THREE.MeshStandardMaterial({ color: 0xffffff * Math.random() }) );

// 创建网格对象
const cube1 = new THREE.Mesh(geometry, materials1);
const cube2 = new THREE.Mesh(geometry, materials2);
// 设置两个立方体的位置
cube1.position.set(-2, 0, 0);
cube2.position.set(2, 0, 0);
// 两个立方体加入到场景
scene.add(cube1);
scene.add(cube2);

// 添加半球光源 : 上白、下黑、强度1，模拟从天空到地面渐变的自然光
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
hemiLight.position.set(0, 100, 0); // 光源位置
scene.add(hemiLight);

// 设置相机位置
camera.position.z = 10;

// 渲染循环（自动执行）
(function animate() {
    requestAnimationFrame(animate);
    cube1.rotation.x -= 0.01;
    cube1.rotation.y -= 0.01;
    cube2.rotation.x += 0.01;
    cube2.rotation.y += 0.01;
    renderer.render(scene, camera);
})();

</script>

<style> body { margin: 0; } </style>

点击这里查看代码运行效果

马黑黑

解释：

标准材质 MeshStandardMaterial 不像基础材质 MeshBasicMaterial 那样可以自发光，因此，需要使用光源才能看到用它制作的几何体。Threejs 的光源到现在止就是六种，本例使用了半球光源 HemisphereLight，它用于模拟自然光，共两种光线，一是来自天空的平行光，二是来自地面的反射光，两种光以渐变的方式过渡。半球光源发出的光是看不到的，它作用于几何体对象（比如本例的两个立方体），光线与几何体的面的颜色以特定方式相叠加而形成最终渲染效果。半球光源不产生阴影。

本例，有了上一个例子的铺垫，创建材质不再一个面一个面地完成，而是使用了高效的JS方法：

const materials1 = Array.from( {length: 6}, () => new THREE.MeshStandardMaterial({ color: 0xffffff * Math.random() }) );

这里，通过 Array.from({length: 6}) 创建拥有随机颜色的面的数组，一句代码完成上一例六句代码的工作。

如果不想使用随机颜色，那么，可以创建一个颜色数组，再通过它来创建自定义面颜色的几何体材质。

红影

这个变黑色背景了，两个转动立方体的色彩很有质感。

红影

随机颜色的采用方便多了，一句话的事，否则两个立方体要多很多剧代码了。
不过这样的随机色也有问题，就是容易出现某两个面颜色一样的问题呢

马黑黑

红影 发表于 2025-5-9 15:23
随机颜色的采用方便多了，一句话的事，否则两个立方体要多很多剧代码了。
不过这样的随机色也有问题，就是 ...

不想用随机可以预定义颜色，设置一下就好

马黑黑

红影 发表于 2025-5-9 15:21
这个变黑色背景了，两个转动立方体的色彩很有质感。

默认的场景都是黑色的，可以有多种方法设置，最简单的是在构建渲染器时加入 alpha: true 参数：

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 反锯齿 + 背景透明

alpha 通道开启就背景透明了

花飞飞

这颜色真好看，亚光色。。
转动的时候可以感觉到某一面由暗到亮的过程。。。
像是太空中悬浮一样

花飞飞

马黑黑 发表于 2025-5-9 12:45
解释：

标准材质 MeshStandardMaterial 不像基础材质 MeshBasicMaterial 那样可以自发光，因此，需要使 ...

加了光源立体感比之前强，
一句统管六句的色颜设计，也更高级。
六面单设和随机色都可以，好灵活。。

马黑黑

花飞飞 发表于 2025-5-9 19:21
加了光源立体感比之前强，
一句统管六句的色颜设计，也更高级。
六面单设和随机色都可以，好灵活。。

马黑黑

花飞飞 发表于 2025-5-9 19:17
这颜色真好看，亚光色。。
转动的时候可以感觉到某一面由暗到亮的过程。。。
像是太空中悬浮一样

这就是半球光源的效果，一般人不太容易看出来，当然，原因之一可能光源的位置设置，我设置的光源位置是默认的，中午时刻的自然光，正向到正下

红影

马黑黑 发表于 2025-5-9 18:23
不想用随机可以预定义颜色，设置一下就好

嗯嗯，虽然设置让代码多了，但至少是自己控制的

红影

马黑黑 发表于 2025-5-9 18:25
默认的场景都是黑色的，可以有多种方法设置，最简单的是在构建渲染器时加入 alpha: true 参数：

const ...

哦哦，知道了，谢谢黑黑

小辣椒

其实小辣椒看不懂

花飞飞

马黑黑 发表于 2025-5-9 19:24

加点奶糖的

花飞飞

马黑黑 发表于 2025-5-9 19:26
这就是半球光源的效果，一般人不太容易看出来，当然，原因之一可能光源的位置设置，我设置的光源位置是默 ...

这就是正午阳光不仅出神片，还出奇效

马黑黑

花飞飞 发表于 2025-5-9 22:47
这就是正午阳光不仅出神片，还出奇效

这个正常的演示

马黑黑

花飞飞 发表于 2025-5-9 22:46
加点奶糖的

可以吧

马黑黑

小辣椒 发表于 2025-5-9 21:53
其实小辣椒看不懂

看不懂正常

马黑黑

红影 发表于 2025-5-9 21:30
哦哦，知道了，谢谢黑黑

方法不止一种，这是其中的一种

马黑黑

红影 发表于 2025-5-9 21:29
嗯嗯，虽然设置让代码多了，但至少是自己控制的

这根据需要来，这里只是演示