I am new to Three.js. I would like to create a 2 cube and 2 text over cubes and rotate it. I have done with it but in wrong rotation.
my code is:
function render() {
var delta = Math.random() * (0.02 + 0.02) + speed;
cubeGroup.rotation.x -= cubeGroup.rotation.x+delta;
cubeGroup.rotation.y += delta + 0.02;
cubeGroup.rotation.z -= 0.02;
textGroup.rotation.x -= textGroup.rotation.x+delta;
textGroup.rotation.y -= delta + 0.02;
textGroup.rotation.z += 0.02;
renderer.render(scene, camera);
}
but it rotates in wrong directions.
my expected result should be like this
The result I am getting is this
Thanks in advance.
Related
I have what I believe is a fairly common setup for a ThreeJS scene that emulates a first person shooter world. I have this block of code in my animate loop, which came from one of the ThreeJS "controls" example. I can't remember which one since it's been a while.
const onObject = userIsLookingAtObjects.length > 0;
let delta = (currentTime - prevTime) / 1000;
// Limit long delay gaps, which indicate
// a background task interfered with us and
// we don't want the camera/user
const limitDelta = 0.2;
if (delta > limitDelta) {
delta = Math.min(limitDelta, delta);
console.warn(`${errPrefix}Capping delta time at: ${limitDelta}`);
}
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
// ROS: The Number() constructor is simply being used
// to convert the TRUE/FALSE move<direction> values
// to a number in the following set of values: [-1, 0, 1]
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize(); // this ensures consistent movements in all directions
if (moveForward || moveBackward)
velocity.z -= direction.z * 400.0 * delta;
if (moveLeft || moveRight)
velocity.x -= direction.x * 400.0 * delta;
if (onObject === true) {
// ROS: This appears to be part of a check to allow jumping or
// not. See the raycast intersection code above involving
// onObject.
velocity.y = Math.max(0, velocity.y);
canJump = true;
if (g_BreakHerePlease)
// This aids tracing using Chrome DevTools. See pointerlock.js
// for the keystroke that sets g_BreakHerePlease to TRUE.
console.info(`${errPrefix}Set DevTools breakpoint here.`);
}
g_ThreeJsControls.moveRight(-velocity.x * delta);
g_ThreeJsControls.moveForward(-velocity.z * delta);
g_ThreeJsControls.getObject().position.y += (velocity.y * delta); // new behavior
if (g_ThreeJsControls.getObject().position.y < 10) {
velocity.y = 0;
g_ThreeJsControls.getObject().position.y = 10;
canJump = true;
}
Everything works fine, but I noticed something today. If one of my animation models is LERP'ing and I move the camera continuously, like when you "strafe" around an object in an FPS game, the object that is LERP'ing slows way down. So slow, that at first I thought that moving the camera actually stopped other animations. It doesn't, it just brings them to a snail's crawl.
What could be causing this? I'm hoping it's not inherent to moving the camera around a lot because "players" in my world will be moving constantly. Can I fix thi?
I'm trying to make a solar system with Three.js. I have maked the earth rotate around the sun, but my problem is I do not know how to make the moon rotate around the earth, because the center the rotation center is always the sun, (I guess that it's for because the sun is in the coordinate 0,0,0).
This is my render function with translation and rotation moves:
function render(){
cameraControls.update();
angle +=0.01;
scene.getObjectByName("sun").rotation.y += 0.005;
scene.getObjectByName("moon").rotation.y += 0.020;
scene.getObjectByName("moon").position.x = 30 * Math.cos(angle);
scene.getObjectByName("moon").position.z = 30 * Math.sin(angle);
scene.getObjectByName("earth").rotation.y += 0.015;
scene.getObjectByName("earth").position.x = 80 * Math.cos(angle);
scene.getObjectByName("earth").position.z = 80 * Math.sin(angle);
scene.getObjectByName("clouds").rotation.y += 0.017;
scene.getObjectByName("clouds").position.x = 80 * Math.cos(angle);
scene.getObjectByName("clouds").position.z = 80 * Math.sin(angle);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
An example of how it looks
I'm a beginner with Three.js. Thanks!
You can do this by using THREE.Group as pivot objects. The general idea looks like this:
var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );
In your animation loop you always rotate the pivot objects.
Demo: https://jsfiddle.net/f2Lommf5/6202/
I have a line geometry made with three.js, which I want to move as a spermatozoid (i.e. the head moves first, then all of the points along the tail move accordingly to the head) using GLSL.
Here is a visual representation of what I want:
So as you can see, point G eases to (follows) H, which in turn follows point E, which in turn follows the head.
I have a working examples, being animated on the CPU. Here is the code:
class Boid {
constructor (position) {
this.position = position
this.speed = 0.0009 + Math.random() * 0.0003
this.pointsNum = 12
this.points = []
this.line = null
this.angle = Math.random() * 360
for (let i = 0; i < this.pointsNum; i += 1) {
this.points.push(new THREE.Vector3(1, 1, 1))
}
this.angle = 0
}
update (target, time) {
if (time) {
this.line.geometry.verticesNeedUpdate = true
this.line.geometry.vertices.forEach((p, i) => {
let nextP = this.line.geometry.vertices[i + 1]
if (nextP) {
// if it's not the HEAD point, follow the next point in the geometry vertices
p.x += (nextP.x - p.x) * (time * 8.0)
p.y += (nextP.y - p.y) * (time * 8.0)
p.z += (nextP.z - p.z) * (time * 8.0)
} else {
// if the point is in fact the head, ease it according to some random moving point in our scene (target)
p.x += (target.x - p.x) * time
p.y += (target.y - p.y) * time
p.z += (target.z - p.z) * time
}
})
}
}
}
And here is a working example.
This technique is working, but would like to accomplish the same stuff with GLSL. My question is how should I approach it? Should I pass the next vertex position to the previous one and ease in my vertex shader? How should I keep track of the next's point position?
Any help is more then appreciated, I have been thinking about this a lot without any success.
I want to focus the camera on THREE.Geometry, one vertex at a time and
Transition the camera to the next vertex of the same Geometry
How should i accomplish 1 & 2?
I created a fiddle.
http://jsfiddle.net/5oajajpd/
the function move camera goes through each vertex and sets the camera position. To transition this with animation you can set the x,y, and z properties through the jquery animate function, or your animation lib of choice.
The move camera function is triggered by an interval. In this sphere example it will spiral around and around the sphere forever.
var i = 0;
function moveCamera() {
var point = mesh.geometry.vertices[i];
var coeff = 1 + altitude / rad;
camera.position.x = point.x * coeff;
camera.position.y = point.y * coeff;
camera.position.z = point.z * coeff;
camera.lookAt(mesh.position);
i++;
if (i > mesh.geometry.vertices.length) {
i = 0;
}
}
there,how can I move my camera in three.js? I mean than,scene I have a 'road',for instance,I have make a model of many roads in blender and I want to load it in three.js,and I want to move the camera along the road,so what can I do? can you give some simple code? Thank you.
You could set a clock and update the camera's position and lookAt every refresh.
var clock = new THREE.Clock();
var increment;
function animate() {
delta = clock.getDelta();
increment += delta;
// moves camera parallel to x axis
camera.position.x += increment;
camera.position.y = 100;
camera.position.z = 200;
render();
}
Or you could try using TWEEN.js.