three.js几何体之形状缓冲几何体
<p>形状缓冲几何体 ShapeGeometry 用来从一个或多个路径形状中创建一个单面多边形几何体。构造器：</p><blockquote>ShapeGeometry(shapes : Array, curveSegments : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
shapes — 一个单独的 shape 形状，或者一个包含形状的 Array 数组。缺省时默认是一个三角形<br>
curveSegments - Integer - 每一个形状的分段数，默认值为12
</blockquote>
<p>在如下代码中，先使用 moveTo 和 lineTo 绘制一个三角形形状，接着将形状作为形状缓冲几何体的参数创建几何体，再使用基础材质和几何体构建三角形图像。示例还加入了辅助线，以方便观察最终效果：</p>
<div id="hEdiv"><pre id="hEpre">
<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<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(75, 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);
camera.position.set(0.1, 0.1, 5); // 相机位置（xy方向的设置是为了能看清所有辅助线）
// 辅助线（右手坐标系）
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);
// 按上、左、右角顺序画个三角形
const x = 0, y = 0; // 以圆心 (0, 0) 为起点
const shape = new THREE.Shape(); // 实例化 THREE 形状
shape.moveTo(x, y + 1); // 画笔移至三角形的顶点
shape.lineTo(x - 1, y - 1); // 从顶点画直线到左下
shape.lineTo(x + 1, y - 1); // 从左下画直线到右下（剩下一条线会自闭合）
const geometry = new THREE.ShapeGeometry(shape); // 实例化形状缓冲几何体 ：参数缺省时默认是一个三角形
// 使用基础材质
const material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, // 双面渲染
transparent: true, // 开启透明
opacity: 0.5, // 透明度
});
const mesh = new THREE.Mesh(geometry, material); // 构建三角形
scene.add(mesh); // 三角形图像加入场景
const clock = new THREE.Clock();
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta / 2;
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();
if (clock.running) mesh.material.color.set(Math.random() * 0xFFFFFF);
}
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>
这个有意思，点击暂停后，继续运行会变色{:4_187:} 这个无论怎么画，最后一条线都会自动闭合的吧。 红影 发表于 2025-5-20 20:18
这个无论怎么画，最后一条线都会自动闭合的吧。
原理和之前学到的一样 红影 发表于 2025-5-20 20:11
这个有意思，点击暂停后，继续运行会变色
变色是简单的 这个扯不动了，之前的圆片片是可以扯动的。。{:4_173:} 点击变色有意思，只是这三条线在这里的作用是什么，因为太平了，所以用来辅助观察效果的吧 花飞飞 发表于 2025-5-20 22:00
点击变色有意思，只是这三条线在这里的作用是什么，因为太平了，所以用来辅助观察效果的吧
辅助线的作用不仅酱紫，这里也是有助于了解一下 three.js 右手坐标系 马黑黑 发表于 2025-5-20 21:50
原理和之前学到的一样
嗯，封装的时候就已经设置好了的吧。 马黑黑 发表于 2025-5-20 22:19
辅助线的作用不仅酱紫，这里也是有助于了解一下 three.js 右手坐标系
右手坐标系，又是新词儿。。
记下了{:4_173:} 马黑黑 发表于 2025-5-20 21:51
变色是简单的
还挺好看的{:4_173:} 花飞飞 发表于 2025-5-20 22:49
右手坐标系，又是新词儿。。
记下了
就是常规坐标系 红影 发表于 2025-5-20 22:45
嗯，封装的时候就已经设置好了的吧。
这个你得自己研究研究 马黑黑 发表于 2025-5-21 19:38
就是常规坐标系
常规的比较好记 花飞飞 发表于 2025-5-21 21:24
常规的比较好记
坐标系用啥，都是根据环境、需要等因素 马黑黑 发表于 2025-5-21 19:39
这个你得自己研究研究
那我没本事研究{:4_173:} 红影 发表于 2025-5-22 00:17
那我没本事研究
学习学习也行 马黑黑 发表于 2025-5-22 13:32
学习学习也行
嗯嗯，学习一下是可以的{:4_187:} 红影 发表于 2025-5-22 14:24
嗯嗯，学习一下是可以的
必须的 马黑黑 发表于 2025-5-21 21:44
坐标系用啥，都是根据环境、需要等因素
环境正常，温度正常，适合种菜{:4_173:}