登峰造极境

  • WIN
    • CSharp
    • JAVA
    • OAM
    • DirectX
    • Emgucv
  • UNIX
    • FFmpeg
    • QT
    • Python
    • Opencv
    • Openwrt
    • Twisted
    • Design Patterns
    • Mysql
    • Mycat
    • MariaDB
    • Make
    • OAM
    • Supervisor
    • Nginx
    • KVM
    • Docker
    • OpenStack
  • WEB
    • ASP
    • Node.js
    • PHP
    • Directadmin
    • Openssl
    • Regex
  • APP
    • Android
  • AI
    • Algorithm
    • Deep Learning
    • Machine Learning
  • IOT
    • Device
    • MSP430
  • DIY
    • Algorithm
    • Design Patterns
    • MATH
    • X98 AIR 3G
    • Tucao
    • fun
  • LIFE
    • 美食
    • 关于我
  • LINKS
  • ME
Claves
长风破浪会有时,直挂云帆济沧海
  1. 首页
  2. Programming
  3. babylon.js
  4. 正文

babylonjs如何获取一个mesh在屏幕上坐标

2024-10-14

测试平台:https://playground.babylonjs.com/?BabylonToolkit#CJNZRE#3

测试效果:

测试代码:

// 更新 DOM 元素的位置
function updateIndicatorPosition(camera,mesh,indicator) {
    var meshPosition = mesh.getBoundingInfo().boundingBox.centerWorld;
    var projectedPosition = BABYLON.Vector3.Project(
        meshPosition,
        BABYLON.Matrix.Identity(),
        scene.getTransformMatrix(),
        camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight())
    );
    const canvas = document.getElementById('renderCanvas');
// 获取 canvas 元素的边界框信息
    const rect = canvas.getBoundingClientRect();
    // 将投影的坐标转换为屏幕坐标
    indicator.style.left = (rect.left+projectedPosition.x - 10) + "px"; // -10 是为了将指示器中心对准 mesh
    indicator.style.top = (rect.top+projectedPosition.y - 10) + "px";  // -10 是为了将指示器中心对准 mesh
}

var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);


// 创建一个 DOM 元素来指示 mesh 的位置
var indicator = document.createElement("div");
indicator.style.position = "absolute";
indicator.style.width = "20px";
indicator.style.height = "20px";
indicator.style.backgroundColor = "red";

document.body.appendChild(indicator);


    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape.
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // Our built-in 'ground' shape.
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

    engine.runRenderLoop(function() {
    scene.render();
    updateIndicatorPosition(camera,sphere,indicator);
});

    return scene;
};
标签: 暂无
最后更新:2024-10-14

代号山岳

知之为知之 不知为不知

点赞
< 上一篇
下一篇 >

COPYRIGHT © 2099 登峰造极境. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备14031139号-5

川公网安备51012202000587号