谢各位大佬

☘️THREE.LineDashedMaterial虚线材质概念和属性

二、THREE.LineDashedMaterial虚线材质基于gosper高斯帕曲线生成雪花动画效果1.

☘️实现思路2.

本文详细介绍如何基于threejs在三维场景中实现THREE.LineBasicMaterial虚线材质基于gosper高斯帕曲线生成雪花动画亲测可用。

希望能帮助到您。

一起学习加油加油

1.1

☘️THREE.LineDashedMaterial虚线材质概念和属性

的材质类型用于创建虚线线条效果。

THREE.LineDashedMaterial

Three.js

为了简化创建虚线线条而提供的一个方便的材质类型它允许用户通过简单的属性配置来实现虚线效果而不需要手动编写着色器。

常用属性

THREE.Material并具有以下一些特定的属性可以用来控制材质的虚线效果

color线条的颜色默认为白色0xffffff。

可以是一个整数表示十六进制颜色值。

linewidth线条宽度默认为

THREE.VertexBasicColors、THREE.VertexColors

true则需要设置

THREE.FrontSide正面、THREE.BackSide背面或

blending混合模式默认为

THREE.AdditiveBlending、THREE.SubtractiveBlending

二、THREE.LineDashedMaterial虚线材质基于gosper高斯帕曲线生成雪花动画效果

☘️实现思路

1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置

camera.position.set设置相机方向camera.lookAt4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.SpotLight聚焦光源设置聚焦光源位置设置聚焦光源投影scene添加聚焦光源。

5、加载几何模型创建THREE.Line线几何体使用gosper高斯帕曲线生成的雪花数据THREE.Line线几何体使用THREE.LineDashedMaterial

虚线材质Scene场景加入生成的THREE.Line线几何体。

6、创建旋转动画执行旋转动画加入stats监控器监控帧数信息。

☘️代码样例

charsetUTF-8titlelearn21(THREE.LineBasicMaterial线性几何体)/titlescript

srclib/threejs/91/three.js/script!--script

srchttps://johnson2heng.github.io/three.js-demo/lib/three.js/script--script

srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript

srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript

srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/script

/head

该属性设置材质的颜色如果设置了vertexColors这是属性将被忽略//

linewidth

这个属性定义了线框模式下顶点间线段的端点如何显示。

可选的值包括butt平、round圆和square方。

默认值为round。

在实际使用中这个属性的修改结果很难看出来。

WebGLRenderer对象不支持该属性//

linejoin

这个属性定义了线段的连接点如何显示。

可选的值有round圆、bevel斜角和miter尖角。

默认值为round。

如果你在一个使用低透明度和很大wireframeLinewidth值的例子里靠近观察就可以看到这个属性的效果。

WebGLRenderer对象不支持该属性//

vertexColors

将这个属性设置成THREE.VertexColors值就可以给每个顶点指定一种颜色//

fog

THREE.WebGLRenderer({antialias:

true})renderer.shadowMap.enabled

THREE.PCFSoftShadowMaprenderer.setSize(window.innerWidth,

window.innerHeight)document.body.appendChild(renderer.domElement)}var

scenevar

THREE.AmbientLight(0x0c0c0c)scene.add(ambientLight)spotLight

new

THREE.SpotLight(0xffffff)spotLight.position.set(-40,

60,

points[i]geometry.vertices.push(new

THREE.Vector3(e.x,

THREE.Color(0xffffff)colors[i].setHSL(e.x

100

geometry.computeLineDistances()var

material

THREE.LineDashedMaterial({vertexColors:

true,color:

material)line.computeLineDistances()line.position.set(0,

statsvar

Stats()document.body.appendChild(stats.dom)}var

step

window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth,

animate

{render()stats.update()requestAnimationFrame(animate)}var

draw

{initRender()initScene()initCamera()initLight()initModel()initStats()animate()window.onresize

onWindowResize}//高斯帕曲线生成函数gosper(密度,

大小)也被称为flowsnake一首音误的雪花是一种空间填充曲线。

它是一个与龙曲线和希尔伯特曲线相似的分形物体。

function

gosper(a,

ctx.beginPath();points.push({x:

turtle[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,

{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