Weitere ähnliche Inhalte Ähnlich wie three.jsによる一歩進めたグラフィカルな表現 (20) 15. // TweenMax.to([要素], [秒数], {
// [変更後プロパティ, (イージング)]
// }
TweenMax.to(mesh.rotation, 1, {
y: Math.PI * 2,
ease: Power2.easeInOut, // easing
onComplete: function(){
// アニメーション完了後に実⾏
}
});
オブジェクトの⾓度だけでなく、位置やサイズの変更も可能
18. // FontLoaderでfontファイルを読み込み、
// callbackでオブジェクト作成
var loader = 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);
});
23. // TextureLoaderで画像を読み込み後、skydomeを作成。
// レンダリング時にTHREE.BackSideで内側にレンダリング
var skyBox;
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);
}
);
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;
