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;

    }

猜你喜欢

转载自blog.csdn.net/qq_35158695/article/details/81185881
今日推荐