###前提・実現したいこと
three.jsを用いてオブジェクトを生成してクリックイベントを実装しようとしていますがうまくいきません。以前に質問させていただいた時とソースコードはほとんど変えていません。
var mouse = new THREE.Vector3();を
var mouse = new THREE.Vector2();に変えたくらいです。
オブジェクトをクリックした際にif文に入り、ログへ日付を出力させたいのですがうまくif文に入ることができない状況です。
ソースコードを載せるのでおかしいところがありましたらご指摘お願いします。
コード(HTML)
<!DOCTYPE html> <html lang="en"> <head> <title>sample</title> <meta charset="utf-8"> <script src="./HTML/three.min.js"></script> <script src="./HTML/OrbitControls.js"></script> <script src="./sample.js"></script> </head> </html>
コード(javascript)
var main = function () { var scene = new THREE.Scene(); var width = 1000; var height = 600; var fov = 60; var aspect = width / height; var near = 1; var far = 10000; //カメラ var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(50, -100, 50); camera.rotation.set(-0.4, 0, 0); controls = new THREE.OrbitControls(camera); //レンダラの初期化 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); renderer.setClearColor(0x000000, 0.5); document.body.appendChild(renderer.domElement); //ライトの作成 var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, 0.2, 0.2); scene.add(directionalLight); var geometry = new THREE.BoxGeometry(20, 20, 20); var material = new THREE.MeshPhongMaterial({color:0xff0000, wireframe: false}); var pa = new THREE.Mesh(geometry, material); pa.position.set(0, 0, 0); scene.add(pa); document.addEventListener( 'mousedown', clickPosition, false ); function clickPosition( event ) { var x = event.clientX; var y = event.clientY; var mouse = new THREE.Vector2(); mouse.x = ( x / window.innerWidth ) * 2 - 1; mouse.y = -( y / window.innerHeight ) * 2 + 1; var raycaster = new THREE.Raycaster(); raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( scene.children ); if( intersects.length > 0 ) { console.log(Date()); } } (function renderLoop() { requestAnimationFrame(renderLoop); controls.update(); renderer.render(scene, camera); })(); }; window.addEventListener('DOMContentLoaded', main, false);
回答1件
あなたの回答
tips
プレビュー