three.js camera tween with switch statement - three.js

Question

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));
})
.onComplete(function() {
camera.lookAt(new THREE.Vector3(0, 0, 0));
})
.start();
break;
case 'Ypos02':
var from02 = {
y: camera.position.y
};
var to02 = {
y: yPos02
};
TWEEN.removeAll();
var tween = new TWEEN.Tween(from02)
.to(to02, 600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function() {
camera.position.set(this.y);
camera.lookAt(new THREE.Vector3(0, 0, 0));
})
.onComplete(function() {
camera.lookAt(new THREE.Vector3(0, 0, 0));
})
.start();
break;
case 'Ypos03':
var from03 = {
y: camera.position.y
};
var to03 = {
y: yPos03
};
TWEEN.removeAll();
var tween = new TWEEN.Tween(from03)
.to(to03, 600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function() {
camera.position.set(this.y);
camera.lookAt(new THREE.Vector3(0, 0, 0));
})
.onComplete(function() {
camera.lookAt(new THREE.Vector3(0, 0, 0));
})
.start();
break;
}
}
In my main website where the iFrame is, I have 3 buttons.
Once one of them is pressed I want the camera to animate to the new Y position.
export function button03_click(event, $w) {
$w("#html2").postMessage({cameraYpos: 'Ypos03'});
console.log("cameraPos = -300");
}
export function button02_click(event, $w) {
$w("#html2").postMessage({cameraYpos: 'Ypos02'});
console.log("cameraPos = 0");
}
export function button01_click(event, $w) {
$w("#html2").postMessage({cameraYpos: 'Ypos01'});
console.log("cameraPos = 300");
}
This is my animate function
function animate() {
TWEEN.update();
requestAnimationFrame(animate);
render();
}
and this is my render function
function render() {
camera.lookAt(scene.position);
camera.position.x += ( - mouseX - camera.position.x ) * 0.05;
camera.lookAt( scene.position );
webglRenderer.render(scene, camera);
}
I manged to get it working with out a tween but now with the tween set
as soon as I press one of the buttons the model disappears from view.
I am sorry for not having a live version I am under strict NDA and switching the models just for this is allot of work. hope you understand.
Any help is most appreciated.
Thanks
You can see the full code here
<script>
/* Global vars
---------------------------------------------------
*/
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var camera, scene;
var canvasRenderer, webglRenderer;
var models_loaded = false;
var textures_loaded = false;
var container, mesh, geometry, loader, preloader;
var cameraPos
var yPos01 = 300;
var yPos02 = 0;
var yPos03 = -300;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var light;
var mouseX = 0, mouseY = 0;
/*
---------------------------------------------------
*/
/* Global materials and lighting controls
---------------------------------------------------
*/
//material
var roughness = 0.83;
var metal = 0.8;
var diffuse = 0x675f00;
//lights
var environmentInt = 0.5;
var ambiLightInt = 0.2;
var dirLightInt = 1.2;
var dirLightScalar = 1;
var hemiLightInt = 1;
/*
---------------------------------------------------
*/
/* Page Preloader
---------------------------------------------------
*/
preloader = document.createElement('img');
preloader.onload = function(){
window.addEventListener("mousemove", onmousemove, false);
init();
animate();
}
preloader.src = "https://assets.parastorage.com/marketingstudio/jessica_walsh/06/textures_512/preloader.gif";
preloader.className = "preloader";
document.body.appendChild(preloader);
/*
---------------------------------------------------
*/
/* init start
-----------------------------------------------------------------------------------------------------------------------------
*/
function init() {
/* 3D Json Loader
---------------------------------------------------
*/
container = document.createElement('div');
container.className = 'container';
container.style.visibility = 'hidden';
document.body.appendChild(container);
var manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
function onComplete(){
if(models_loaded && textures_loaded){
document.body.removeChild(preloader);
container.style.visibility = 'visible';
container.style.opacity =1;
SITE_BACKGROUNDcurrentVideovideo.play();
console.log( 'Loading completed');
}
}
manager.onLoad = function ( ) {
models_loaded = true;
onComplete();
};
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
//console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onError = function ( url ) {
//console.log( 'There was an error loading ' + url );
};
loader = new THREE.JSONLoader(manager);
/*
---------------------------------------------------
*/
/* Creating the camera
---------------------------------------------------
*/
camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 10, 1500);
camera.position.z = 340;
/* Passing event through the iframe
---------------------------------------------------
*/
window.onmessage = function (evt) {
switch (evt.data.cameraYpos) {
case 'Ypos01':
var from01 = {y: camera.position.y};
var to01 = {y: yPos01};
TWEEN.removeAll();
var tween01 = new TWEEN.Tween(from01)
.to(to01, 600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
camera.position.set(this.y);
camera.lookAt(0, 0, 0);
})
.onComplete(function () {
camera.lookAt(0, 0, 0);
})
.start();
break;
case 'Ypos02':
var from02 = {y: camera.position.y};
var to02 = {y: yPos02};
TWEEN.removeAll();
var tween02 = new TWEEN.Tween(from02)
.to(to02, 600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
camera.position.set(this.y);
camera.lookAt(0, 0, 0);
})
.onComplete(function () {
camera.lookAt(0, 0, 0);
})
.start();
break;
case 'Ypos03':
var from03 = {y: camera.position.y};
var to03 = {y: yPos03};
TWEEN.removeAll();
var tween03 = new TWEEN.Tween(from03)
.to(to03, 600)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
camera.position.set(this.y);
camera.lookAt(0, 0, 0);
})
.onComplete(function () {
camera.lookAt(0, 0, 0);
})
.start();
break;
}
};
/* Bulding the scene
---------------------------------------------------
*/
scene = new THREE.Scene();
//Lights
scene.add(new THREE.AmbientLight(0xffffff, ambiLightInt));
/* Main light
---------------------------------------------------
*/
light = new THREE.DirectionalLight(0xffffff, dirLightInt);
//light.position.set(100, -350, 0);
light.position.multiplyScalar(dirLightScalar);
//light.position.x = 100;
light.position.y = 100;
light.position.z = 100;
//Shadow parameters
light.castShadow = true;
light.shadowCameraVisible = true;
//light.shadowBias = 0.001;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
//Shadow camera fov and position
var d = 50;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowcameranear = 0.1;
light.shadowCameraFar = 2000;
light.shadowcamerafov = 30;
light.shadowDarkness = 0;
scene.add(light);
/*
---------------------------------------------------
*/
//Skylight
var skylight = new THREE.HemisphereLight( 0xffffff, 0x080820, hemiLightInt );
scene.add( skylight );
/* Texture Loader
---------------------------------------------------
*/
var tx_manager = new THREE.LoadingManager();
tx_manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
//console.log(itemsTotal);
//console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
var total_textures = 0
tx_manager.itemEnd=function (url){
total_textures++;
if(total_textures == 20){
textures_loaded = true;
onComplete();
}
//console.log(++total_textures);
}
tx_manager.onLoad = function ( x) {
console.log(textureLoader);
//console.log( 'tx_manager complete!');
};
var textureLoader = new THREE.TextureLoader(tx_manager);
/*
---------------------------------------------------
*/
/* Environment map images
---------------------------------------------------
*/
var envUrls = [
'textures/env/02/px.jpg',
'textures/env/02/nx.jpg',
'textures/env/02/py.jpg',
'textures/env/02/ny.jpg',
'textures/env/02/pz.jpg',
'textures/env/02/nz.jpg'
],
// wrap it up into the object that we need
cubemap = THREE.ImageUtils.loadTextureCube(envUrls);
// set the format, likely RGB unless you've gone crazy
cubemap.format = THREE.RGBFormat;
/*
---------------------------------------------------
*/
/* 3D Json files loading
---------------------------------------------------
*/
// TRUNK 01
loader.load( "models/trunk_01.json", function( geometry, mat ) {
//var trunk_color = 0x0061ff;
//var trunk_01_color = textureLoader.load( "textures/trunk_01_curvature.jpg" );
var trunk_01_normal = textureLoader.load( "textures_512/trunk_01_normal.jpeg" );
var trunk_01_roughness = textureLoader.load( "textures_512/trunk_01_roughness.jpeg" );
trunk_01_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: trunk_01_roughness,
normalMap: trunk_01_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var trunk_01 = new THREE.Mesh( geometry, mat );
trunk_01.material = trunk_01_Material;
trunk_01.scale.set( 1, 1, 1 );
trunk_01.position.x = 0;
trunk_01.position.z = 0;
trunk_01.position.x = 0;
trunk_01.castShadow = true;
trunk_01.receiveShadow = true;
trunk_one = trunk_01;
scene.add( trunk_01 );
//controls_01 = new THREE.DeviceOrientationControls(trunk_one, true);
} );
// TRUNK 02
loader.load( "models/trunk_02.json", function( geometry, mat ) {
//var trunk_02_color = textureLoader.load( "textures/trunk_02_curvature.jpg" );
var trunk_02_normal = textureLoader.load( "textures_512/trunk_02_normal.jpeg" );
var trunk_02_roughness = textureLoader.load( "textures_512/trunk_02_roughness.jpg" );
trunk_02_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: trunk_02_roughness,
normalMap: trunk_02_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var trunk_02 = new THREE.Mesh( geometry, mat );
trunk_02.material = trunk_02_Material;
trunk_02.scale.set( 1, 1, 1 );
trunk_02.position.x = 0;
trunk_02.position.z = 0;
trunk_02.position.x = 0;
trunk_02.castShadow = true;
trunk_02.receiveShadow = true;
trunk_two = trunk_02;
scene.add( trunk_02 );
//controls_02 = new THREE.DeviceOrientationControls(trunk_two, true);
} );
// LEAFS
loader.load( "models/leafs.json", function( geometry, mat ) {
//var leafs_color = textureLoader.load( "textures/leafs_curvature.jpg" );
var leafs_normal = textureLoader.load( "textures_512/leafs_normal.jpeg" );
var leafs_roughness = textureLoader.load( "textures_512/leafs_roughness.jpeg" );
leafs_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: leafs_roughness,
normalMap: leafs_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var leafs = new THREE.Mesh( geometry, mat );
leafs.material = leafs_Material;
leafs.scale.set( 1, 1, 1 );
leafs.position.x = 0;
leafs.position.z = 0;
leafs.position.x = 0;
leafs.castShadow = true;
leafs.receiveShadow = true;
all_leafs = leafs;
scene.add( leafs );
//controls_03 = new THREE.DeviceOrientationControls(all_leafs, true);
} );
// ROSES
loader.load( "models/roses.json", function( geometry, mat ) {
//var roses_color = textureLoader.load( "textures/roses_curvature.jpg" );
var roses_normal = textureLoader.load( "textures_512/roses_normal.jpeg" );
var roses_roughness = textureLoader.load( "textures_512/roses_roughness.jpeg" );
roses_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: roses_roughness,
normalMap: roses_normal,
normalScale: new THREE.Vector2( 0.7, 0.7 ),
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var roses = new THREE.Mesh( geometry, mat );
roses.material = roses_Material;
roses.scale.set( 1, 1, 1 );
roses.position.x = 0;
roses.position.z = 0;
roses.position.x = 0;
roses.castShadow = true;
roses.receiveShadow = true;
all_roses = roses;
scene.add( roses );
//controls_04 = new THREE.DeviceOrientationControls(all_roses, true);
} );
// TOPS
loader.load( "models/tops.json", function( geometry, mat ) {
//var tops_color = textureLoader.load( "textures/tops_curvature.jpg" );
var tops_normal = textureLoader.load( "textures_512/tops_normal.jpeg" );
var tops_roughness = textureLoader.load( "textures_512/tops_roughness.jpeg" );
tops_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: tops_roughness,
normalMap: tops_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var tops = new THREE.Mesh( geometry, mat );
tops.material = tops_Material;
tops.scale.set( 1, 1, 1 );
tops.position.x = 0;
tops.position.z = 0;
tops.position.x = 0;
tops.castShadow = true;
tops.receiveShadow = true;
all_tops = tops;
scene.add( tops );
//controls_05 = new THREE.DeviceOrientationControls(all_tops, true);
} );
// STEMS
loader.load( "jessica_walsh/06/models/stems.json", function( geometry, mat ) {
//var stems_color = textureLoader.load( "textures/stems_curvature.jpg" );
var stems_normal = textureLoader.load( "textures_512/stems_normal.jpeg" );
var stems_roughness = textureLoader.load( "textures_512/stems_roughness.jpeg" );
stems_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: stems_roughness,
normalMap: stems_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var stems = new THREE.Mesh( geometry, mat );
stems.material = stems_Material;
stems.scale.set( 1, 1, 1 );
stems.position.x = 0;
stems.position.z = 0;
stems.position.x = 0;
stems.castShadow = true;
stems.receiveShadow = true;
all_stems = stems;
scene.add( stems );
//controls_06 = new THREE.DeviceOrientationControls(all_stems, true);
} );
// THORNES 01
loader.load( "models/thornes_01.json", function( geometry, mat ) {
//var thornes_01_color = textureLoader.load( "textures/thornes_01_curvature.jpg" );
var thornes_01_normal = textureLoader.load( "textures_512/thornes_01_normal.jpeg" );
var thornes_01_roughness = textureLoader.load( "textures_512/thornes_01_roughness.jpeg" );
thornes_01_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: thornes_01_roughness,
normalMap: thornes_01_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var thornes_01 = new THREE.Mesh( geometry, mat );
thornes_01.material = thornes_01_Material;
thornes_01.scale.set( 1, 1, 1 );
thornes_01.position.x = 0;
thornes_01.position.z = 0;
thornes_01.position.x = 0;
thornes_01.castShadow = true;
thornes_01.receiveShadow = true;
thornes_one = thornes_01;
scene.add( thornes_01 );
//controls_07 = new THREE.DeviceOrientationControls(thornes_one, true);
} );
// THORNES 02
loader.load( "models/thornes_02.json", function( geometry, mat ) {
//var thornes_02_color = textureLoader.load( "textures/thornes_02_curvature.jpg" );
var thornes_02_normal = textureLoader.load( "textures_512/thornes_02_normal.jpeg" );
var thornes_02_roughness = textureLoader.load( "textures_512/thornes_02_roughness.jpeg" );
thornes_02_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: thornes_02_roughness,
normalMap: thornes_02_normal,
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var thornes_02 = new THREE.Mesh( geometry, mat );
thornes_02.material = thornes_02_Material;
thornes_02.scale.set( 1, 1, 1 );
thornes_02.position.x = 0;
thornes_02.position.z = 0;
thornes_02.position.x = 0;
thornes_02.castShadow = true;
thornes_02.receiveShadow = true;
thornes_two = thornes_02;
scene.add( thornes_02 );
//controls_08 = new THREE.DeviceOrientationControls(thornes_two, true);
} );
// SNAKE BOSY
loader.load( "models/snake_body.json", function( geometry, mat ) {
//var snake_body_color = textureLoader.load( "textures/snake_body_curvature.jpg" );
var snake_body_normal = textureLoader.load( "textures_512/snake_body_normal.jpeg" );
var snake_body_roughness = textureLoader.load( "textures_512/snake_body_roughness.jpg" );
snake_body_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: snake_body_roughness,
normalMap: snake_body_normal,
normalScale: new THREE.Vector2( 1.5, 1.5 ),
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var snake_body = new THREE.Mesh( geometry, mat );
snake_body.material = snake_body_Material;
snake_body.scale.set( 1, 1, 1 );
snake_body.position.x = 0;
snake_body.position.z = 0;
snake_body.position.x = 0;
snake_body.castShadow = true;
snake_body.receiveShadow = true;
snake_b = snake_body;
scene.add( snake_body );
//controls_09 = new THREE.DeviceOrientationControls(snake_b, true);
} );
// SNAKE HEAD
loader.load( "models/snake_head.json", function( geometry, mat ) {
//var snake_head_color = textureLoader.load( "textures/snake_head_curvature.jpg" );
var snake_head_normal = textureLoader.load( "textures_512/snake_head_normal.jpeg" );
var snake_head_roughness = textureLoader.load( "textures_512/snake_head_roughness.jpeg" );
snake_head_Material = new THREE.MeshPhysicalMaterial( {
roughnessMap: snake_head_roughness,
normalMap: snake_head_normal,
normalScale: new THREE.Vector2( 2, 2 ),
map: null,
color: diffuse,
metalness: metal,
roughness: roughness,
envMap: cubemap,
envMapIntensity: environmentInt
} );
var snake_head = new THREE.Mesh( geometry, mat );
snake_head.material = snake_head_Material;
snake_head.scale.set( 1, 1, 1 );
snake_head.position.x = 0;
snake_head.position.z = 0;
snake_head.position.x = 0;
snake_head.castShadow = true;
snake_head.receiveShadow = true;
snake_h = snake_head;
scene.add( snake_head );
//controls_10 = new THREE.DeviceOrientationControls(snake_h, true);
} );
/* 3D Json files end
---------------------------------------------------
*/
// RENDERER
webglRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
//webglRenderer.shadowMapSoft = true;
webglRenderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap
container.appendChild(webglRenderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
/* init end
-----------------------------------------------------------------------------------------------------------------------------
*/
/* Mouse mapping
---------------------------------------------------
*/
function onmousemove(event) {
//mouseX = (event.clientX / window.innerWidth) * 2 - 1;
//mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
mouseX = ( event.clientX - windowHalfX ) / 6;
mouseY = ( event.clientY - windowHalfY ) / 4;
}
/*
---------------------------------------------------
*/
/* Window resize
---------------------------------------------------
*/
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
var f = (camera.aspect/1.583);
if(f < 1){
camera.position.z = 340 /(camera.aspect/1.583);
}else{
camera.position.z = 340;
}
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
/*
---------------------------------------------------
*/
/* Animate
---------------------------------------------------
*/
function animate() {
TWEEN.update();
requestAnimationFrame(animate);
render();
}
/*
---------------------------------------------------
*/
/* Render
---------------------------------------------------
*/
function render() {
camera.lookAt(scene.position);
camera.position.x += ( - mouseX - camera.position.x ) * 0.05;
camera.lookAt( scene.position );
//Light Position
light.position.x += ( - mouseX - camera.position.x ) * 0.03;
light.lookAt( scene.position );
webglRenderer.render(scene, camera);
}
/*
---------------------------------------------------
*/
</script>
As seeinvisible said the tween is passing an object
with all 3 parameters and I tried to pass only the Y.
This is my updated tween
var from01 = {y: camera.position.y, z: camera.position.z};
var to01 = {y: yPos01, z: zPos01};
TWEEN.removeAll();
var tween = new TWEEN.Tween(from01)
.to(to01, 600)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function () {
camera.position.set(camera.position.x, this.y, this.z);
camera.lookAt(0, 0, 0);
})
.onComplete(function () {
camera.lookAt(0, 0, 0);
})
.start();

Answer 1

In your onUpdate function you have camera.position.set(this.y). However that seems to take 3 parameters x, y, z. Try camera.position.setY(this.y) to only set the y value.