Javascript 我一直在尝试开发一个球体模型，上面有一个固定的html文本覆盖，但遇到了一些困难_Javascript_Html_Css_Three.js

Javascript 我一直在尝试开发一个球体模型，上面有一个固定的html文本覆盖，但遇到了一些困难

javascript html css three.js

Javascript 我一直在尝试开发一个球体模型，上面有一个固定的html文本覆盖，但遇到了一些困难,javascript,html,css,three.js,Javascript,Html,Css,Three.js,实际上，根据stack overflow的引用，我一直在尝试开发一个球体模型，在球体上的特定位置使用固定的html文本。我面临的问题是，当我旋转球体对象时，我的文本看起来像是在改变它的位置，这意味着它不是固定的。为了更好地理解，你可以看看我使用过的这个参考资料。如果我的问题中有任何错误，请告诉我，我会尝试纠正它，因为我是新手 <html> <head> <style type="text/css"> div.spritelabel { positio

实际上，根据stack overflow的引用，我一直在尝试开发一个球体模型，在球体上的特定位置使用固定的html文本。我面临的问题是，当我旋转球体对象时，我的文本看起来像是在改变它的位置，这意味着它不是固定的。为了更好地理解，你可以看看我使用过的这个参考资料。如果我的问题中有任何错误，请告诉我，我会尝试纠正它，因为我是新手

<html>
<head>
<style type="text/css">
div.spritelabel {
    position:absolute;
    top:0;
    left:0;
    color:#0000FF;
    font-family: 'Trebuchet MS', sans-serif;
    font-size:22px;
    font-weight:normal;
    line-height:20px;
    text-align: left;
    padding:3px;

    -webkit-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 8px -5px rgba(0,0,0,0.75);
    background:rgba( 255, 255, 255, 0.8 );
    }
a:link {color: brown; background-color: transparent; text-decoration: none;}
a:visited{color: green; background-color: transparent; text-decoration: none;}
a:hover{color: red; background-color: transparent; text-decoration: underline;} 
a:active {color: yellow; background-color: transparent; text-decoration: underline;}    
</style>
 <title>Construct a sphere model in webGL</title>
 <script src ="./three.js-master/three.js-master/build/three.js"></script>
 <script src ="./three.js-master/three.js-master/build/three.min.js"></script>
 <script src ="./three.js-master/three.js-master/examples/js/controls/OrbitControls.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/mathjs/2.4.0/math.min.js"></script>
 <script type="text/javascript" src="2D-Text.js"></script>
 </head>

<body onload="createsphere()">
    <div class ="spritelabel">
    <a>urltext</a></div> 
    <canvas id="glcanvas" width="840" height="620"></canvas>
</body>
</html>

不要问同一个问题两次，更新你现有的问题。我想你的问题可以通过再次阅读你作为参考的答案来解决。你有大约5个问题问同样的问题。我甚至为你安排了。停止问同样的问题。lat=lat*Math.PI/180.0；lon=-lon*Math.PI/180.0；我已经检查了代码，但我不理解这两行。如果你不介意的话，你能向他们简要介绍一下吗？如果删除这些线，则覆盖对象将远离球体#Falk Thiele

    var camera, scene, controls, renderer, sprite;

    function convertlatlonToVec3(lat, lon)
    {
        lat = lat * Math.PI / 180.0;
        lon = -lon * Math.PI /180.0;
        return new THREE.Vector3(
            Math.cos(lat)* Math.sin(lon),
            Math.sin(lat)* Math.sin(lon),
            Math.cos(lat));
    }

function labelBox(Ncardinal, radius, domElement)
{
    this.screenVector = new THREE.Vector3(0, 0, 0);
    this.position = convertlatlonToVec3(Ncardinal.lat, Ncardinal.lon).multiplyScalar(radius);


    //create html overlay box and clickable to url.. 
    this.box = document.createElement('div');
    a = document.createElement('a');
    a.innerHTML = Ncardinal.name;
    a.href ='http://www.google.de';
    this.box.className = "spritelabel";
    this.box.appendChild(a);


    this.domElement = domElement;
    this.domElement.appendChild(this.box);


}

labelBox.prototype.update = function()
{
    this.screenVector.copy(this.position);  
    this.screenVector.project(camera);

    var posx = Math.round((this.screenVector.x + 1)* this.domElement.offsetWidth/2);
    var posy = Math.round((1 - this.screenVector.y)* this.domElement.offsetHeight/2);

    var boundingRect = this.box.getBoundingClientRect();


    //update the box overlays position
    this.box.style.left = (posx - boundingRect.width) + 'px';
    this.box.style.top = posy + 'px';

};


function init() {

    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer( {antialias:true} );
    renderer.setSize(width, height);

    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(100, width/height, 1, 1000);
    camera.position.z = 1;

    scene = new THREE.Scene();

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minPolarAngle = Math.PI/4;
    controls.maxPolarAngle = 3*Math.PI/4;


    var radius = 100;
    var spheregeometry = new THREE.SphereGeometry(radius, 30, 30, 0, -6.283);
    var texture = THREE.ImageUtils.loadTexture('churchtest.jpg');
    var spherematerial = new THREE.MeshBasicMaterial({map: texture});
    var sphere = new THREE.Mesh(spheregeometry, spherematerial);

    scene.add(sphere);

    var Ncardinal = {"name": "North", "lat": 0, "lon": 360};


    sprite =  new labelBox(Ncardinal, radius, document.body);


    var marker = new THREE.Mesh(new THREE.SphereGeometry(5, 30, 30));
    marker.position.copy(sprite.position);
    scene.add(marker);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);

} 

function animate() {

        sprite.update();
        requestAnimationFrame(animate); 
        controls.update();
        renderer.render(scene, camera);
}

init();
animate();
}