Hi there! I am new to three.js and currently going through various tutorials to master the art of animating 3D objects using three.js. As a result, you may find some parts of the code below to be familiar.
My objective: I am looking for a way to gradually change the scale of each object within a loop over a specified time period (3 to 5 seconds). Ideally, I would like these objects to not only change in size but also potentially in shape.
Here is what I currently have:
var Decoration = function() {
// Invoke the Group constructor with the given arguments
THREE.Group.apply(this, arguments);
this.rotationSpeed = Math.random() * 0.01 + .001 + .001;
this.rotationPosition = Math.random() * 0.01 + .001 + .001;
this.scale = Math.random() * 0.21 + .051 + .021;
this.rotation.x += 0.01;
this.rotation.y += 0.02;
this.scale.x += 1;
this.scale.y += 1;
this.scale.z = 1;
// Assign a random color
var colors = ['#ff0051', '#f56762','#a53c6c','#f19fa0','#72bdbf','#47689b'];
// The main bauble is an Octahedron
var bauble = new THREE.Mesh(
addNoise(new THREE.OctahedronGeometry(15,0), 0),
new THREE.MeshStandardMaterial( {
color: colors[Math.floor(Math.random()*colors.length)],
shading: THREE.FlatShading ,
metalness: 0,
roughness: 0.8,
refractionRatio: 0.25
} )
);
bauble.castShadow = true;
bauble.receiveShadow = true;
bauble.rotateZ(Math.random()*Math.PI*2);
bauble.rotateY(Math.random()*Math.PI*2);
this.add(bauble);
};
Decoration.prototype = Object.create(THREE.Group.prototype);
Decoration.prototype.constructor = Decoration;
Decoration.prototype.updatePosition = function() {
this.rotationPosition += this.rotationSpeed;
this.rotation.y = (Math.sin(this.rotationPosition));
};
var clock = new THREE.Clock();
// Create a scene which will hold all our meshes to be rendered
var scene = new THREE.Scene();
// Create and position a camera
var camera = new THREE.PerspectiveCamera(
60, // Field of view
window.innerWidth/window.innerHeight, // Aspect ratio
0.1, // Near clipping pane
1000 // Far clipping pane
);
// Reposition the camera
camera.position.set(0,30,50);
// Point the camera at a given coordinate
camera.lookAt(new THREE.Vector3(0,15,0))
// Create a renderer
var renderer = new THREE.WebGLRenderer({ antialias: true });
// Size should be the same as the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Set a near white clear color (default is black)
renderer.setClearColor( 0xfff6e6 );
// Append to the document
document.body.appendChild( renderer.domElement );
var decorations = [];
// Add some new instances of our decoration
var decoration1 = new Decoration();
decoration1.position.y += 10;
scene.add(decoration1);
decorations.push(decoration1);
var decoration2 = new Decoration();
decoration2.position.set(20,15,-10);
decoration2.scale.set(.8,.8,.8);
scene.add(decoration2);
decorations.push(decoration2);
var decoration3 = new Decoration();
decoration3.position.set(20,10,-10);
scene.add(decoration3);
decorations.push(decoration3);
var decoration4 = new Decoration();
decoration3.position.set(20,10,-10);
scene.add(decoration4);
decorations.push(decoration4);
// Render the scene/camera combination
renderer.render(scene, camera);
requestAnimationFrame(render);
function render() {
controls.update();
var t = clock.getElapsedTime();
if (t >= 3.0)
{
clock = new THREE.Clock();
this.scale.set(1,1,1);
}
else
{
this.scale.x = 1-(t/3.0);
this.scale.y = 1-(t/3.0);
this.scale.z = 1-(t/3.0);
}
// Update the decoration positions
for(var d = 0; d < decorations.length; d++) {
decorations[d].updatePosition();
}
// Render the scene/camera combination
renderer.render(scene, camera);
// Repeat
requestAnimationFrame(render);
}If you have any suggestions or guidance, I would greatly appreciate it!! Thank you so much :)