forked: [Three.js] RayCasterでオブジェクトのヒットテスト

Readme
JavaScript 157 lines
HTML 3 lines
SCSS / Compass 22 lines

forked: [Three.js] RayCasterでオブジェクトのヒットテスト

// forked from edo_m18's "[Three.js] RayCasterでオブジェクトのヒットテスト" http://jsdo.it/edo_m18/fusa
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT= window.innerHeight;

var camera, scene, renderer;
var logEl;
var geometry, material, mesh, mesh2, mesh3;
var projector = new THREE.Projector();
var rayPoint, rayLine,
    rayPos = new THREE.Vector3(17, 20, 0);

var testTargets = [];

window.onload = function() {
    init();
    animate();
};

function log(mes) {
    logEl.innerHTML = mes;
}

/*
 * 初期化
 */
var init = function() {
    
    // カメラ
    camera = new THREE.PerspectiveCamera(60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
    camera.position.set(0, 10, 50);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    
    // シーン
    scene = new THREE.Scene();
    
    //レイの位置
    var rayGeo = new THREE.SphereGeometry(1, 5, 5);
    var rayMat = new THREE.MeshBasicMaterial(0xffffff);
    rayPoint = new THREE.Mesh(rayGeo, rayMat);
    rayPoint.position = rayPos;
    scene.add(rayPoint);
    
    var geo = new THREE.Geometry();
    geo.vertices.push(new THREE.Vector3(0, 0, 0));
    geo.vertices.push(new THREE.Vector3(0, 2, 0));
    rayLine = new THREE.Line(geo, new THREE.LineBasicMaterial(0xffffff));
    scene.add(rayLine);

//scene.add(mesh);
    //scene.add(mesh2);
    scene.add(mesh3);
    
    testTargets = [mesh, mesh2, mesh3];

// レンダラー
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

// ドキュメントに追加
    document.body.appendChild(renderer.domElement);

// リサイズ
    window.addEventListener("resize", onresize, false);
    
    logEl = document.getElementById('log');
};

/*
 * hit test
 */
function hitTest() {

var dir = new THREE.Vector3(0, -1, 0);
    
    // 始点, 向きベクトルを渡してレイを作成
    var ray = new THREE.Raycaster(rayPos, dir);

// 交差判定
    var obj = ray.intersectObjects(testTargets);
    
    testTargets.forEach(function (target) {
        target.material.color.setRGB(1, 1, 1);
    });
    
    if (obj.length !== 0) {
        obj.forEach(function (o) {
            o.object.material.color.setRGB(0, 0, 0);
            log('distance: ' + o.distance);
        });
    }
    
}

/*
 * 更新
 */
var angle = 0;
var update = function() {
    angle += 1;
    
    rayPos.x = Math.sin(THREE.Math.degToRad(angle)) * 20;
    rayLine.geometry.vertices[0] = rayPos;
    var rayPosEnd = rayPos.clone();
    rayPosEnd.y -= 20;
    rayLine.geometry.vertices[1] = rayPosEnd;
    rayLine.geometry.verticesNeedUpdate = true;
};

/*
 * アニメーション
 */
var animate = function() {
    requestAnimationFrame(animate);
    
    // 更新
    update();
    hitTest();
    renderer.render(scene, camera);
};

/*
 * リサイズ
 */
var onresize = function() {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT= window.innerHeight;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
};

forked: [Three.js] RayCasterでオブジェクトのヒットテスト

// forked from edo_m18's "[Three.js] RayCasterでオブジェクトのヒットテスト" http://jsdo.it/edo_m18/fusa var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT= window.innerHeight; var camera, scene, renderer; var logEl; var geometry, material, mesh, mesh2, mesh3; var projector = new THREE.Projector(); var rayPoint, rayLine, rayPos = new THREE.Vector3(17, 20, 0); var testTargets = []; window.onload = function() { init(); animate(); }; function log(mes) { logEl.innerHTML = mes; } /* * 初期化 */ var init = function() { // カメラ camera = new THREE.PerspectiveCamera(60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.set(0, 10, 50); camera.lookAt(new THREE.Vector3(0, 0, 0)); // シーン scene = new THREE.Scene(); //レイの位置 var rayGeo = new THREE.SphereGeometry(1, 5, 5); var rayMat = new THREE.MeshBasicMaterial(0xffffff); rayPoint = new THREE.Mesh(rayGeo, rayMat); rayPoint.position = rayPos; scene.add(rayPoint); var geo = new THREE.Geometry(); geo.vertices.push(new THREE.Vector3(0, 0, 0)); geo.vertices.push(new THREE.Vector3(0, 2, 0)); rayLine = new THREE.Line(geo, new THREE.LineBasicMaterial(0xffffff)); scene.add(rayLine); var amb = new THREE.AmbientLight(0x333333); scene.add(amb); var light = new THREE.DirectionalLight(0x999999, 1); light.position.set(10, 10, 10); scene.add(light); // ジオメトリ geometry = new THREE.CubeGeometry(10, 10, 10); for (var i=0,len=geometry.faces.length; i<len; ++i) { geometry.faces[i].color.setHex(Math.random() * 0xffffff); } // マテリアル material = new THREE.MeshLambertMaterial( { vertexColors: THREE.FaceColors } ); // メッシュ mesh = new THREE.Mesh(geometry, material ); mesh2 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors })); mesh2.position.set(17, -9, 0); mesh3 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors })); mesh3.position.set(-17, -5, 0); //scene.add(mesh); //scene.add(mesh2); scene.add(mesh3); testTargets = [mesh, mesh2, mesh3]; // レンダラー renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); // ドキュメントに追加 document.body.appendChild(renderer.domElement); // リサイズ window.addEventListener("resize", onresize, false); logEl = document.getElementById('log'); }; /* * hit test */ function hitTest() { var dir = new THREE.Vector3(0, -1, 0); // 始点, 向きベクトルを渡してレイを作成 var ray = new THREE.Raycaster(rayPos, dir); // 交差判定 var obj = ray.intersectObjects(testTargets); testTargets.forEach(function (target) { target.material.color.setRGB(1, 1, 1); }); if (obj.length !== 0) { obj.forEach(function (o) { o.object.material.color.setRGB(0, 0, 0); log('distance: ' + o.distance); }); } } /* * 更新 */ var angle = 0; var update = function() { angle += 1; rayPos.x = Math.sin(THREE.Math.degToRad(angle)) * 20; rayLine.geometry.vertices[0] = rayPos; var rayPosEnd = rayPos.clone(); rayPosEnd.y -= 20; rayLine.geometry.vertices[1] = rayPosEnd; rayLine.geometry.verticesNeedUpdate = true; }; /* * アニメーション */ var animate = function() { requestAnimationFrame(animate); // 更新 update(); hitTest(); renderer.render(scene, camera); }; /* * リサイズ */ var onresize = function() { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT= window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); };<div id="log"></div> <script src="http://mrdoob.github.io/three.js/build/three.js"></script>@import "compass/reset"; #ctrl { position: absolute; right: 10px; bottom: 10px; } #ctrl p { display: inline-block; } #log { position: absolute; right: 10px; top: 10px; width: 250px; padding: 5px; border: solid 1px #666; background-color: rgba(0, 0, 0, 0.7); color: #fff; }