Question

three.js初学者在这里！我正在研究一些教程，以学习如何使用three.js为3D对象设置动画，因此此处的部分代码似乎很熟悉。

我想做的事情：找到一种方法可以在一段时间内（3到5秒）循环更改每个对象的比例。理想情况下，这些对象将改变大小（甚至可能改变形状）。

我有什么：

var Decoration = function() {

    // Run 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;  

    // A random color assignment
    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 combnation
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 combnation
    renderer.render(scene, camera);

    // Repeat
    requestAnimationFrame(render);
}

这里的任何帮助将不胜感激！！谢谢：）

Answer 1

您设置的任何decoration元素的动画/渲染都在render函数中进行。通过将您想要的转换添加到decoration函数中的render元素中，可以将其应用于多个变量。

尝试一下：

首先，声明您的时钟变量：

var clock = new THREE.Clock();

然后，将您的render函数更新为：

function render() {

    for(var d = 0; d < decorations.length; d++) {
        decorations[d].rotation.x += 0.01;
        decorations[d].rotation.y += 0.01;
    }

    var t = clock.getElapsedTime();

    if (t >= 3.0)
    {
        clock = new THREE.Clock();
        // Update the decoration positions
        for(var d = 0; d < decorations.length; d++) {
            decorations[d].scale.set(1,1,1);
        }
    }
    else
    {
        // Update the decoration positions
        for(var d = 0; d < decorations.length; d++) {
            decorations[d].scale.x = 1-(t/3.0);
            decorations[d].scale.y = 1-(t/3.0);
            decorations[d].scale.z = 1-(t/3.0);
        }
    }

    // Render the scene/camera combnation
    renderer.render(scene, camera);

    // Repeat
    requestAnimationFrame(render);
}

Three.js多个对象的动画比例

1 个答案: