three.jsまたはbabylon.jsの3Dシーンの要素を拡大するために拡大鏡効果を作成するにはどうすればよいですか？

かなり長い間、私は、マウスに追随してシーン内の要素を拡大する拡大鏡効果を作成する方法を見つけようとしてきました。ライフルスコープのようなもの。どのアイデアをどこから始めるのですか？three.jsまたはbabylon.jsの3Dシーンの要素を拡大するために拡大鏡効果を作成するにはどうすればよいですか？

出典

2016-10-12 user2016210

私が知っているすべてのプラグイン、画像と仕事..... – Hackerman

当然、質問を策定した後、解決策が私に起こりました。残念ながら、私が探していたネイティブのbabylon.jsソリューションではありませんが、まだ動作しています。 divsと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>

出典

2016-10-12 18:50:34 user2016210

たぶん、いくつかのスクリーンショットは、あなたの答えにクールになる要求として –

スクリーンショットが追加 – user2016210

three.jsまたはbabylon.jsの3Dシーンの要素を拡大するために拡大鏡効果を作成するにはどうすればよいですか？

答えて

関連する問題