Three.js线性几何体材质THREE.LineDashedMaterial（代码实例讲解）
程序员文章站
2022-07-08 14:03:05
简介
这种材质和THREE.LineBasicMaterial略有些不同，它不但可以给线段上色，还可以添加一种虚线的效果。
额外属性
名称...
简介
这种材质和THREE.LineBasicMaterial略有些不同，它不但可以给线段上色，还可以添加一种虚线的效果。
额外属性 名称 描述 scale 线条中虚线部分的占比，缩放dashSize和gapSize。如果scale的值小于1，dashSize和gapSize就会增大；如果scale的值小于1，dashSize和gapSize就会减小 dashSize 破折号（-）的大小。默认为3。 gapSize 间隙的大小。默认为1。 注意事项使用THREE.LineDashedMaterial和THREE.LineBasicMaterial基本一样，唯一区别是必须调用computeLineDistance()（用来计算线段顶点之间的距离）。如果不这样做，间隔就不会正确的显示。
简单示例
//定义直线纹理
geometry.computeLineDistances();
var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 2,
gapSize: 2,
scale: 5
});
//生成网格
line = new THREE.Line(geometry, material);
案例代码
这个代码和上一节的只有材质修改掉了，别的没有动
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ShaderMaterial案例</title>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw()">
</body>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0,50,100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
//初始化dat.GUI简化试验流程
var gui;
function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
};
var datGui = new dat.GUI();
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
}
var ambientLight,spotLight;
function initLight() {
ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
}
var line;
function initModel() {
//获取点的位置
var points = gosper(3, 60);
//实例化一个几何图形
var geometry = new THREE.Geometry();
var colors = []; //存放颜色的数组
for(var i=0,len=points.length; i<len; i++){
var e = points[i];
//遍历将顶点的位置添加进入
geometry.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
//设置生成相应的颜色
colors[i] = new THREE.Color(0xffffff);
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
}
//设置几何图形每个点的颜色
geometry.colors = colors;
//定义直线纹理
geometry.computeLineDistances();
var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 2,
gapSize: 2,
scale: 5
});
//生成网格
line = new THREE.Line(geometry, material);
//设置位置
line.position.set(0, 0, -60);
scene.add(line);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
var step = 0;
function render() {
//设置模型动画
line.rotation.z = step += 0.01;
line.rotation.y = step += 0.01;
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initStats();
animate();
window.onresize = onWindowResize;
}
//高斯帕曲线生成函数gosper(密度, 大小)，也被称为flowsnake（一首音误的雪花），是一种空间填充曲线。它是一个与龙曲线和希尔伯特曲线相似的分形物体。
function gosper(a, b) {
var turtle = [0, 0, 0];
var points = [];
var count = 0;
rg(a, b, turtle);
return points;
function rt(x) {
turtle[2] += x;
}
function lt(x) {
turtle[2] -= x;
}
function fd(dist) {
// ctx.beginPath();
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
// ctx.moveTo(turtle[0], turtle[1]);
var dir = turtle[2] * (Math.PI / 180);
turtle[0] += Math.cos(dir) * dist;
turtle[1] += Math.sin(dir) * dist;
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
// ctx.lineTo(turtle[0], turtle[1]);
// ctx.stroke();
}
function rg(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
// ctx.strokeStyle = '#111';
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
lt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
rt(60);
}
if (st == 0) {
fd(ln);
rt(60);
fd(ln);
rt(120);
fd(ln);
lt(60);
fd(ln);
lt(120);
fd(ln);
fd(ln);
lt(60);
fd(ln);
rt(60)
}
}
function gl(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
// ctx.strokeStyle = '#555';
lt(60);
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
rt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
}
if (st == 0) {
lt(60);
fd(ln);
rt(60);
fd(ln);
fd(ln);
rt(120);
fd(ln);
rt(60);
fd(ln);
lt(120);
fd(ln);
lt(60);
fd(ln);
}
}
}
</script>
</html>