Download as PDF, PPTX
![// TweenMax.to([要素], [秒数], {
// [変更後プロパティ, (イージング)]
// }
TweenMax.to(mesh.rotation, 1, {
y: Math.PI * 2,
ease: Power2.easeInOut, // easing
onComplete: function(){
// アニメーション完了後に実⾏
}
});
オブジェクトの⾓度だけでなく、位置やサイズの変更も可能](https://image.slidesharecdn.com/threejs-160804171325/75/three-js-15-2048.jpg)
More Related Content
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://cdn.slidesharecdn.com/ss_thumbnails/webglgtug10th-130122052159-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
three.jsによる一歩進めたグラフィカルな表現
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. three.jsを使った表現あれこれ 1. three.jsのおさらい 2. オブジェクトのトゥイーンアニメーション 3.three.jsでテキストを扱う 4. skydome/skyboxで背景演出 5. 動的なマテリアル表現
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. // three.jsでSceneやMeshを作成 … … // アニメーションの関数 render(); functionrender(){ mesh.rotation.x += 0.01; mesh.rotation.z += 0.006; renderer.render(scene, camera); requestAnimationFrame(render); } Rendererが描画するたびにオブジェクトの回転⾓を加算 →これはこれでいいけど、任意で変化をつけたアニメーションができない
- 14.
- 15. // TweenMax.to([要素], [秒数],{ // [変更後プロパティ, (イージング)] // } TweenMax.to(mesh.rotation, 1, { y: Math.PI * 2, ease: Power2.easeInOut, // easing onComplete: function(){ // アニメーション完了後に実⾏ } }); オブジェクトの⾓度だけでなく、位置やサイズの変更も可能
- 16.
- 17.
- 18. // FontLoaderでfontファイルを読み込み、 // callbackでオブジェクト作成 varloader = new THREE.FontLoader(); loader.load('assets/json/helvetiker_regular.typeface.json', function(font){ var text = new THREE.TextGeometry('Hello, Three.js', { size: 24, height: 2, curveSegments: 5, font: font, weight: 'regular', style: ʻnormal', bevelThickness: 5, bevelSize: 1, bevelEnabled: true }); var material = new THREE.MeshStandardMaterial({color: 0x00ffff}); mesh = new THREE.Mesh(text, material); scene.add(mesh); });
- 19.
- 20.
- 21.
- 22.
- 23. // TextureLoaderで画像を読み込み後、skydomeを作成。 // レンダリング時にTHREE.BackSideで内側にレンダリング varskyBox; var geometry = new THREE.SphereGeometry(1600, 60, 40); var loader = new THREE.TextureLoader(); loader.load( './assets/img/tokyo.jpg', function(texture){ var material = new THREE.MeshBasicMaterial({ map: texture}); skyBox = new THREE.Mesh(geometry, material); skyBox.material.side = THREE.BackSide; scene.add(skyBox); } );
- 24.
- 25.
- 26.
- 27. // Vertex(頂点), Fragment(フラグメント)のシェーダーを記述 //Vertex <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } </script> // Fragment <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec3 diffuse; void main() { gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0); } </script>
- 28. var uniforms ={ // JSからシェーダーに送る設定値を記述 speed: { type: "f", value: 15.0 } }; // JS側でmaterial指定を⾏う箇所でShaderMaterialを使⽤ var geometry = new THREE.BoxGeometry(30, 30, 30); var material = new THREE.ShaderMaterial({ uniforms : uniforms, vertexShader : document.getElementById('vertexShader').text, fragmentShader : document.getElementById('fragmentShader').text, }); // 動的に値を変更する場合、アニメーションを⾏う箇所に記述 uniforms.speed.value = 10.0;
- 29.
- 30.