three.js绘制各面颜色不同的立方体（二）
<div id="hEdiv"><pre id="hEpre"><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>
</pre></div>
<blockquote><button id="btnPlay" type="button" value="run">点击这里查看代码运行效果</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPlay.onclick = () => {
const value = hEpre.textContent;
const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
previewWindow.document.open();
previewWindow.document.write(value);
setTimeout(function() { previewWindow.document.title = "预览" }, 100);
previewWindow.document.close();
}
</script>
本帖最后由 马黑黑 于 2025-5-9 12:46 编辑
解释：
标准材质 MeshStandardMaterial 不像基础材质 MeshBasicMaterial 那样可以自发光，因此，需要使用光源才能看到用它制作的几何体。Threejs 的光源到现在止就是六种，本例使用了半球光源 HemisphereLight，它用于模拟自然光，共两种光线，一是来自天空的平行光，二是来自地面的反射光，两种光以渐变的方式过渡。半球光源发出的光是看不到的，它作用于几何体对象（比如本例的两个立方体），光线与几何体的面的颜色以特定方式相叠加而形成最终渲染效果。半球光源不产生阴影。
本例，有了上一个例子的铺垫，创建材质不再一个面一个面地完成，而是使用了高效的JS方法：
const materials1 = Array.from( {length: 6}, () => new THREE.MeshStandardMaterial({ color: 0xffffff * Math.random() }) );
这里，通过 Array.from({length: 6}) 创建拥有随机颜色的面的数组，一句代码完成上一例六句代码的工作。
如果不想使用随机颜色，那么，可以创建一个颜色数组，再通过它来创建自定义面颜色的几何体材质。 这个变黑色背景了，两个转动立方体的色彩很有质感。{:4_187:} 随机颜色的采用方便多了，一句话的事，否则两个立方体要多很多剧代码了。
不过这样的随机色也有问题，就是容易出现某两个面颜色一样的问题呢{:4_204:} 红影 发表于 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
加了光源立体感比之前强，
一句统管六句的色颜设计，也更高级。
六面单设和随机色都可以，好灵活。。
{:4_190:} 花飞飞 发表于 2025-5-9 19:17
这颜色真好看，亚光色。。
转动的时候可以感觉到某一面由暗到亮的过程。。。
像是太空中悬浮一样
这就是半球光源的效果，一般人不太容易看出来，当然，原因之一可能光源的位置设置，我设置的光源位置是默认的，中午时刻的自然光，正向到正下 马黑黑 发表于 2025-5-9 18:23
不想用随机可以预定义颜色，设置一下就好
嗯嗯，虽然设置让代码多了，但至少是自己控制的{:4_173:} 马黑黑 发表于 2025-5-9 18:25
默认的场景都是黑色的，可以有多种方法设置，最简单的是在构建渲染器时加入 alpha: true 参数：
const ...
哦哦，知道了，谢谢黑黑{:4_171:} 其实小辣椒看不懂 马黑黑 发表于 2025-5-9 19:24
加点奶糖的{:4_173:} 马黑黑 发表于 2025-5-9 19:26
这就是半球光源的效果，一般人不太容易看出来，当然，原因之一可能光源的位置设置，我设置的光源位置是默 ...
这就是正午阳光{:4_173:}不仅出神片，还出奇效 花飞飞 发表于 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
嗯嗯，虽然设置让代码多了，但至少是自己控制的
这根据需要来，这里只是演示