three完全开源扩展案例05-围栏着色器


https://www.threelab.cn/three-cesium-examples/public/index.html#/codeMirror?navigation=Three.js%E6%A1%88%E4%BE%8B[r166]&classify=shader&id=fenceShader

更多案例

javascript 复制代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)

camera.position.set(0, 40, 40)

const renderer = new THREE.WebGLRenderer()

renderer.setSize(box.clientWidth, box.clientHeight)

new OrbitControls(camera, renderer.domElement)

window.onresize = () => {

  renderer.setSize(box.clientWidth, box.clientHeight)

  camera.aspect = box.clientWidth / box.clientHeight

  camera.updateProjectionMatrix()
  
}

box.appendChild(renderer.domElement)

/* 顶点着色器 */
const vertexs = `varying vec2 vUv;
void main() {
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`

/* 片元着色器 */
const fragments = `
uniform float time;
uniform float opacity;
uniform vec3 color;
uniform float num;
uniform float hiz;
varying vec2 vUv;
void main() {
  vec4 fragColor = vec4(0.);
  float sin = sin((vUv.y - time * hiz) * 10. * num);
  float high = 0.92;
  float medium = 0.4;
  if (sin > high) {
    fragColor = vec4(mix(vec3(.8, 1., 1.), color, (1. - sin) / (1. - high)), 1.);
  } else if(sin > medium) {
    fragColor = vec4(color, mix(1., 0., 1.-(sin - medium) / (high - medium)));
  } else {
    fragColor = vec4(color, 0.);
  }
  vec3 fade = mix(color, vec3(0., 0., 0.), vUv.y);
  fragColor = mix(fragColor, vec4(fade, 1.), 0.85);
  gl_FragColor = vec4(fragColor.rgb, fragColor.a * opacity * (1. - vUv.y));
}`

// 自定义材质
const material = new THREE.ShaderMaterial({
    uniforms: {
      time: {
        type: "pv2",
        value: 0,
      },
      color: {
        type: "uvs",
        value: new THREE.Color("#FF4127"),
      },
      opacity: {
        type: "pv2",
        value: 1.0,
      },
      num: {
        type: "pv2",
        value: 10,
      },
      hiz: {
        type: "pv2",
        value: 0.03,
      },
    },
    vertexShader: vertexs,
    fragmentShader: fragments,
    blending: THREE.AdditiveBlending,
    transparent: !0,
    depthWrite: !1,
    depthTest: !0,
    side: THREE.DoubleSide,
});

let c = [0,0, 10, 0, 10, 10, 0, 10, 0, 0]

let posArr = [];

let uvrr = [];

let h = 10; //围墙拉伸高度

for (let i = 0; i < c.length - 2; i += 2) {

  // 矩形的三角形1
  posArr.push(c[i], c[i + 1], 0, c[i + 2], c[i + 3], 0, c[i + 2], c[i + 3], h);

  // 矩形的三角形2
  posArr.push(c[i], c[i + 1], 0, c[i + 2], c[i + 3], h, c[i], c[i + 1], h);

  // 注意顺序问题,和顶点位置坐标对应
  uvrr.push(0, 0, 1, 0, 1, 1);

  uvrr.push(0, 0, 1, 1, 0, 1);

}

const geometry = new THREE.BufferGeometry(); //声明一个空几何体对象

// 设置几何体attributes属性的位置position属性
geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(posArr), 3);

// 设置几何体attributes属性的位置uv属性
geometry.attributes.uv = new THREE.BufferAttribute(new Float32Array(uvrr), 2);

geometry.computeVertexNormals()

const mesh = new THREE.Mesh(geometry, material) //网格模型对象Mesh

scene.add(mesh)

function animate() {

    requestAnimationFrame(animate)

    mesh.rotation.x += 0.01

    mesh.rotation.y += 0.01

    material.uniforms.time.value += 0.03

    renderer.render(scene, camera)

}

animate()
相关推荐
铁头乔8 小时前
IoTDB 断电后无法启动 DataNode,日志提示 Meet error while starting up
数据库·开源·时序数据库·iotdb
AI服务老曹9 小时前
通过感知、分析、预测、控制,最大限度发挥效率的智慧油站开源了
人工智能·开源·自动化·音视频
邹霍梁@开源软件GoodERP12 小时前
整合Salesmart/WhatsApp、开源Odoo模块和Deepseek AI能力,实现针对国外客户的智能客服和个性化推荐服务
运维·人工智能·开源
木昜先生13 小时前
还在手动配置开发环境?vfox+chsrc真香!
开源
说私域16 小时前
私域流量运营中用户价值提升策略研究——以开源AI智能名片2+1链动模式与S2B2C商城小程序为例
人工智能·小程序·开源·流量运营
fakaifa16 小时前
云贝餐饮连锁V3独立版全开源+vue源码
微信小程序·小程序·uni-app·开源·php·源码下载
工业甲酰苯胺19 小时前
【保姆级教程】DeepSeek R1+RAG,基于开源三件套10分钟构建本地AI知识库
人工智能·开源
lida20031 天前
Open FPV VTX开源之OSD使用分类
开源
Mr' 郑1 天前
开源大模型性能追平闭源模型技术路径分析
开源
IT古董1 天前
【开源向量数据库】Milvus简介
数据库·开源·milvus