JavaScript交互式3D對象

Question

我正在嘗試爲HCI創建一個JavaScript交互式Sphere，問題是我是JavaScript和Three.js的新手。

我所追求的是，​​當點擊球體時，它會顯示特定主題的統計數據。我創造了這個領域，並將它變成了一個對象，但我在這個領域的相互作用方面遇到了麻煩。

var sphere = new Object({}); //declared sphere as an object first. 
    var angularSpeed = 0.2; 
    var lastTime = 0; 

    function animate(){ 
     //update 
     var time = (new Date()).getTime(); 
     var timeDiff = time - lastTime; 
     var angleChange = angularSpeed * timeDiff * 0.1 * Math.PI/1000; 
     sphere.rotation.y -= angleChange; 
     sphere2.rotation.sphere -=angleChange; 
     lastTime = time; 

     // render 
     renderer.render(scene, camera); 
     requestAnimationFrame(function(){ //request new frame 
     animate(); 
     }); 
    } 

     // renderer 
     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     // camera 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1,   1000); 
     camera.position.z = 500; 

     // scene 
     var scene = new THREE.Scene(); 


     //material 
     var material = new THREE.MeshLambertMaterial({ 
     map:THREE.ImageUtils.loadTexture('images/earth2.jpg')}); 


     //sphere geometry 
    sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 50, 50), material); 

    sphere.overdraw = true; 
    sphere.rotation.x = Math.PI * 0.1; 
    sphere.position.x= 0; // moves position horizontally (abscissa) + = right and - = left 
    sphere.position.y= 0; // moves position virtually (ordinate) + = right and - = left 
    sphere.position.z= 0; // moves position z (applicate) + = forwards and - = backwards 

     scene.add(sphere); 

     //animate 
     animate(); 

     var sphere = new Object:({event}); 
    function statistics(){ 
    alert('You clicked on the div!') // displays the statistics before the rendering 
    }; 

     sphere.onMouseDown=statistics(event);  

Answer 1

：如果一個div或警報打開時球被點擊，但我只需要它作爲一個虛擬版本

下面

工作是在JavaScript和three.js所一個例子，我不在乎

.onMouseDown僅適用於HTML元素。 THREE.js對象不能使用此功能，但Raycaster正是您想要的！

jsfiddle

  var container, stats; 
    var camera, scene, projector, raycaster, renderer, selected, sphere; 

    var mouse = new THREE.Vector2(), INTERSECTED; 

    init(); 
    animate(); 

    function init() { 

     container = document.createElement('div'); 
     document.body.appendChild(container); 

     camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 

     scene = new THREE.Scene(); 

     var light = new THREE.DirectionalLight(0xffffff, 2); 
     light.position.set(1, 1, 1).normalize(); 
     scene.add(light); 

     var light = new THREE.DirectionalLight(0xffffff); 
     light.position.set(-1, -1, -1).normalize(); 
     scene.add(light); 

     sphere = new THREE.Mesh(new THREE.SphereGeometry(20, 50, 50), new THREE.MeshNormalMaterial()); 

     sphere.overdraw = true; 
     scene.add(sphere); 

     projector = new THREE.Projector(); 
     raycaster = new THREE.Raycaster(); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.setClearColor(0xf0f0f0); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.sortObjects = false; 
     container.appendChild(renderer.domElement); 

     document.addEventListener('mousemove', onDocumentMouseMove, false); 
     window.addEventListener('resize', onWindowResize, false); 
     renderer.domElement.addEventListener('mousedown', onCanvasMouseDown, false); 
    } 

    function animate() { 

     requestAnimationFrame(animate); 
     render(); 

    } 

    function render() { 
     camera.lookAt(new THREE.Vector3(0,0,0)); 
     camera.position = new THREE.Vector3(0,100,100); 

     // find intersections 
     var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
     projector.unprojectVector(vector, camera); 
     raycaster.set(camera.position, vector.sub(camera.position).normalize()); 

     selected = raycaster.intersectObjects(scene.children); 
     renderer.render(scene, camera); 

    } 

    function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 

     renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

    function onDocumentMouseMove(event) { 

     event.preventDefault(); 

     mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
     mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

    } 

    //detect mouse click on the sphere 
    function onCanvasMouseDown(event){ 
     if(selected[0].object==sphere){ 
      statistics(); 
     } 
    } 

    function statistics(){ 
     alert('You clicked on the div!') // displays the statistics before the rendering 
    };