備住:添加pcd模型想要根據(jù)模型 不同高度 設置不同顏色 利用ShaderMaterial實現(xiàn)自定義
// 添加pcd addPcd(url){ // 加載 PCD 文件 // loader.load('http://youid:60022/112233/partition/050.pcd', (loadedPointCloud) => { loader.load(url, (loadedPointCloud) => { const vertexShader = ` precision highp float; varying vec3 fPosition; varying vec3 vColor; varying vec2 vUv; // 接收uv void main() { vUv = uv; fPosition = (modelMatrix * vec4(position, 1.0)).xyz; vColor = vec3(1.0, 0.0, 0.0); // 設置點的顏色,例如紅色 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // fPosition = gl_Position.xyz; gl_PointSize = 1.0; // 設置點的大小 } `; const fragmentShader = ` varying vec2 vUv; // 接收uv uniform float time; // 一個從外部傳入的uniform變量,例如時間 precision highp float; varying vec3 fPosition; uniform float interval; void d_color() { float dataY = fPosition.z+25.0; float dataI = interval; if (dataY <= -dataI) { // 藍色-藍綠 // 0,0,1 -> 0,1,1 gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); } else if (dataY > -dataI && dataY <= 0.0) { float g = 1.0 - (-dataY / dataI); gl_FragColor = vec4(0.0, g, 1.0, 1.0); } else if (dataY > 0.0 && dataY <= dataI) { // 藍綠-綠 // 0,1,1 -> 0,1,0 float g = 1.0 - dataY / dataI; gl_FragColor = vec4(0.0, 1.0, g, 1.0); } else if (dataY > dataI && dataY <= 2.0 * dataI) { // 綠-淺綠 // 0,1,0 -> 0.5,1,0 float r = 0.5 * ((dataY - dataI) / dataI); gl_FragColor = vec4(r, 1.0, 0.0, 1.0); } else if (dataY > 2.0 * dataI && dataY <= 3.0 * dataI) { // 淺綠-黃 // 0.5,1,0 -> 1,1,0 float r = 0.5 + ((dataY - 2.0 * dataI) / dataI) * 0.5; gl_FragColor = vec4(r, 1.0, 0.0, 1.0); } else if (dataY > 3.0 * dataI && dataY <= 4.0 * dataI) { // 黃-土黃 // 1,1,0 -> 1,0.76,0 float g = 1.0 - ((dataY - 3.0 * dataI) / dataI) * (1.0 - 0.76); gl_FragColor = vec4(1.0, g, 0.0, 1.0); } else if (dataY > 4.0 * dataI && dataY <= 5.0 * dataI) { // 土黃-橙 // 1,0.76,0 -> 1,0.58,0 float g = 0.76 - ((dataY - 4.0 * dataI) / dataI) * (0.76 - 0.58); gl_FragColor = vec4(1.0, g, 0.0, 1.0); } else if (dataY > 5.0 * dataI && dataY <= 6.0 * dataI) { // 橙-紅 // 1,0.58,0 -> 1,0,0 float g = 0.58 - ((dataY - 5.0 * dataI) / dataI) * 0.58; gl_FragColor = vec4(1.0, g, 0.0, 1.0); } else { // 紅 // 1.0,0.0,0.0 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } } void main() { // gl_FragColor = vec4(vUv, 0.0, 1.0); // vec3 color = vec3(vUv.x, 0, sin(time)); // // 使用UV坐標和time來生成顏色效果 // vec3 color = vec3(vUv.x, vUv.y, sin(time)); // gl_FragColor = vec4(color, 1.0); d_color(); } //片元著色器程序 `; //片元著色器程序 const material1 = new THREE.ShaderMaterial({ uniforms: { time: { value: 0.0 }, // 時間 u_resolution: { value: new THREE.Vector2() }, // 分辨率 u_mouse: { value: new THREE.Vector2() }, // 鼠標 interval: { type: "f", value: 1.9, }, }, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true // 如果需要透明度,則設置為true,否則默認為false。 }); scene.add(loadedPointCloud); this.render(); }) },
浙公網(wǎng)安備 33010602011771號