Question

使用THREE JS CSS3DRenderer渲染基于此example的全景视图。

我添加了另一个代表GPS标记的CSS3DObject图像，其代码如下：

var marker = document.createElement( 'img' );
    marker.classList.add('gps_marker');
    marker.src = 'gps_marker.jpg';
    marker.width = 5;  
    marker.style.border = 'solid 1px red';  

var object = new THREE.CSS3DObject( marker );
    object.position.set( 0, 0, 30 );
    scene.add( object );

现在我想让gps标记在场景周围的场景中可拖动。 Dragcontrols似乎不适用于CSS3DObject。任何帮助都将非常感激。

Answer 1

您需要使用着色器材质的“纹理”点云（THREE.Points）对象。使用uniform将纹理传递给片段着色器。不确定dragcontrols是否可以使用它（如果是的话，将移动所有点）。但这是恕我直言，绘制图标的最佳方式。例如：

let uniforms = {    
    iconSize: {
        value: self.iconSize
    },  
    color: {
        value: new THREE.Color(0xffffff)
    },
    texture: {
        value: self.textureLoader.load(url, texture => {
            texture.flipY = false;
            texture.needsUpdate = true;
        })
    }
};              

let material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('point-cloud-vertex-shader').textContent,
    fragmentShader: document.getElementById('point-cloud-fragment-shader').textContent,
    side: THREE.DoubleSide, 
    transparent: true,
    opacity: 0.7,   
    depthTest: false,
    clipping: true,
    clippingPlanes: self.clippingPlanes,                    
});

//... create THREE.Points object with this material

着色器：

<script type="x-shader/x-vertex" id="point-cloud-vertex-shader">   

    uniform vec3 color;

    uniform float iconSize;

    uniform sampler2D texture;       

    void main() {

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );       

    gl_PointSize = iconSize;       

    gl_Position = projectionMatrix * mvPosition;

    }

</script>

<script type="x-shader/x-fragment" id="point-cloud-fragment-shader">   

    uniform vec3 color;

    uniform float iconSize;

    uniform sampler2D texture;

    void main() {   

    gl_FragColor = texture2D( texture, gl_PointCoord );

    }

</script>

ThreeJS可拖动的CSS3DObject

1 个答案: