Question

JS我知道一点，我想使用JS函数为Three.js函数提供标签。

enter image description here

在这种情况下，我想为每个顶点创建一个标签。但是，为什么它只是创造一个。

update_labels：

    function update_labels( vpos ) {


    var pos = get_screen_xy( vpos , camera );


    note.style.display = 'block';

    if ( pos.x >= x_max ) {
        note.style.left = '';
        note.style.right = x_max - pos.x;
    } else {
        note.style.right = '';
        note.style.left = pos.x;
    }

    if ( pos.y == y_max ) {
        note.style.top = '';
        note.style.bottom = y_max - pos.y;
    } else {
        note.style.bottom = '';
        note.style.top = pos.y;
    }

}

get_screen_xy：

    function get_screen_xy( position, camera ) {
    var pos = position.clone();
    projScreenMat = new THREE.Matrix4();
    projScreenMat.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
    pos.applyProjection( projScreenMat );

    return { x: ( pos.x + 1 ) * window.innerWidth / 2,
        y: ( - pos.y + 1 ) * window.innerHeight / 2 };
}

使用功能：

    function getpos1(){
    var notepos1 =objects.geometry.vertices[0];
    update_labels( notepos1 );
}

function getpos2(){
    var notepos2 =objects.geometry.vertices[1];
    update_labels( notepos2 );
}

function getpos3(){
    var notepos1 =objects.geometry.vertices[2];
    update_labels( notepos1 );
}

function getpos4(){
    var notepos2 =objects.geometry.vertices[3];
    update_labels( notepos2 );
}

function getpos5(){
    var notepos1 =objects.geometry.vertices[4];
    update_labels( notepos1 );
}

function getpos6(){
    var notepos2 =objects.geometry.vertices[5];
    update_labels( notepos2 );
}

function getpos7(){
    var notepos1 =objects.geometry.vertices[6];
    update_labels( notepos1 );
}

function getpos8(){
    var notepos2 =objects.geometry.vertices[7];
    update_labels( notepos2 );
}



function animate() {
    requestAnimationFrame( animate );
    controls.update();
    render()
}



function render() {

    camera.lookAt( scene.position );
    renderer.render( scene, camera );
    getpos1();
    getpos2();
    getpos3();
    getpos4();
    getpos5();
    getpos6();
    getpos7();
    getpos8();
}

PLZ帮助我修复它，非常感谢！

谢谢2pha：

我现在可以做到 Like this

但是生成了很多相同的代码，你能减少一些代码吗，我希望得到一个完美的代码。

我在这里给出完整的代码：

<html>
<head>
    <title>Demo: Example of how to implement 2D labels for 3D objects using Three.js</title>
    <script src="js/three.min.js"></script>
    <script src="js/TrackballControls.js"></script>
