three.js几何体之立方缓冲几何体
<p>立方缓冲几何体 BoxGeometry 是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。。构造器：</p><blockquote>BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
width — X轴上面的宽度，默认值为 1<br>
height — Y轴上面的高度，默认值为 1<br>
depth — Z轴上面的深度，默认值为 1<br>
widthSegments — （可选）宽度的分段数，默认值是 1<br>
heightSegments — （可选）高度的分段数，默认值是 1<br>
depthSegments — （可选）深度的分段数，默认值是 1
</blockquote>
<p>下面的代码将绘制一个线框形状的立方缓冲几何体图像：</p>
<div id="hEdiv"><pre id="hEpre">
<style>
body { margin: 0; display: grid; place-items: center; }
#btnControl { position: absolute; bottom: 20px; }
</style>
<button type="button" id="btnControl">暂停/继续动画</button>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
const scene = new THREE.Scene;
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(), // 立方缓冲几何体
new THREE.MeshBasicMaterial({ wireframe: true }) // 基础材质（线框化）
);
scene.add(mesh);
const clock = new THREE.Clock();
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta;
renderer.render(scene, camera);
};
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
document.onclick = () => clock.running ? clock.stop() : clock.start();
animate();
</script>
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => {
const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
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> 6个参数的默认值都是1呢，都是可调的吧{:4_204:} 最规则的一个形体呢{:4_187:} 红影 发表于 2025-5-19 22:37
最规则的一个形体呢
这个本来应该是最早介绍的吧 红影 发表于 2025-5-19 22:37
6个参数的默认值都是1呢，都是可调的吧
这个，索要参数都可以试一试，注意数据类型，浮点数、整数 内行看门道，外行看热闹。看到的是旋转四方体。{:4_199:} 简单线条勾出立方体，跟X光一样，通过旋转进行全方位观察。。
这个范例我点任意处都可暂停了 马黑黑 发表于 2025-5-19 22:51
这个本来应该是最早介绍的吧
是的，最标准的立方体{:4_204:} 马黑黑 发表于 2025-5-19 22:52
这个，索要参数都可以试一试，注意数据类型，浮点数、整数
嗯嗯，知道了，谢谢黑黑{:4_187:} 红影 发表于 2025-5-20 10:23
是的，最标准的立方体
我都忘记它了，因为之前发过的，只是没有专门的介绍 花飞飞 发表于 2025-5-20 09:31
简单线条勾出立方体，跟X光一样，通过旋转进行全方位观察。。
这个范例我点任意处都可暂停了
后续的将不再设置单独按钮，这个是过渡 马黑黑 发表于 2025-5-20 12:41
我都忘记它了，因为之前发过的，只是没有专门的介绍
嗯嗯，现在这样专门地做个系统介绍最好了。{:4_187:} 红影 发表于 2025-5-20 22:19
嗯嗯，现在这样专门地做个系统介绍最好了。
这个比较简单 马黑黑 发表于 2025-5-20 12:42
后续的将不再设置单独按钮，这个是过渡
好哒， 这是又更新换代的节奏，感觉更加清爽 马黑黑 发表于 2025-5-20 22:20
这个比较简单
是的，应该算是最简单的了。 红影 发表于 2025-5-21 23:53
是的，应该算是最简单的了。
而且参数都可以是默认的，就是说，都能缺省 马黑黑 发表于 2025-5-22 13:43
而且参数都可以是默认的，就是说，都能缺省
那多好，更简便了呢。 红影 发表于 2025-5-22 14:50
那多好，更简便了呢。
也要根据需要设置的好 马黑黑 发表于 2025-5-22 19:18
也要根据需要设置的好
直接用默认的省力啊{:4_173:} 红影 发表于 2025-5-22 22:29
直接用默认的省力啊
还是那句话，看需要