I try to apply texture on ground (a THREE.BoxBufferGeometry) , with shadow of a sphere (sphere is animated by Ammo.js)
The presence of shadow seems to depends of two parameters:
the shadow.camera settings of the THREE.DirectionalLight :
thObject.shadow.camera.left = -d;
thObject.shadow.camera.right = d;
thObject.shadow.camera.top = d;
thObject.shadow.camera.bottom = -d;
the shadow.camera.far setting :
thObject.shadow.camera.far = 110;
(it seems to depend of light position regarding shadow projection on ground).
But "playing" with these two settings create the following situation :
ripples on texture
shadow or not shadow (see after a part of shadow).
How to set these parameters but not by trial-and-error ?
(This depends of light position too): for exemple if light is not pointing in vertical axle:
pos: { x: -20, y: 35, z: -20 },
lookAt: { x: 0, y: 0, z: 0 },
Related
I'm wondering if it is possible (I hope it is) to set init camera rotation read from onGetPosition?
My onGetPosition function look like this:
function onGetPosition() {
console.log({
Yaw: worldRenderer.camera.rotation.y * 180 / Math.PI,
Pitch: worldRenderer.camera.rotation.x * 180 / Math.PI,
x: worldRenderer.camera.rotation.x,
y: worldRenderer.camera.rotation.y,
z: worldRenderer.camera.rotation.z
});
...
}
https://github.com/googlevr/vrview/blob/4e8e57eaddd8e69c8e032a6b5844d4e96af02156/src/embed/main.js#L357
I use this image as a texture:
Initial view, with default_yaw set to 0 degrees looks like this:
In this position onGetPosition returns:
{Yaw: 0, Pitch: -0, x: -0, y: 0, z: -0}
Then I rotate the scene to see this position (about 90 deg to the left):
onGetPosition returns:
{Yaw: 75.66036892219512, Pitch: -42.97581864568984, x: -0.7500695341072581, y: 1.3205225509658982, z: 0.7343037709331535}
I thought that if I set camera rotation inside setDefaultYaw_ function I would see last view so I did this:
WorldRenderer.prototype.setDefaultYaw_ = function(angleRad) {
...
this.camera.setRotationFromEuler(new THREE.Euler(-0.7500695341072581, 1.3205225509658982, 0.7343037709331535, 'XYZ'));
};
https://github.com/googlevr/vrview/blob/2dd890d147f702b9c561694bda5c86575c2a3d44/src/embed/world-renderer.js#L235
Unfortunately nothing happened I still see the view from second image on init.
How can I solve it?
See a jsfiddle here
I am tweening along a bézier path with 3 points.
// bezier data
var bezierData = {
curviness: 1,
autoRotate: false,
values: [
{x: 0, y: 0, rotation:"40_cw"}, /* <-- The desired state of the object before any animation has happened */
{x: 20, y: 0, rotation:"0_ccw"},
{x: 40, y:0, rotation:"-20_ccw"}
]
};
// build tween
var tween = new TimelineMax()
.add(TweenMax.to("#testobj", 1, {css:{bezier: bezierData}, ease:Power1.easeInOut}));
// create scene
var scene = new ScrollMagic.Scene({
triggerElement: "#testobj",
duration: 100,
offset: 10
})
.setTween(tween)
.addTo(ctrl)
.addIndicators();
What I want: The initial state of my object (i.e. before any animation has happened) should be the first bézier point, {x: 0, y: 0, rotation:"40_cw"}.
What's happening: The initial state is the object's default style, i.e. the equivalent of {x: 0, y: 0, rotation:"0"}. Note how in the jsfiddle the green square starts out upright while I want it to start rotated 40° clock-wise.
Tahir Ahmed's answer works!
perhaps you can use .set() before doing the .to() tween? something like this.
I'm trying to rotate an image added to my canvas using KineticJS.
I got it almost working.
I know I need to set the offset to 'move' the rotation point, that part is working.
But it is also moving to that location of the offset.
After doing some rotating I can drag my image to another location in the canvas and continue rotating around its own center.
I don't want to rotate the whole canvas, because I have multiple images on a layer.
The relevant code:
function rotateLayer() {
// Rotate bird image
var rotation = 15;
// Set rotation point:
imageDict[1].setOffsetX(imageDict[1].width() / 2);
imageDict[1].setOffsetY(imageDict[1].height() / 2);
// rotation in degrees
imageDict[1].rotate(rotation);
imageDict[1].getLayer().draw();
}
A working demo is on jsfiddle: http://jsfiddle.net/kp61vcfg/1/
So in short I want the rotation but not the movement.
How you want to rotate without movement?
KineticJS rotate objects relative it's "start point" . For example for Kinetic.Rect start points is {0, 0} - top left corner. You may move such "start point" to any position with offset params.
After a lot of trail and error I found the solution.
The trick is to set the offset during load to the half width and height to set the rotation point to the middle of the image AND don't call image.cache:
function initAddImage(imgId, imgwidth, imgheight) {
var imageObj = new Image();
imageObj.src = document.getElementById(imgId).src;
imageObj.onload = function () {
var image = new Kinetic.Image({
image: imageObj,
draggable: true,
shadowColor: '#787878',
shadowOffsetX: 2,
shadowOffsetY: 2,
width: imgwidth,
height: imgheight,
x: 150, // half width of container
y: 150, // half height of container
offset : {x : imgwidth / 2, y : imgheight / 2}, // Rotation point
imgId: imgId
});
layer.add(image);
//image.cache();
layer.draw();
imageDict[currentLayerHandle] = image;
currentLayerHandle++;
};
}
I've updated my demo to a working version:
http://jsfiddle.net/kp61vcfg/2/
Hi I have been working with a map in three.js
Happens to be I have problem in facing/moving the camera to look at a Plane which happen to be like a marker in the map.
What I have here is that a line of codes derive from /threejs.org/examples/#webgl_interactive_draggablecubes
Load my collada model of map and plot the google like marker in.
I turn the cube to be the marker and change to double side plane.
So when I click the marker the camera tween/move to the position of the plane but it's facing the other side of the plane or to the wrong side. Just want it to be face to face by camera.
I like it to be some kind of http://www.tweetopia.net/.
The tweetopia faces will be my marker and the ground of tweetopia is my map model.
Here's an illustration http://i.imgur.com/AsFFe3B.png
I play around with the TrackballControls.js of draggable cubes and it seems like it has controls.target = obj.position
Here's my solution to fly into the face of plane object
function toObj(obj) {
var rotateTween = new TWEEN.Tween( controls.target )
.to( { x: obj.position.x, y: obj.position.y, z: obj.position.z }, 4000 )
.interpolation(TWEEN.Interpolation.CatmullRom)
.easing( TWEEN.Easing.Quintic.InOut )
.start();
var goTween = new TWEEN.Tween( camera.position )
.to( { x: obj.position.x, y: obj.position.y, z: obj.position.z + 10 }, 4000 )
.interpolation(TWEEN.Interpolation.CatmullRom)
.easing(TWEEN.Easing.Quintic.InOut)
goTween.start();
}
How do I create an ArrowHelper in Three.js (r58) with correct rotation?
var point1 = new THREE.Vector3(0, 0, 0);
var point2 = new THREE.Vector3(10, 10, 10);
var direction = new THREE.Vector3().subVectors(point1, point2);
var arrow = new THREE.ArrowHelper(direction.normalize(), point1);
console.log(arrow.rotation);
I always end up with with Object {x: 0, y: 0, z: 0} for the arrow rotation. What am I doing wrong?
ArrowHelper uses quaternions to specify it's orientation.
If you do this:
var rotation = new THREE.Euler().setFromQuaternion( arrow.quaternion );
you will see an equivalent orientation expressed in Euler angles, although in r.59, arrow.rotation is now automatically updated, so you will no longer see zeros.
EDIT: answer updated to three.js r.59