0

More than 3 years have passed since last update.

# はじめてのThree.js 9章 日記

Last updated at Posted at 2020-05-31

はじめてのthree.js

# 新たに知った知識

• 複数のモデルをアニメーションするの意外と簡単
``````

function render() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;

// bounce the sphere up and down
step += controls.bouncingSpeed;
sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

// scale the cylinder

scalingStep += controls.scalingSpeed;
var scaleX = Math.abs(Math.sin(scalingStep / 4));
var scaleY = Math.abs(Math.cos(scalingStep / 5));
var scaleZ = Math.abs(Math.sin(scalingStep / 7));
cylinder.scale.set(scaleX, scaleY, scaleZ);

// render using requestAnimationFrame
renderer.render(scene, camera);
requestAnimationFrame(render);

}
``````
• tweeningでイージングなどがつけれる
• trackball control
• three.clockオブジェクトで時間通りに動く
• morphtargetinfluenceは２つのオブジェクトをスムーズに変形移行させてくれる
``````        // create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({morphTargets: true, color: 0xff0000});

// define morphtargets, we'll use the vertices from these geometries
var cubeTarget1 = new THREE.BoxGeometry(2, 10, 2);
var cubeTarget2 = new THREE.BoxGeometry(8, 2, 8);

// define morphtargets and compute the morphnormal
cubeGeometry.morphTargets[0] = {name: 't1', vertices: cubeTarget2.vertices};
cubeGeometry.morphTargets[1] = {name: 't2', vertices: cubeTarget1.vertices};
``````

# 気づいたこと

• flycontrolとfirstpersoncontrolは結構酔う

# まだ解決していない点

• animationmixerの役割

10章はこちら

Register as a new user and use Qiita more conveniently

1. You get articles that match your needs
2. You can efficiently read back useful information
3. You can use dark theme
What you can do with signing up
0