Three.js에서 WebGL(1)

WebGL을 사용하려면 Three.js가 좋다고 들었으므로 놀아보십시오.

다운로드

three.js의 'download'에서 zip 파일 세트 압축 해제

우선
- build/three.min.js... three.js 메인
- examples/js/libs/tween.min.js ... 애니메이션 용
- examples/js/controls/TrackballControls.js ... 마우스 컨트롤 용
를 만지다. three.js의 초기화 방법은 three.js webgl 당 검색하면 나오는 샘플이 많이 나오므로 생략

샘플

마우스로 시점 변경

시작시 무작위 위치에서 시작점으로 이미지 이동

이미지와 마우스의 충돌 판정

판정 후 이미지 확대

200 가량의 스크립트로 만들었습니다. 놀라운 three.js
이하, 조금 빠진 부분

마우스로 시점 변경

‘TrackControls.js’의 THREE.TrackballControls 시작
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.noRotate = false; //trueで回転操作を不可にする
controls.addEventListener('change', render);


이미지 로드

ImageUtils.loadTexture로 이미지를 로드하고 THREE.MeshBasicMaterial로 머티리얼화하고 THREE.PlaneGeometry로 평면을 생성하고 THREE.Mesh로 이미지를 평면에 붙여넣기
var texture = new THREE.ImageUtils.loadTexture('sample.png');
var material = new THREE.MeshBasicMaterial({ map: texture });
material.side = THREE.DoubleSide; // 裏も見えるようにする
var geometry = new THREE.PlaneGeometry(300, 300);
object = new THREE.Mesh(geometry, material);


시작시 중심으로 애니메이션

‘tween.js’를 사용한다. before와 after의 위치나 관점을 사용하여 다음과 같이 쓸 뿐. 정말 편한 친
// beforeの座標
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
// afterの座標
target = new THREE.Object3D();
target.position.x = 0;
target.position.y = 0;
target.position.z = 0;
// 変換
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();


이미지와 마우스의 충돌 판정

참고: h tp // w w. 요모츠. 네 t/wp/? p=600
충돌 판정은 템플릿이 있는 모양
// var objectsにobjectの配列が入る
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
// ... intersects[0]に衝突した先頭のobjectが入る
}


판정 후 화면 확대

상기 충돌 판정 후에 tween.js의 기능을 이용한 다음과 같은 함수를 준비한다.
// obj:選択されたオブジェクト, e:マウスin時にtrue,mouseout時にfalse
function selectObject(obj, e) {
if (obj) {
if (e === true) {
// サイズを大きくする
new TWEEN.Tween(interesectedObject.scale)
.to({ x: 1.4, y: 1.4, z: 1.4 }, 60)
.start();
} else {
// サイズを元に戻す
new TWEEN.Tween(interesectedObject.scale)
.to({ x: 1, y: 1, z: 1 }, 60)
.start();
}
}
}