BabylonJS - Click position problem on scrolled page
When canvas in scrolled HTML page, the ActionEvent is not correctly positionned
by Lio Vousk-prod.
HTML
<script src="http://vousk-prod.net/webgl/babyl/includes/hand.minified-1.3.4.js"></script>
<script src="http://vousk-prod.net/webgl/babyl/includes/babylon.1.12-beta.js"></script>
<div id="space1" class="some_space"> </div>
<canvas id="canvas_3d"></canvas>
<div class="some_space"> </div>
CSS
body {
background: #236478;
}
#space1 {
position: relative;
top: 40px;
}
#canvas_3d {
position: relative;
width : 600px;
height: 400px;
top: -25px; left: 30px;
border: 1px dashed white;
}
.some_space {
background: yellow;
width : 100%;
height: 150px;
border: 1px dotted yellow;
}
JavaScript
(function(){
var canvas = document.getElementById("canvas_3d");
var engine = new BABYLON.Engine(canvas, true);
scene = createScene(engine, canvas);
engine.runRenderLoop(function () {
scene.render();
});
})()
function createScene(engine, canvas) {
var scene = new BABYLON.Scene(engine);
// Setup environment
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.setPosition(new BABYLON.Vector3(20, 200, 400));
camera.attachControl(canvas);
camera.lowerBetaLimit = 0.1;
camera.upperBetaLimit = (Math.PI / 2) * 0.99;
camera.lowerRadiusLimit = 150;
scene.clearColor = new BABYLON.Color3(0, 0, 0);
var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
light1.diffuse = BABYLON.Color3.Red();
light2.diffuse = BABYLON.Color3.Green();
light3.diffuse = BABYLON.Color3.Blue();
// Ground
var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.specularColor = BABYLON.Color3.Black();
ground.material = groundMaterial;
// Boxes
var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);
var redMat = new BABYLON.StandardMaterial("ground", scene);
redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.emissiveColor = BABYLON.Color3.Red();
redBox.material = redMat;
redBox.position.x -= 100;
var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);
var greenMat = new BABYLON.StandardMaterial("ground", scene);
greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
greenMat.emissiveColor = BABYLON.Color3.Green();
greenBox.material = greenMat;
greenBox.position.z -=...