本文介绍了如何改变每个点的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..我尝试用点绘制图像,并且几何效果很好,但我未能将图像pixi颜色传递给每个点
I try to draw the image with the point ,and the geometry is work well,but I failed to pass the image pixi color to every point
function createParticles(imgData) {
var uniforms ={ vertexColor:{value: []}}
const geometry = new THREE.BufferGeometry();
var c = 0, x = 0, y = 0, positions = [], colors = [];
var data = imgData.data;
var colors = new Float32Array(imgData.width*imgData.height*3);
x = -imgData.width * 0.5;
y = imgData.height * 0.5;
for (var i = 0; i < imgData.height; i++) {
for (var j = 0; j < imgData.width; j++) {
positions.push(j - imgData.width * 0.5, imgData.height * 0.5 - i, Math.random() * 20);
var color = new THREE.Color();
color.setRGB(data[c] / 255, data[c + 1] / 255, data[c + 2] / 255);
uniforms.vertexColor.value.push(color)
}
}
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
// geometry.addAttribute('ca', new THREE.BufferAttribute(colors, 3));
var material = new THREE.ShaderMaterial({ fragmentShader: document.getElementById('f-shader').textContent, vertexShader: document.getElementById('v-shader').textContent ,uniforms:uniforms,vertexColors:THREE.VertexColors});
return new THREE.Points(geometry, material);
}
我使用 ShaderMaterial ,但颜色总是黑色
and I use the ShaderMaterial ,but the color is always black
<script type="shader" id="f-shader">
varying vec4 varColor;
void main()
{
gl_FragColor = varColor;
}
</script>
<script type="shader" id="v-shader">
attribute vec3 vertexColor;
varying vec4 varColor;
void main()
{
varColor = vec4(vertexColor.rgb, 1.0);
gl_PointSize = 10.0;
gl_Position = projectionMatrix * viewMatrix * modelMatrix *
vec4(position, 1.0);
}
</script>
我该如何解决?
推荐答案
作为一个选项,您可以将纹理传递给着色器并通过 uv 坐标设置点的颜色:
As an option, you can pass a texture to shaders and set the color of a point by uv coordinates:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.PlaneBufferGeometry(5, 5, 200, 200);
var material = new THREE.ShaderMaterial({
uniforms: {
image: {
value: new THREE.TextureLoader().load("https://threejs/examples/textures/UV_Grid_Sm.jpg")
},
size: {
value: 0.05
},
scale: {
value: window.innerHeight / 2.0
}
},
vertexShader: `
varying vec2 vUv;
uniform float size;
uniform float scale;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D image;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(image, vUv);
}
`
});
var points = new THREE.Points(geometry, material);
scene.add(points);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs/examples/js/controls/OrbitControls.js"></script>
这篇关于如何改变每个点的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论