如何創建放大鏡效果來放大Three.js或babylon.js 3d場景中的元素？
[英]How might I create a magnifying glass effect to magnify elements in a three.js or babylon.js 3d scene?
問題描述
相當長一段時間以來，我一直在嘗試找到一種創建放大鏡效果的方法，該效果將跟隨鼠標並放大場景中的元素。 有點像步槍瞄准鏡。 任何想法從哪里開始？
1 個解決方案
解決方案1
0 已采納 2016-10-12 18:50:34
自然，提出問題后，我想到了解決方案。 雖然，不幸的是，它不是我一直在尋找的本地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>
Babylon.js場景未加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.