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/
Related
I'm working with three.js, attempting to model a real world camera. As such, I'd like to limit its axis of rotation to 90 degrees along x and y axises.
Is there a simply way to do this? My current code isn't working particularly well (and goes crazy when you attempt to move the camera past the X and Y boundaries simultaneously)
if(xRot != null && xRot != undefined){
camera.rotateX(xRot);
}
if(yRot != null && yRot != undefined){
camera.rotateY(yRot);
}
if(camera.rotation.x < minCameraRotX){
camera.rotation.x = minCameraRotX;
}else if (camera.rotation.x > maxCameraRotX){
camera.rotation.x = maxCameraRotX;
}
if(camera.rotation.y < minCameraRotY){
camera.rotation.y = minCameraRotY;
}else if(camera.rotation.y > maxCameraRotY){
camera.rotation.y = maxCameraRotY;
}
Any advice would be greatly appreciated!!!
I actually managed to find a solution by checking some of the existing code in a Three.js demo for a library called PointerLock. The idea is to actually stack multiple objects inside each other: start with an object that moves horizontally (the yaw object), place another object inside the yaw object that moves vertically (the pitch object), and then place the actual camera inside the pitch object.
Then, you only rotate the outside objects (yaw and pitch) along their respective axises, so if you rotate both, they'll self-correct. For example, if you rotate the yaw 45 degrees along the y-axis (making it turn to the right) and then rotate the pitch 45 degrees (making it turn downward), the pitch will go 45 degrees downward from the yaw's already rotated position.
Given that the camera is inside both, it just points wherever the yaw and pitch direct it.
Here is the code
/*
* CAMERA SETUP
*
* Root object is a Yaw object (which controls horizontal movements)
* Yaw object contains a Pitch object (which controls vertical movement)
* Pitch object contains camera (which allows scene to be viewed)
*
* Entire setup works like an airplane with a
* camera embedded in the propellor...
*
*/
// Yaw Object
var yawObject = new THREE.Object3D();
// Pitch Object
var pitchObject = new THREE.Object3D();
// Camera Object
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// Max Camera angles (in radians)
var minCameraRotX = 0.5;
var maxCameraRotX = 0.5;
var minCameraRotY = 1;
var maxCameraRotY = 1;
// Setup
yawObject.add( pitchObject );
pitchObject.add( camera );
scene.add(yawObject);
...
var rotateCamera = function(xRot, yRot, zRot){
yawObject.rotation.y += yRot;
pitchObject.rotation.x += xRot;
// Enforce X-axis boundaries (rotates around y-axis)
yawObject.rotation.y = Math.max( minCameraRotY, Math.min( maxCameraRotY, yawObject.rotation.y ) );
// Enforce Y-axis boundaries (rotates around x-axis)
pitchObject.rotation.x = Math.max( minCameraRotX, Math.min( maxCameraRotX, pitchObject.rotation.x ) );
}
Here is the source code I referenced: https://github.com/mrdoob/three.js/blob/acda8a7c8f90ce9b71088e903d8dd029e229678e/examples/js/controls/PointerLockControls.js
Also, this is sort of cheesy, but this little plane cartoon helped me visual exactly what was going on in my setup
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;
}
}
I have a rotating sphere on which I have a div attached the example can be viewed here: https://jsfiddle.net/ao5wdm04/
I calculate the x and y values and place the div using a translate3d transform and that works quite well.
My question is how to can get the values for the rotateX, rotateY and rotateZ or rotate3d transforms so the div "tangents" the sphere surface. I know the cube mesh faces the sphere center so I assume the rotation vector of the outward facing normal vector in relation to the camera would contain the values I need. But I'm not quite sure how to obtain these.
Update
By using Euler angles I'm almost achieving the desired effect, shown here: https://jsfiddle.net/ao5wdm04/1/ but the rotation is not large enough.
Disclaimer: I know nothing about three.js. I've just done a bit of OpenGL.
Your euler angles are coming from a model-view-projected origin (lines 74-80). I can't see the logic behind this.
If your div is on the sphere surface, then it should be oriented by the normal of the sphere at the location of the div. Fortunately, you already have these angles. They are named rotation.
If you replace the euler angles in lines 82-84 with the rotation angles used to position the div, then in my browser the div appears edge on when it is at the edge of the circle, and face on when it is at the centre. It kind of looks like it is moving in a circle, edge on to the screen. Is this the effect you want?
My modification to the linked code:
82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = (rotation.y * (180/ Math.PI));
84 var rotZ = 0;
EDIT
Ah, ok. The rotation variable is just that of the camera. It governs the tangent at the equator. You also need to modify the orientation to account for latitude.
Make rotY equal to negative your latitude. Then make sure that this rotation happens before the equatorial rotation. Rotations are not commutative.
In summary, changes from the code at https://jsfiddle.net/ao5wdm04/1/ are as follows:
27 var lat = 45 * Math.PI / 180;
...
82 var rotX = (rotation.x * (180/ Math.PI));
83 var rotY = - 45;
...
88 document.getElementById('face').style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotateY('+rotX+'deg) rotateX('+rotY+'deg)';
I don't know how the latitude should propagate between the init and render functions. As I said, I'm not familiar with the language.
For details about transformation and rotation in openGL or any other graphics please go through here.
Basic -
There is basically 2 kind of transformations in 3D world-
Translation
Rotation
A small example on this things are given here.
If u go through all of them, I think u have a clear concept on the 3D transformation system.
If u can understand those, u can easily simulate that :) because u need to do this 2 things for each move at the same time.
Try this code-
var camera, scene, renderer, raycaster, geometry, material, mesh, box;
var rotation = {
x: 0,
y: 0
};
var distance = 500;
init();
animate();
function init() {
raycaster = new THREE.Raycaster(); ;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = distance;
camera.position.y = 100;
scene.add(camera);
geometry = new THREE.SphereGeometry(100, 50, 50, 50);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var transform = new THREE.Matrix4().getInverse(scene.matrix);
var lat = 0 * Math.PI / 180;
var lon = 90 * Math.PI / 180;
var r = 100;
var p = new THREE.Vector3(-r * Math.cos(lat) * Math.cos(lon),
r * Math.sin(lat),
r * Math.cos(lat) * Math.sin(lon)
);
p.applyMatrix4(transform);
var geometry = new THREE.CubeGeometry(10, 10, 10);
box = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0xff0000,
}));
box.position.set(p.x, p.y, p.z);
box.lookAt(mesh.position);
//scene.add(box);
box.updateMatrix();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
rotation.x += 0.01;
camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
camera.lookAt(mesh.position);
var w = window.innerWidth;
var h = window.innerHeight;
var mat = new THREE.Matrix4();
var v = new THREE.Vector3();
mat.copy(scene.matrix);
mat.multiply(box.matrix);
v.set(0, 0, 0);
v.applyMatrix4(mat);
v.project(camera);
var euler = new THREE.Euler().setFromVector3(v);
var rotX = (rotation.x * (180/ Math.PI));
var rotY = (rotation.y * (180/ Math.PI));
var rotZ = 0;
var x = (w * (v.x + 1) / 2) - 12.5; //compensate the box size
var y = (h - h * (v.y + 1) / 2) - 12.5;
document.getElementById('face').style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotateX('+rotY+'deg) rotateY('+rotX+'deg) rotateZ('+rotZ+'deg)';
renderer.render(scene, camera);
}
#face {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: red;
}
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<div id="face"></div>
i need some help on this one.
I have search and couldn't find solutions for this, because all the solutions were about rotating a camera around a sphere.
In my case, the camera is still. I have a webgl globe with points around using latitude an longitude. I just want to click a point and rotate the globe mesh so that it centers that point.
I have the point Vector3, it's latitude and longitude but i can't figure how to do this.
Is someone around that can help me? Or know any example like this?
Thank you in advance
To rotate a sphere to match a lat/lon the camera center, you can do this:
var verticalOffset = 0.1;
sphere.rotation.x = latitude * ( Math.PI / 180 ) - verticalOffset;
sphere.rotation.y = ( 270 - longitude ) * ( Math.PI / 180 );
So then you can call this with a tween:
var tween = new TWEEN.Tween(sphere.rotation)
.to({ x: latitude * ( Math.PI / 180 ) - verticalOffset, y: ( 270 - longitude ) * ( Math.PI / 180 ) }, 2000)
.start();
I have created a jsfiddle demonstrating this, where a marker is set at Lissabon:
http://jsfiddle.net/L0rdzbej/208/
Update
In case the sphere has been turned around a lot, the Y-rotation value climbs up. Then tweening the rotation as suggested above results in a lot of reverse spinning until the point is displayed at camera center.
To avoid this, it is possible to set the rotations via quaternions. The tweening must be slerp'ed using a temporal quaternion.
For demonstration purposes I have set the spheres initial Y rotation to PI * 12.1, then applying the quaternion.
http://jsfiddle.net/L0rdzbej/217/
var phi = latitude * Math.PI / 180;
var theta = ( 270 - longitude) * Math.PI / 180;
var euler = new THREE.Euler(phi, theta, 0, 'XYZ');
// rotation (using slerp)
var qstart = new THREE.Quaternion().copy(sphere.quaternion); // src quaternion
var qend = new THREE.Quaternion().setFromEuler(euler); //dst quaternion
var qtemp = new THREE.Quaternion();
var o = {t: 0};
new TWEEN.Tween(o).to({t: 1}, 2500)
.onUpdate(function () {
THREE.Quaternion.slerp(qstart, qend, qtemp, o.t);
sphere.quaternion.copy( qtemp );
})
.start();
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.