threejs第三用 把模型绘制为点

这个绘制跟加载的模型有关系 有的loader加载出来没有返回geometry和material就不好搞啊。

.JSON是可以的

function Particle()
   {
   
         var loader=new THREE.JSONLoader();
         loader.load('http://xxxxx:8000/asset/female02/Female02_slim.json',function(geometry,materials)
         {
               var material = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 0.4,
                opacity: 0.6,
                transparent: true,
                blending: THREE.AdditiveBlending,
                depthTest: false,
                map: generateTextureByCanvas()
            });

            var mesh = new THREE.Points(geometry, material);
            
            mesh.rotation.x = -0.5 * Math.PI; 
            mesh.scale.set(0.2, 0.2, 0.2); 
            
            geometry.center(); //居中 不知道为啥好像必须要这个东西
             mesh.position.y+=50;
            scene.add(mesh);
         }
         );
   
   }

function generateTextureByCanvas() {

        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);渐变色 内圆xyr外圆xyr
        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,1)');

        context.fillStyle = gradient;
        context.fillRect(0, 0, canvas.width, canvas.height);

        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        return texture;

    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值