Question

function createlabel（icon，label，label2，label3，backgroundcolor，fontcolor，opacity，x0，y0，z0）{

   $('#imglabelcontainer').append('<div class="imglabel" id="imglabel'+label+'" style="  background:'+backgroundcolor+';color:'+fontcolor+';"><img height="48px" width="48px" src="'+icon+'" /><div>'+label3+'</div><div>'+label2+'</div><div class="label'+label+'">'+label+'</div></div>');

   var geometry = new THREE.SphereGeometry( 4, 32, 32 );
   var material = new THREE.MeshBasicMaterial({ color: backgroundcolor});
   var sphere = new THREE.Mesh( geometry, material );
   sphere.position.x = x0;
   sphere.position.y = y0;
   sphere.position.z = z0;
   scene.add( sphere );
   //created sprite
   html2canvas(document.getElementById('imglabel'+label)).then(canvas => {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL("image/png", 1.0); //default return - canvas.toDataURL("image/png", 1.0);
    var ballTexture = THREE.ImageUtils.loadTexture(data); //make img
    console.log(data);
    var ballMaterial = new THREE.SpriteMaterial( { map: ballTexture, useScreenCoordinates: false} ); //, color: 0xff0000
    var sprite = new THREE.Sprite(ballMaterial);
    sprite.position.set( x0, y0, z0 + 4.5);
    sprite.scale.set(5, 5 ); // imageWidth, imageHeight
    scene.add( sprite );
   });

}

Answer 1

html2canvas（document.getElementById（'imglabel'+标签），{ backgroundColor：null }）。then（function（div）{}

在html2canvas中添加了backgroundcolor：null，在我的CSS中添加了样式border：radius

三个js如何将精灵作为球体上的纹理

1 个答案: