Javascript 在屏幕上移动网格而不处于动画中
你能告诉我为什么这在浏览器中不起作用，尽管我认为这是在屏幕上移动网格而不被撕裂（撕裂动画）的正确方法吗 它开始正确地移动网格，但一段时间后，网格在没有逻辑的情况下四处飞行。对于浏览器来说，设置和清除间隔是否是一个问题 谢谢。Javascript 在屏幕上移动网格而不处于动画中,javascript,babylonjs,Javascript,Babylonjs,你能告诉我为什么这在浏览器中不起作用，尽管我认为这是在屏幕上移动网格而不被撕裂（撕裂动画）的正确方法吗 它开始正确地移动网格，但一段时间后，网格在没有逻辑的情况下四处飞行。对于浏览器来说，设置和清除间隔是否是一个问题 谢谢。现在它正在运行，也许我有一个解决方案： var leftf; var rightf; $(document).keyup(function() {
现在它正在运行，也许我有一个解决方案：
var leftf;
var rightf;
$(document).keyup(function() {
clearInterval(leftf);
clearInterval(rightf);
});
$(document).keydown(function (e) {
if (e.which == 37) {
// Left Arrow Pushed
leftf=setInterval(function(){
meshes[0].rotation.y=Math.PI/4;
if(meshes[0].position.x>-3.5)meshes[0].position.x-=0.1;
console.log(meshes[0].position.x);
},1000/engine.getFps());
} else if (e.which == 39) {
// Right Arrow Pushed
meshes[0].rotation.y=3*Math.PI/4;
//meshes[0].translate(BABYLON.Axis.X, Math.sin(v), BABYLON.Space.WORLD);
rightf=setInterval(function(){
meshes[0].position.x+=0.1;
},1000/engine.getFps());
}
});
js示例代码键盘箭头
html，正文{
溢出：隐藏；
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#renderCanvas{
宽度：100%；
身高：100%；
触摸动作：无；
}
文本
var canvass=$（“#renderCanvas”）；
//看看我们是否能做webgl
//JQUERY PEEPS警报：canvas是JQUERY obj-在canvas[0]访问dom obj
var dcanvas=画布[0]；
expmt=假；
如果（“窗口中的WebGLRenderingContext”）{
//警告（“浏览器至少知道什么是webgl。”）；
}
//某些浏览器没有用于画布的.getContext。。。
试试{
gl=dcanvas.getContext（“webgl”）；
}捕获（x）{
gl=null；
}
如果（gl==null）{
试试{
gl=dcanvas.getContext（“实验性webgl”）；
}捕获（x）{
gl=null；
}
如果（gl==null）{
//log（'但不能说'）；
}否则{
expmt=true；//警报（'webgl'）；
}
}否则{
//警报（“webgl本机”）；
}
如果（德国劳埃德船级社）{
//警报（“正在加载webgl内容”）；
}否则{
警报（“CHYBA:Vášprehliadačnepodporuje WebGL，ľutujeme。（错误：您的浏览器不支持WebGL，抱歉。）”；
canvas.remove（）；
}
if（巴比伦引擎isSupported（））{
var canvas=document.getElementById（“renderCanvas”）；
var引擎=新巴比伦引擎（画布，真）；
var场景=新巴比伦。场景（引擎）；
//天空盒
var skybox=BABYLON.Mesh.CreateBox（“skybox”，800.0，场景）；
var skyboxMaterial=新巴比伦。标准材质（“skyBox”，场景）；
skyboxMaterial.backFaceCulling=false；
skyboxMaterial.reflectionTexture=new BABYLON.CubeTexture（“索引子目录/skybox/cubemap”，场景）；
skyboxMaterial.reflectionTexture.CoordinateMode=BABYLON.Texture.SKYBOX_模式；
skyboxMaterial.diffuseColor=new BABYLON.Color3（0,0,0）；
skyboxMaterial.specularColor=新巴比伦。颜色3（0,0,0）；
skybox.material=skyboxMaterial；
//var sphere=BABYLON.Mesh.CreateSphere（“球体”，1.0，1.0，场景）；
var createScene=函数（）{
//设置环境
var light0=新巴比伦。点光源（“Omni”，新巴比伦。矢量3（0,10,80），场景）；
var摄像机=新巴比伦。自由摄像机（“自由摄像机”，新巴比伦。矢量3（0，0，-5），场景）；
var light2=新巴比伦。点光源（“Omni”，新巴比伦。矢量3（10，10，-80），场景）；
var左转=假；var右转=假；
var加速=错误；var中断=错误；
BABYLON.SceneLoader.ImportMesh（“Cube.001”，“index_subory/”，“jet2b.BABYLON”，场景，函数（网格）{
网格[0].position.x=Math.round（（Math.random（）*1）+0）；
网格[0].position.y=Math.round（（Math.random（）*1）+0）；
var速度=0；
scene.registerBeforRender（函数（）{
如果（scene.isReady（））{
camera.target=sphere.position；
速度=0.02；
如果（右转）{
网格[0]。旋转.y=3*Math.PI/4；
网格[0]。位置.x+=速度；
}
如果（左转）{
网格[0]。rotation.y=Math.PI/4；
网格[0]。位置.x-=速度；
}
如果（断开）{
网格[0]。rotation.y=Math.PI/2；
网格[0]。位置。y-=速度；
}
如果（加速）{
网格[0]。rotation.y=Math.PI/2；
网格[0]。位置。y+=速度；
}
}
});
var sphere=BABYLON.Mesh.CreateSphere（“球体”，0.5,0.5，场景）；
var simpleMaterial=新巴比伦。标准材质（“纹理2”，场景）；
simpleMaterial.diffuseColor=new BABYLON.Color3（0,1,0）；//绿色
球体材料=简单材料；
sphere.position.x=Math.floor（（Math.random（）*2））；
sphere.position.y=Math.floor（（Math.random（）*2））；
球体位置z=3；
myVar2变种；
函数myFunction2（）{
myVar=setInterval（函数（）{
//球体。平移（巴比伦。轴。Z，-0.1，巴比伦。空间。世界）；
球体位置z-=0.1；
varδ=0.2；
如果（Math.abs（Math.round（meshes[0].position.x-sphere.position.x]），你能给我们举个例子，而不仅仅是一堆代码。另外，请阅读：
Now it is running, perhaps I have a solution:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Babylon.js sample code keyboard arrows</title>
<!-- Babylon.js -->
<script src="index_subory/hand.js"></script>
<script src="index_subory/cannon.js"></script>
<script src="index_subory/oimo.js"></script>
<script src="index_subory/babylon.2.0.debug.js"></script>
<script src="index_subory/jquery.min.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<div id="idecko" style="background-color:grey;color:white;font-weight:bold;margin-left:auto;margin-right:auto;text-align:center;">text </div>
<canvas height="782" width="1440" id="renderCanvas"></canvas>
<script>
var canvass = $('#renderCanvas');
// check to see if we can do webgl
// ALERT FOR JQUERY PEEPS: canvas is a jquery obj - access the dom obj at canvas[0]
var dcanvas = canvass[0];
expmt = false;
if ("WebGLRenderingContext" in window) {
//alert("browser at least knows what webgl is.");
}
// some browsers don't have a .getContext for canvas...
try {
gl = dcanvas.getContext("webgl");
}catch (x){
gl = null;
}
if (gl == null) {
try {
gl = dcanvas.getContext("experimental-webgl");
}catch (x){
gl = null;
}
if (gl == null) {
//console.log('but can\'t speak it');
}else {
expmt = true; //alert('webgl experimentally.');
}
} else {
//alert('webgl natively');
}
if (gl || expmt) {
//alert("loading webgl content.");
} else {
alert("CHYBA: Váš prehliadač nepodporuje WebGL, ľutujeme. (ERROR: Your browser does not support WebGL, sorry.)");
canvas.remove();
}
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("index_subory/skybox/cubemap", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
//var sphere = BABYLON.Mesh.CreateSphere("sphere", 1.0, 1.0, scene);
var createScene = function () {
// setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10,80), scene);
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -5), scene);
var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -80), scene);
var turnLeft = false; var turnRight = false;
var accelerate = false; var breaking = false;
BABYLON.SceneLoader.ImportMesh("Cube.001", "index_subory/", "jet2b.babylon", scene,function(meshes){
meshes[0].position.x = Math.round((Math.random() * 1) + 0);
meshes[0].position.y = Math.round((Math.random() * 1) + 0);
var speed = 0;
scene.registerBeforeRender(function() {
if (scene.isReady()) {
camera.target = sphere.position;
speed=0.02;
if (turnRight) {
meshes[0].rotation.y=3*Math.PI/4;
meshes[0].position.x += speed;
}
if (turnLeft) {
meshes[0].rotation.y=Math.PI/4;
meshes[0].position.x -= speed;
}
if (breaking) {
meshes[0].rotation.y=Math.PI/2;
meshes[0].position.y -= speed;
}
if (accelerate) {
meshes[0].rotation.y=Math.PI/2;
meshes[0].position.y += speed;
}
}
});
var sphere = BABYLON.Mesh.CreateSphere("sphere", 0.5, 0.5, scene);
var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene);
simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
sphere.material=simpleMaterial;
sphere.position.x = Math.floor((Math.random() * 2) );
sphere.position.y = Math.floor((Math.random() * 2) );
sphere.position.z=3;
var myVar2;
function myFunction2() {
myVar = setInterval(function(){
//sphere.translate(BABYLON.Axis.Z, -0.1, BABYLON.Space.WORLD);
sphere.position.z-=0.1;
var delta=0.2;
if(Math.abs(Math.round(meshes[0].position.x-sphere.position.x))<=delta&&Math.abs(Math.round(meshes[0].position.y-sphere.position.y))<=delta&&Math.abs(Math.round(meshes[0].position.z-sphere.position.z))<=delta){
$('#idecko').html('<span style=\'background-color:yellow;color:red;\'>BANG! Červeného trpaslíka trafila zelená planéta! (Red dwarf shot by green planet!)</span>');
//$('#idecko').append("<embed src='index_subory/explosion.mp3' hidden=true autostart=true loop=false>");
if(navigator.userAgent.indexOf("Trident")==-1)var audio = new Audio('index_subory/explosion.mp3');
if(navigator.userAgent.indexOf("Trident")!=-1)var audio = new Audio('index_subory/explosion.wav');
audio.loop = false;
audio.play();
simpleMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1);//Green
sphere.material=simpleMaterial;
}else{
$('#idecko').html('<span style=\'background-color:grey;color:white;\'>Unikaj červený trpaslík (šípky na klávesnici)! (Run away red dwarf (keyboard arrows)!)</span>');
}
if(sphere.position.z<-5){
sphere.position.x = Math.floor((Math.random() * 2) );
sphere.position.y = Math.floor((Math.random() * 2) );
sphere.position.z=3;
simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
sphere.material=simpleMaterial;
}
}, 50);
}
function myStopFunction2() {
clearTimeout(myVar2);
}
myFunction2();
$(document).keyup(function (evt) {
if (evt.keyCode == 37 || evt.keyCode == 39) {
turnLeft = false;
turnRight = false;
}
if (evt.keyCode == 38 || evt.keyCode == 40) {
accelerate = false;
breaking = false;
}
});
$(document).keydown(function (evt) {
if (!scene)
return;
//console.log(evt.keyCode);
if (evt.keyCode == 32) {
}
//Key LEFT
if (evt.keyCode == 37) {
turnLeft = true;
turnRight = false;
}
//Key RIGHT
if (evt.keyCode == 39) {
turnLeft = false;
turnRight = true;
}
//Key UP
if (evt.keyCode == 38) {
accelerate = true;
breaking = false;
}
//Key BACK
if (evt.keyCode == 40) {
breaking = true;
accelerate = false;
}
});
});
return scene;
}
var scene = createScene();
var assetsManager = new BABYLON.AssetsManager(scene);
//var meshTask = assetsManager.addMeshTask("jet2 task", "", "./index_subory/", "jet2.babylon");
var textTask0 = assetsManager.addTextFileTask("text task0", "./index_subory/jet2b.babylon");
var textTask1 = assetsManager.addTextFileTask("text task1", "./index_subory/hand.js");
var textTask2 = assetsManager.addTextFileTask("text task2", "./index_subory/cannon.js");
var textTask3 = assetsManager.addTextFileTask("text task3", "./index_subory/oimo.js");
var textTask4 = assetsManager.addTextFileTask("text task4", "./index_subory/babylon.2.0.debug.js");
var textTask5 = assetsManager.addTextFileTask("text task5", "./index_subory/jquery.min.js");
var binaryTask1 = assetsManager.addBinaryFileTask("binary task 1", "./index_subory/explosion.mp3");
var binaryTask2 = assetsManager.addBinaryFileTask("binary task 2", "./index_subory/explosion.wav");
var binaryTask3 = assetsManager.addBinaryFileTask("binary task 3", "./index_subory/skybox/cubemap_nx.jpg");
var binaryTask4 = assetsManager.addBinaryFileTask("binary task 4", "./index_subory/skybox/cubemap_ny.jpg");
var binaryTask5 = assetsManager.addBinaryFileTask("binary task 5", "./index_subory/skybox/cubemap_nz.jpg");
var binaryTask6 = assetsManager.addBinaryFileTask("binary task 6", "./index_subory/skybox/cubemap_px.jpg");
var binaryTask7 = assetsManager.addBinaryFileTask("binary task 7", "./index_subory/skybox/cubemap_py.jpg");
var binaryTask8 = assetsManager.addBinaryFileTask("binary task 8", "./index_subory/skybox/cubemap_pz.jpg");
//engine.displayLoadingUI();
engine.loadingUIText = "Loading... (Načítavanie...)";
assetsManager.onTaskSuccess = function (task) {
// Do something with task.data.
//engine.hideLoadingUI();
};
assetsManager.onTaskError = function (task) {
// Do something with task.data.
alert('Error with loading by assetsManager...');
};
assetsManager.onFinish = function (task) {
//engine.hideLoadingUI();
engine.setSize($(window).width(), $(window).height());
engine.runRenderLoop(function () {
scene.render();
});
};
assetsManager.load();
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
}else{
alert("Chyba: Nemôžem spustiť WebGL. (Error: Can't run WebGL.)");
}
</script>
</body></html>