Question

很长一段时间以来，我一直试图找到一种方法来创建一个放大镜效果，它将跟随鼠标并放大场景中的元素。像步枪范围的东西。任何想法从哪里开始？

Answer 1

当然，在制定问题后，我发现了一个解决方案。虽然，不幸的是，它不是原生的babylon.js解决方案，我一直在寻找它仍然有效。它使用div和jquery来放大在3D空间内用作平面材料的源图像。诀窍在于'过度对接'功能，其中鼠标在目标上的位置已被转换为图像高度和宽度的百分比，用于根据该百分比移动玻璃内的放大div。我已经使用php从数据库中获取图像然后计算它的大小只是因为这是我的项目的结构。但是你可以从任何图像开始，然后手动输入ht和wd。

以下是演示：http://64.78.15.229/eyemap3Djs/magnify.html

我希望这对某人有用。也许它可以用作游戏中的步枪范围或类似的东西。

 <?php

 $studyID= $_GET['studyID'];

 $myServer = "[your server]";
 $myUser = "[you]";
 $myPass = "[password]";
 $myDB = "[db]"; 

 $dbhandle = mssql_connect($myServer, $myUser, $myPass)
   or die("Couldn't connect to SQL Server on $myServer"); 
 $selected = mssql_select_db($myDB, $dbhandle)
   or die("Couldn't open database $myDB"); 
 $query = "SELECT * FROM [your table] WHERE id=".$studyID; 

 $result = mssql_query($query);

 $numRows = mssql_num_rows($result); 
 while($row = mssql_fetch_array($result))
 {
     $imageFile= $row["imageFile"];
     $mag= $row["mag"];
 }
 mssql_close($dbhandle);

 $size = getimagesize($imageFile);
 $ht=$size[1];
 $wd=$size[0];

 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
 <style>
     html, body {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      color: #333;
      width   : 100%;
      height  : 98%;
      margin  : 0;
      padding : 0;
     }

     #renderCanvas {
      width   : 100%;
      height  : 100%;
      touch-action: none;
      z-index: 100;
     }
     #glass{
      position:absolute; 
      overflow:hidden;
      border:1px solid black;
      border-radius: 50%;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
       pointer-events: none;
      z-index: 100;
      display:none;
     }

    #legend{
      position:absolute;
      font-size:10px;
      font-family:Verdana, Geneva, sans-serif;
      top:10px;
      left:10px;
      height:50px;
      width:60px;
      background-color:white;
      z-index: 200;
    }

 </style>

 <title>Magnifier</title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="js/babylon.2.4.js"></script>

  <script>
     var studyID=<?php echo $studyID; ?>;
     var imageFile="<?php echo $imageFile; ?>";
     var mag=<?php echo $mag; ?>;
     var picW=<?php echo $wd; ?>;
     var picH=<?php echo $ht; ?>;
     picW=picW*mag;
     picH=picH*mag;
     var percentage=picW/picH;
     var svgW=1024;
     var svgH=(1024/picW)*picH;
     var glassH=200;
     var glassW=200;
     var scene;
     var camera;
     var cameraz=0;
     var glassOff=false;
     var leftPosition="";
     var rightPosition="";

     $(document).ready(function(){  
         $("#targetImg").attr({'src':imageFile});
         $("#targetImg").css({'height':picH, 'width':picW});
     });


     window.addEventListener('DOMContentLoaded', function(){

      var canvas = document.getElementById('renderCanvas');

      var engine = new BABYLON.Engine(canvas, true);

      var createScene = function () {
          var scene = new BABYLON.Scene(engine);

          var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-25, 49, -40), scene);

          this.angularSensibility = 5000;

          cameraz=-1*(picW/140);

          camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(-0.6, -4, cameraz), scene);

          camera.keysUp = [84]; // T
          camera.keysDown = [66]; // B
          camera.keysLeft = [70]; // L
          camera.keysRight = [72]; // H
          camera.angularSensibility = this.angularSensibility;
          camera.attachControl(canvas, true);

          //Ground
          var ground = BABYLON.Mesh.CreatePlane("ground", 200.0, scene);
          ground.material = new BABYLON.StandardMaterial("groundMat", scene);       
          ground.material.diffuseTexture = new BABYLON.Texture("textures/wallTile.jpg", scene);
          ground.material.diffuseTexture.hasAlpha = true;
          //ground.material.backFaceCulling = false;
          ground.position = new BABYLON.Vector3(5, -10, -15);
          ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);

          //target
          var target = new BABYLON.Mesh.CreatePlane("target", 10, scene);
          target.scaling.x = percentage;
          target.material = new BABYLON.StandardMaterial("Mat", scene);
          target.material.diffuseTexture = new BABYLON.Texture("<?php echo $imageFile; ?>", scene);
          target.material.emissiveColor = new BABYLON.Color3(1, 1, 1); // self-illuminate
          target.material.diffuseTexture.hasAlpha = true;
          target.position = new BABYLON.Vector3(0, -5, -5);

          scene.gravity = new BABYLON.Vector3(0, -0.9, 0);

          scene.collisionsEnabled = true;

          camera.checkCollisions = true;
          camera.applyGravity = true;

          camera.ellipsoid = new BABYLON.Vector3(1, 3, 1);

          ground.checkCollisions = true;
          target.checkCollisions = true;

          return scene;
      }

       scene = createScene();

      engine.runRenderLoop(function(){
          scene.render();
      });

      window.addEventListener('resize', function(){
          engine.resize();
      });

      window.addEventListener("mousemove", function (e) {
          if(glassOff==false){

             var pickResult = scene.pick(scene.pointerX, scene.pointerY);

           if (pickResult.hit) {
               var w=percentage*10;
               var h = (pickResult.pickedPoint.x).toFixed(4);
               var v = (pickResult.pickedPoint.y).toFixed(4);
               var x=0;
               var y=0;

               y=v*-1;
               percenty=(y/10).toFixed(4);
               x=Number(((w/2))+(1*h)).toFixed(4);
               percentx=(x/w).toFixed(4);

               if(pickResult.pickedMesh.name=="target"){
                $("#glass").show();
                overtarget(e,percentx,percenty);
                overtarget=true;
               }else{
                $("#glass").hide();
                overtarget=false;
               }
           }
          }
      });
     });

 function overtarget(e,percentx,percenty){
      $('#glass').css({
          height:glassH,
          width: glassW,
          left:  e.pageX-glassW/2,
          top:   e.pageY-glassH/2
      });

      var picX = (percentx * picW) * -1;
      var picY = (percenty * picH) * -1;

      $('#targetImg').css({
         'margin-left':  picX+glassW/2,
         'margin-top':   picY+glassH/2
      });
 }
 </script>

 </head>
 <body>
     <canvas id="renderCanvas"></canvas>
     <div id="glass"><img id="targetImg" src=""/></div>
     <div id="legend">T=forward<BR />B=back<BR />F=left<BR />H=right</div>     
 </body>`
 </html>

我如何创建放大镜效果来放大three.js或babylon.js 3d场景中的元素？

1 个答案: