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;
}
For example, i pressed button "W" and object should turn to side move
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
add a comment |
For example, i pressed button "W" and object should turn to side move
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
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
add a comment |
For example, i pressed button "W" and object should turn to side move
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
For example, i pressed button "W" and object should turn to side move
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
javascript three.js
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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>
thanks, its works :)
– k0mar
Jan 4 at 18:27
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
thanks, its works :)
– k0mar
Jan 4 at 18:27
add a comment |
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>
thanks, its works :)
– k0mar
Jan 4 at 18:27
add a comment |
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>
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>
answered Jan 3 at 22:12
prisoner849prisoner849
7,80821428
7,80821428
thanks, its works :)
– k0mar
Jan 4 at 18:27
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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