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()
相关推荐
lida20036 小时前
Open FPV VTX开源之OSD使用分类
开源
Mr' 郑6 小时前
开源大模型性能追平闭源模型技术路径分析
开源
IT古董6 小时前
【开源向量数据库】Milvus简介
数据库·开源·milvus
开源社7 小时前
【我与开源】 | 我的开源印象
开源
南郁10 小时前
001-监控你的文件-FSWatch-C++开源库108杰
c++·开源·文件系统·文件监控·fswatch·文件变动信息·libfswatch
小奏技术10 小时前
github如何基于workflow实现自动集成测试提升代码质量
后端·ci/cd·开源
说私域11 小时前
开源AI智能名片2+1链动模式S2B2C商城小程序在社交价值挖掘中的应用与策略研究
人工智能·小程序·开源·流量运营
量子位11 小时前
全球最大开源视频模型,现在也 Created in China 了,阶跃出品
人工智能·开源
一块plus12 小时前
Polkadot 首席开发者 Shawn Tabrizi :创新与韧性如何驱动 Web3 未来?
前端·架构·开源
说私域15 小时前
共享经济视角下的2+1链动模式开源AI智能名片S2B2C商城小程序应用探究
人工智能·小程序·开源