</head>
<body>

    <script>
    var camera, controls, scene, renderer;
    var geometry, material, mesh;

    var x_min = 0;
    var y_min = 0;

    var x_max = window.innerWidth;
    var y_max = window.innerHeight;

    var x_mid = window.innerWidth / 2;
    var y_mid = window.innerHeight / 2;


    var objects = [];

    init();
    animate();

    function init() {


        //CAMERA
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 50;
        camera.position.x = 25;
        camera.position.y = 15;




        controls = new THREE.TrackballControls( camera );

        controls.addEventListener( 'change', render );


        //RENDER

        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );



        //SCENE
        scene = new THREE.Scene();

        //LIGHT

        var light = new THREE.PointLight( 0xff0000, 2.5, 100 );
        light.position.set( 50, 50, 50 );
        scene.add( light );

        var light = new THREE.AmbientLight( 0x404040 ); // soft white light
        scene.add( light );



        //MESH

        geometry = new THREE.BoxGeometry( 20, 20, 20 );

        sphere = new THREE.SphereGeometry(10, 32, 32 );


        material = new THREE.MeshPhongMaterial( {
                color: 0xFF0000 ,
                side: THREE.DoubleSide,
                specular: 0x222222,
                shading:THREE.NoShading,
                wireframe:true,
            } );

        objects = new THREE.Mesh( geometry, material );
        var vector = objects.geometry.vertices[2];

        scene.add( objects );




        objects.position.x = 0;
        objects.position.y = 0;
        objects.position.z = 0;

        note = document.createElement( 'div' );
        note.innerHTML = '0';
        note.style.display = 'none';
        note.style.position = 'absolute';
        note.style.color = 'white';
        note.style.border = '1px';
        note.style.borderColor = 'white';
        note.style.borderStyle = 'solid';
        note.style.borderRadius = '50%';
        note.style.padding = '0.5em';
        note.style.width = '20px';
        note.style.textAlign = 'center';

        note.style.background = 'green';
        note.style.opacity = '0.8'; 

        document.getElementsByTagName( 'body' )[0].appendChild( note );




        note1 = document.createElement( 'div' );
        note1.innerHTML = '1';
        note1.style.display = 'none';
        note1.style.position = 'absolute';
        note1.style.color = 'white';
        note1.style.border = '1px';
        note1.style.borderColor = 'white';
        note1.style.borderStyle = 'solid';
        note1.style.borderRadius = '50%';
        note1.style.padding = '0.5em';
        note1.style.width = '20px';
        note1.style.textAlign = 'center';

        note1.style.background = 'green';
        note1.style.opacity = '0.8';

        document.getElementsByTagName( 'body' )[0].appendChild( note1 );


        note2 = document.createElement( 'div' );
        note2.innerHTML = '2';
        note2.style.display = 'none';
        note2.style.position = 'absolute';
        note2.style.color = 'white';
        note2.style.border = '1px';
        note2.style.borderColor = 'white';
        note2.style.borderStyle = 'solid';
        note2.style.borderRadius = '50%';
        note2.style.padding = '0.5em';
        note2.style.width = '20px';
        note2.style.textAlign = 'center';

        note2.style.background = 'green';
        note2.style.opacity = '0.8';

        document.getElementsByTagName( 'body' )[0].appendChild( note2 );

        note3 = document.createElement( 'div' );
        note3.innerHTML = '3';
        note3.style.display = 'none';
        note3.style.position = 'absolute';
        note3.style.color = 'white';
        note3.style.border = '1px';
        note3.style.borderColor = 'white';
        note3.style.borderStyle = 'solid';
        note3.style.borderRadius = '50%';
        note3.style.padding = '0.5em';
        note3.style.width = '20px';
        note3.style.textAlign = 'center';

        note3.style.background = 'green';
        note3.style.opacity = '0.8';

        document.getElementsByTagName( 'body' )[0].appendChild( note3 );


    }








    function getpos1(){
        var notepos1 =objects.geometry.vertices[0];
        update_labels( notepos1, note );
    }

    function getpos2(){
        var notepos2 =objects.geometry.vertices[1];
        update_labels( notepos2, note1 );
    }

    function getpos3(){
        var notepos3 =objects.geometry.vertices[2];
        update_labels( notepos3, note2 );
    }

    function getpos4(){
        var notepos4 =objects.geometry.vertices[3];
        update_labels( notepos4, note3 );
    }

    function animate() {
        requestAnimationFrame( animate );
        controls.update();
        render()
    }

    function render() {

        camera.lookAt( scene.position );
        renderer.render( scene, camera );
        getpos1();
        getpos2();
        getpos3();
        getpos4();

    }



function update_labels( vpos, note ) {


    var pos = get_screen_xy( vpos , camera );


    note.style.display = 'block';

    if ( pos.x >= x_max ) {
        note.style.left = '';
        note.style.right = x_max - pos.x;
    } else {
        note.style.right = '';
        note.style.left = pos.x;
    }

    if ( pos.y == y_max ) {
        note.style.top = '';
        note.style.bottom = y_max - pos.y;
    } else {
        note.style.bottom = '';
        note.style.top = pos.y;
    }

}

    // Get the screen x,y coordinates of the 3D object
    // https://github.com/mrdoob/three.js/issues/78#issuecomment-846917
    function get_screen_xy( position, camera ) {
        var pos = position.clone();
        projScreenMat = new THREE.Matrix4();
        projScreenMat.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
        pos.applyProjection( projScreenMat );

        return { x: ( pos.x + 1 ) * window.innerWidth / 2,
            y: ( - pos.y + 1 ) * window.innerHeight / 2 };
    }

    </script>

</body>
</html>

Answer 1

在我看来，您只引用update_labels（）中的一个note变量，因此每次update_labels（）函数运行时，它每次都会移动相同的标签。

告诉我们您如何创建笔记，我们可以为您提供更多帮助。

如果您将要更改的注释发送到update_labels（）函数，则可能。

function update_labels( vpos, note ) {


    var pos = get_screen_xy( vpos , camera );


    note.style.display = 'block';

    if ( pos.x >= x_max ) {
        note.style.left = '';
        note.style.right = x_max - pos.x;
    } else {
        note.style.right = '';
        note.style.left = pos.x;
    }

    if ( pos.y == y_max ) {
        note.style.top = '';
        note.style.bottom = y_max - pos.y;
    } else {
        note.style.bottom = '';
        note.style.top = pos.y;
    }

}

并称之为：

update_labels( notepos1, note1 );
update_labels( notepos2, note2 );

等。

此外，您应该开始接受答案，因为我发现您有几个问题，大多数都有答案，但您还没有接受任何答案。

使用JavaScript Creat Threejs标签方法

1 个答案: