tween.js

问题 How to animate the zoom of camera in three.js with orthigraphic camera. Without animation it is very simple. I only have to set camera.zoom = 1 . But I want to animate it with tween.js. There is my codePen: http://codepen.io/anon/pen/yVOOLj?editors=1111 var scene = new THREE.Scene(); var camera = new THREE.OrthographicCamera(640 / -2, 640 / 2, 380 / 2, 380 / -2, -5000, 5000); camera.position.set(100,100,100); camera.zoom = 0.1; var renderer = new THREE.WebGLRenderer(); renderer.setSize( 640,

问题 I want to rotate a cube on world axis by using tween.I am able to rotate the cube around world axis without using tween by using rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(90)); but I want to happen this slowly so I want to use it with tween. I was using var start = {x:cube[1].rotation.x, y:cube[1].rotation.y, z:cube[1].rotation.z}; var end = {x:cube[1].rotation.x , y:cube[1].rotation.y+degreeToRadians(90) , z:cube[1].rotation.z}; var tween = new TWEEN.Tween(start

问题 I am trying to click on an object, which is a mesh. For instance, if I click on apple, I want the apple to move in the specific coordinates. Right now, I set the clickedObject as apple for right now. document.addEventListener('mousedown', onDocumentMouseDown, false); var objects = new Array(); objects.push(apple, orange, banana); var clickedObject; function onDocumentMouseDown(event) { var mouse_x = ( event.clientX / window.innerWidth ) * 2 - 1; var mouse_y = -( event.clientY / window

问题 I'm trying to ease camera rotation to look at a selected object in a graph. So far, I have fourd.render_loop.push(() => TWEEN.update()); fourd.intersect_callback = function(vertex){ console.log(vertex); var camera = fourd._internals.camera; var start = new THREE.Euler().copy(camera.rotation); camera.lookAt(vertex.position); var end = new THREE.Euler().copy(camera.rotation); camera.rotation.copy(start); var tween = new TWEEN.Tween(camera.rotation) .to(end, 600) .easing(TWEEN.Easing.Quadratic

问题 I'm being driven mildly insane looking for a working combination of interactions. I basically need to make something like a google earth style setup, where you can: orbit round an object, highlighting the centre-most location, click a menu link and animate rotation of the object to a particular 'location' (highlighting the new location). I'm using orbitcontrols for the first bit, and was hoping to tween the orbitcontrols directly for the menu link bit, but couldn't get the camera to move in

问题 I am using tweenjs and Typescript to change the x and y coordinates of a three.js cube. I created the following tween to change the x position of an item of class "FallingItem". this.movementArcData.horzTween = new TWEEN.Tween(this.movementArcData.pos.x) .to(this.movementArcData.newPos.x, this.movementArcData.movementTime * 1000) .onUpdate(this.updateXPos) .onComplete(this.horzTweenComplete); where "this.movementArcData" is an object containing the following: horzTween - the tween itself pos

问题 A want to make crossfade effect between two audio. I try Tween.JS for that, but it's not do it smoothly, how I want... var sound_b_1 = new THREE.PositionalAudio( listener ); sound_b_1.load('mysound.ogg'); sound_b_1.setRefDistance(20); sound_b_1.setVolume(1); sound_b_1.autoplay = true; scene.add(sound_b_1); var volume = {x : 1}; // tweens not work without object // using Tween.js new TWEEN.Tween(volume).to({ x: 0 }, 1000).onUpdate(function() { sound_b_1.setVolume(this.x); }).onComplete

问题 I am trying to tween a camera in three.js. I have the following code in my init function. A switch statement i am passing through an iFrame. window.onmessage = function(evt) { switch (evt.data.cameraYpos) { case 'Ypos01': var from01 = { y: camera.position.y }; var to01 = { y: yPos01 }; TWEEN.removeAll(); var tween = new TWEEN.Tween(from01) .to(to01, 600) .easing(TWEEN.Easing.Linear.None) .onUpdate(function() { camera.position.set(this.y); camera.lookAt(new THREE.Vector3(0, 0, 0)); })

问题 I'm trying my hands on three.js I am moving the camera using a tween, and it works quite good. At the end of the animation, however, the camera jumps back to its initial position. I found out that the mousemove event was causing that behavior. How can i fix this problem and keep both the tween movement and the mouse move? I have constructed my three.js based on this example; Mousemove declared inside render function function render() { camera.position.x += ( mouseX - camera.position.x ) * 0

问题 Hi i have problem with animation and movement in my three.js scene. When I move my camera (even by 0,0000001%)(by THREE.TrackballControls OR THREE.OrbitControls) or when I animate object using Tween.js, my animation is very jerky, object is jumping durning animatinon around the axis of movement, look like it is error with rounding in position. Problem is bigger, when i move far from scene center (senter is on vertex (0,0,0)) for example I'm on vertex (0,8000000,0) and problem is bigger. It is