//使用canvas生成粒子的纹理
function generateSprite() {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
let boxGeometry = new THREE.BoxGeometry(5, 10, 5, 20, 30, 20);
let box = createPointsCloud(boxGeometry);
scene.add(box)
/* 创建点云 */
function createPointsCloud(geometry) {
/* 精灵材质 */
let spriteMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size:0.23,
transparent: true,
map: generateSprite(),blending: THREE.AdditiveBlending,
depthTest: false,
});
let points = new THREE.Points(geometry, spriteMaterial);
return points;
}
//加载模型顶点网格
var loader = new THREE.FBXLoader();
loader.load('xxx.fbx', function (object) {
let geometry = createPointsCloud(object.children[0].geometry);
geometry.scale.set(10, 10, 10);
geometry.position.y = -6;
scene.add(geometry);
});
//辅助轴
var object = new THREE.AxesHelper(50);
scene.add(object);
THREE.js根据模型加载粒子
最新推荐文章于 2023-01-05 19:18:08 发布