Rotate the object in the direction of its movement





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-1















For example, i pressed button "W" and object should turn to side move



enter image description here



if (keyBoard[87]) {
camera.position.x -= Math.PI / 10;
bulba.position.x -= Math.PI / 10;
}

if (keyBoard[83]) {
camera.position.x += Math.PI / 10;
bulba.position.x += Math.PI / 10;
}

if (keyBoard[65]) {
camera.position.z += Math.PI / 10;
bulba.position.z += Math.PI / 10;
}

if (keyBoard[68]) {
camera.position.z -= Math.PI / 10;
bulba.position.z -= Math.PI / 10;
}


My simple implementation of move










share|improve this question

























  • should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

    – petey
    Jan 3 at 20:29











  • @petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

    – k0mar
    Jan 3 at 20:41











  • "should turn" Immediately or rotate at some speed?

    – prisoner849
    Jan 3 at 21:14











  • @prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

    – k0mar
    Jan 3 at 21:18


















-1















For example, i pressed button "W" and object should turn to side move



enter image description here



if (keyBoard[87]) {
camera.position.x -= Math.PI / 10;
bulba.position.x -= Math.PI / 10;
}

if (keyBoard[83]) {
camera.position.x += Math.PI / 10;
bulba.position.x += Math.PI / 10;
}

if (keyBoard[65]) {
camera.position.z += Math.PI / 10;
bulba.position.z += Math.PI / 10;
}

if (keyBoard[68]) {
camera.position.z -= Math.PI / 10;
bulba.position.z -= Math.PI / 10;
}


My simple implementation of move










share|improve this question

























  • should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

    – petey
    Jan 3 at 20:29











  • @petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

    – k0mar
    Jan 3 at 20:41











  • "should turn" Immediately or rotate at some speed?

    – prisoner849
    Jan 3 at 21:14











  • @prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

    – k0mar
    Jan 3 at 21:18














-1












-1








-1








For example, i pressed button "W" and object should turn to side move



enter image description here



if (keyBoard[87]) {
camera.position.x -= Math.PI / 10;
bulba.position.x -= Math.PI / 10;
}

if (keyBoard[83]) {
camera.position.x += Math.PI / 10;
bulba.position.x += Math.PI / 10;
}

if (keyBoard[65]) {
camera.position.z += Math.PI / 10;
bulba.position.z += Math.PI / 10;
}

if (keyBoard[68]) {
camera.position.z -= Math.PI / 10;
bulba.position.z -= Math.PI / 10;
}


My simple implementation of move










share|improve this question
















For example, i pressed button "W" and object should turn to side move



enter image description here



if (keyBoard[87]) {
camera.position.x -= Math.PI / 10;
bulba.position.x -= Math.PI / 10;
}

if (keyBoard[83]) {
camera.position.x += Math.PI / 10;
bulba.position.x += Math.PI / 10;
}

if (keyBoard[65]) {
camera.position.z += Math.PI / 10;
bulba.position.z += Math.PI / 10;
}

if (keyBoard[68]) {
camera.position.z -= Math.PI / 10;
bulba.position.z -= Math.PI / 10;
}


My simple implementation of move







javascript three.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 22:52









WestLangley

79k8182200




79k8182200










asked Jan 3 at 20:23









k0mark0mar

1156




1156













  • should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

    – petey
    Jan 3 at 20:29











  • @petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

    – k0mar
    Jan 3 at 20:41











  • "should turn" Immediately or rotate at some speed?

    – prisoner849
    Jan 3 at 21:14











  • @prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

    – k0mar
    Jan 3 at 21:18



















  • should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

    – petey
    Jan 3 at 20:29











  • @petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

    – k0mar
    Jan 3 at 20:41











  • "should turn" Immediately or rotate at some speed?

    – prisoner849
    Jan 3 at 21:14











  • @prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

    – k0mar
    Jan 3 at 21:18

















should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

– petey
Jan 3 at 20:29





should turn to side move . I dont think I understand what you want. Would you please edit your question and write what you are looking to see?

– petey
Jan 3 at 20:29













@petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

– k0mar
Jan 3 at 20:41





@petey i guess yes)) so when i pressed "W" i want to see this result: joxi.ru/Q2KeqOjC4xjORr and when i pressed "S": joxi.ru/52aneoJC47OlqA

– k0mar
Jan 3 at 20:41













"should turn" Immediately or rotate at some speed?

– prisoner849
Jan 3 at 21:14





"should turn" Immediately or rotate at some speed?

– prisoner849
Jan 3 at 21:14













@prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

– k0mar
Jan 3 at 21:18





@prisoner849 maybe at some speed. coz i found method how to rotate immediately bulba.rotation.y = (Math.cos(bulba.position.y) * Math.PI / 2) * -1;

– k0mar
Jan 3 at 21:18












1 Answer
1






active

oldest

votes


















1














A very rough concept, using Tween.js:






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>








share|improve this answer
























  • thanks, its works :)

    – k0mar
    Jan 4 at 18:27












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029288%2frotate-the-object-in-the-direction-of-its-movement%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














A very rough concept, using Tween.js:






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>








share|improve this answer
























  • thanks, its works :)

    – k0mar
    Jan 4 at 18:27
















1














A very rough concept, using Tween.js:






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>








share|improve this answer
























  • thanks, its works :)

    – k0mar
    Jan 4 at 18:27














1












1








1







A very rough concept, using Tween.js:






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>








share|improve this answer













A very rough concept, using Tween.js:






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>








var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>





var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxGeom = new THREE.BoxBufferGeometry(1, 1, 3);
boxGeom.translate(0, 0, 2.5);
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
box.rotation.y = Math.PI * 0.5;
scene.add(box);

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {

if (![65, 68, 83, 87].includes(event.keyCode)) return;

var angleTo = 0;
switch (event.keyCode) {
case 87:
angleTo = Math.PI;
break;
case 65:
angleTo = Math.PI * -0.5;
break;
case 83:
angleTo = 0;
break;
case 68:
angleTo = Math.PI * 0.5;
break;
}

startTween(angleTo);

}

function startTween(angleTo) {
let tween = new TWEEN.Tween(box.rotation).to({
y: angleTo
}, 250).onStart(() => {
window.removeEventListener("keydown", onKeyDown, false);
}).onComplete(() => {
window.addEventListener("keydown", onKeyDown, false)
});
tween.start();
}

renderer.setAnimationLoop(() => {
TWEEN.update();
renderer.render(scene, camera);
})

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 22:12









prisoner849prisoner849

7,80821428




7,80821428













  • thanks, its works :)

    – k0mar
    Jan 4 at 18:27



















  • thanks, its works :)

    – k0mar
    Jan 4 at 18:27

















thanks, its works :)

– k0mar
Jan 4 at 18:27





thanks, its works :)

– k0mar
Jan 4 at 18:27




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029288%2frotate-the-object-in-the-direction-of-its-movement%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas