使用THREE.DecalGeometry

时间:2015-12-08 17:33:45

标签: javascript three.js

我正在使用THREE.DecalGeometry将图片映射到我的地球。

虽然我最终让它们出现在正确的位置,但我对方向有些困难。

dodgy hotspot

ok hotspot

绿色方块是热点,我可以跟它们一起旋转,因为它最终会有透明度所以我可以忽略角落。但拉伸和剪裁在这里并不好。

我认为它的方向向量是问题,但我不知道我应该在这里提供什么。

    function getDecalGeometry(position, direction){
    var decalGeometry = new THREE.DecalGeometry(  
        earthMesh, // it has to be a THREE.Mesh
        position, // THREE.Vector3 in world coordinates  
        direction, // THREE.Vector3 specifying the orientation of the decal  
        new THREE.Vector3(25,25,25), // THREE.Vector3 specifying the size of the decal box  
        new THREE.Vector3(1,1,1) // THREE.Vector3 specifying what sides to clip (1-clip, 0-noclip)  
    );
    return decalGeometry;
}

function getDecalMaterial(){
    var decalMaterial = new THREE.MeshLambertMaterial( {
        map: THREE.ImageUtils.loadTexture( 'img/hotspot.png' ), 
        transparent: true, 
        depthTest: true,
        depthWrite: false,
        polygonOffset: true,
        polygonOffsetFactor: -4,
    });
    return decalMaterial;
}

0 个答案:

没有答案