我目前正在试验three.js。我想更改下面示例中的代码,因此圆点是圆的,而不是正方形。
我发现另一个名为 canvas particle random 的例子,它有圆形粒子,基本上,脚本的唯一区别如下:
var PI2 = Math.PI * 2;
var program = function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.5, 0, PI2, true );
context.fill();
};
我认为如果我将其添加到其他脚本中,那么粒子就会变成圆形。但是,当我将上述脚本添加到第一个脚本时,它不起作用(我只是得到一个蓝屏)。
任何人都知道我做错了什么?
答案 0 :(得分:5)
正如其他人所说,你可以在PointsMaterial中使用纹理作为地图 但是如果你只是想要圆圈,一个更简单的方法可能是用画布动态创建地图(这就是你发布的代码似乎试图做的事情)。
HERE is a fiddle更新了您的代码,使用画布作为纹理贴图 注意:我更改了参数对象中的颜色,以便更明显地使用不同的颜色。
在画布上创建圆圈以用作地图的功能。
function createCanvasMaterial(color, size) {
var matCanvas = document.createElement('canvas');
matCanvas.width = matCanvas.height = size;
var matContext = matCanvas.getContext('2d');
// create exture object from canvas.
var texture = new THREE.Texture(matCanvas);
// Draw a circle
var center = size / 2;
matContext.beginPath();
matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
matContext.closePath();
matContext.fillStyle = color;
matContext.fill();
// need to set needsUpdate
texture.needsUpdate = true;
// return a texture made from the canvas
return texture;
}
使用参数对象在循环中创建画布创建。
for (i = 0; i < parameters.length; i++) {
color = parameters[i][0];
size = parameters[i][1];
var hexColor = new THREE.Color(color[0], color[1], color[2]).getHexString();
materials[i] = new THREE.PointsMaterial({
size: 20,
map: createCanvasMaterial('#'+hexColor, 256),
transparent: true,
depthWrite: false
});
particles = new THREE.Points(geometry, materials[i]);
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.add(particles);
}
必须在marterial上将depthWrite设置为false。请参阅THIS问题。
上创建了一篇博文答案 1 :(得分:1)
你可以为你的精灵使用纹理:
var tex = new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/disc.png");
// load the texture
for (i = 0; i < parameters.length; i++) {
color = parameters[i][0];
size = parameters[i][1];
materials[i] = new THREE.PointsMaterial({
size: size,
map: tex // apply the texture in your material
});
particles = new THREE.Points(geometry, materials[i]);
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.add(particles);
}
答案 2 :(得分:1)
尽管这个问题已经问了两年多了,但我认为补充一下您总是可以使用three.js ShaderMaterial来编写自己的片段着色器很有用:
let geom = new three.Geometry();
geom.vertices.push(new three.Vector3(0,0,0));
let material = new three.ShaderMaterial({
transparent: true,
uniforms: {
size: {value: 10},
scale: {value: 1},
color: {value: new three.Color('maroon')}
},
vertexShader: three.ShaderLib.points.vertexShader,
fragmentShader: `
uniform vec3 color;
void main() {
vec2 xy = gl_PointCoord.xy - vec2(0.5);
float ll = length(xy);
gl_FragColor = vec4(color, step(ll, 0.5));
}
`
});
let points = new three.Points(geom, material);