鼠标悬停效果在Three.js中不起作用

我需要关于Three.js的这段代码的帮助。我不知道为什么它不起作用，因为一切都是正确的，并从其他可行的代码复制而来。问题是没有鼠标悬停效果。鼠标悬停效果在Three.js中不起作用

<html> 
<head> 
    <title>NUEVO</title> 
    <style>canvas { width: 100%; height: 100% }</style> 
</head> 

<body> 

    <script src="js/libs/Tween.js"></script> 
    <script src="js/libs/stats.min.js"></script> 
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> 

    <script> 

     var scene,camera,rendered,projector; 
     var mouseX, mouseY, stats, container; 
     var objects=[]; 
     var INTERSECTED; 
     var theta = 0; 

     init(); 
     animate(); 

     function init(){ 

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 20000); 
      camera.position.set(0, 150, 400); 
      camera.lookAt(scene.position); 

      renderer = new THREE.CanvasRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container = document.createElement('div'); 
      document.body.appendChild(container); 
      container.appendChild(renderer.domElement); 

      projector = new THREE.Projector(); 

      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.bottom = '0px'; 
      stats.domElement.style.zIndex = 100; 
      container.appendChild(stats.domElement); 

      for (var i=0; i<3; i++) 
      { 
       var geometry = new THREE.CubeGeometry(40,40,40); 
       var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
       var cube = new THREE.Mesh(geometry, material); 
       cube.position.x = (i*200) -200 
       objects.push(cube); 
       scene.add(cube); 
      } 

      window.addEventListener('resize', onWindowResize, false); 
     } 

     function onDocumentMouseDown(event) 
     { 
      event.preventDefault(); 
      mouseX = (event.clientX/window.innerWidth) * 2 - 1; 
      mouseY = - (event.clientY/window.innerHeight) * 2 + 1; 
     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
     } 


     function animate() 
     { 
      requestAnimationFrame(animate); 
      render(); 
      update(); 
     } 


     function update() 
     { 

      var vector = new THREE.Vector3(mouseX, mouseY, 1); 
      projector.unprojectVector(vector, camera); 

      var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()); 
      var intersects = ray.intersectObjects(scene.children); 

      if (intersects.length > 0) { 

       if (intersects[ 0 ].object != INTERSECTED) 
       { 
        if (INTERSECTED) 
         INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
         // store reference to closest object as current intersection object 
         INTERSECTED = intersects[ 0 ].object; 
         // store color of closest object (for later restoration) 
         INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
         // set a new color for closest object 
         INTERSECTED.material.color.setHex(0xffff00); 

       } else {// there are no intersections 
        // restore previous intersection object (if it exists) to its original color 
        if (INTERSECTED) 
         INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
         // remove previous intersection object reference 
         //  by setting current intersection object to "nothing" 
         INTERSECTED = null; 
       } 

       /* for(var i=0; i<3; i++) 
       { 
        objects[i].rotation.y += 0.05; 
       }*/ 
      } 
     } 

     function render() 
     { 
      //theta += 0.4; 
      camera.position.x = 300 * Math.sin(theta * Math.PI/360); 
      camera.position.y = 300 * Math.sin(theta * Math.PI/360); 
      camera.position.z = 300 * Math.cos(theta * Math.PI/360); 
      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 
     } 


    </script> 



</body> 
</html>

来源

2012-11-13 user1820891

这是你想要的：

http://jsfiddle.net/Lx6nE/4/

什么是错的：

到three.js所链接应该朝着缩小的来源。
由于闪烁，大括号应该缩进
应该捕获mousedown事件。

代码：

var scene,camera,rendered,projector; 
    var mouseX, mouseY, stats, container; 
    var objects=[]; 
    var INTERSECTED; 
    var theta = 0; 

    init(); 
    animate(); 

    function init(){ 

     scene = new THREE.Scene(); 

     camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 20000); 
     camera.position.set(0, 150, 400); 
     camera.lookAt(scene.position); 

     renderer = new THREE.CanvasRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     container = document.createElement('div'); 
     document.body.appendChild(container); 
     container.appendChild(renderer.domElement); 

     projector = new THREE.Projector(); 

     stats = new Stats(); 
     stats.domElement.style.position = 'absolute'; 
     stats.domElement.style.bottom = '0px'; 
     stats.domElement.style.zIndex = 100; 
     container.appendChild(stats.domElement); 

     for (var i=0; i<3; i++) 
     { 
      var geometry = new THREE.CubeGeometry(40,40,40); 
      var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
      var cube = new THREE.Mesh(geometry, material); 
      cube.position.x = (i*50) -60 
      objects.push(cube); 
      scene.add(cube); 
     } 

     window.addEventListener('resize', onWindowResize, false); 
     window.addEventListener('mousedown', onDocumentMouseDown, false); 
    } 

    function onDocumentMouseDown(event) 
    { 
     event.preventDefault(); 
     mouseX = (event.clientX/window.innerWidth) * 2 - 1; 
     mouseY = - (event.clientY/window.innerHeight) * 2 + 1; 
    } 

    function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
    } 


    function animate() 
    { 
     requestAnimationFrame(animate); 
     render(); 
     update(); 
    } 


    function update() 
    { 

     var vector = new THREE.Vector3(mouseX, mouseY, 1); 
     projector.unprojectVector(vector, camera); 

     var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()); 
     var intersects = ray.intersectObjects(scene.children); 

     if (intersects.length > 0) { 

      if (intersects[ 0 ].object != INTERSECTED) 
      { 
       if (INTERSECTED) 
        INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
        // store reference to closest object as current intersection object 
        INTERSECTED = intersects[ 0 ].object; 
        // store color of closest object (for later restoration) 
        INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
        // set a new color for closest object 
        INTERSECTED.material.color.setHex(0xffff00); 

      } 
     } else {// there are no intersections 
       // restore previous intersection object (if it exists) to its original color 
       if (INTERSECTED) 
        INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
        // remove previous intersection object reference 
        //  by setting current intersection object to "nothing" 
        INTERSECTED = null; 

      /* for(var i=0; i<3; i++) 
      { 
       objects[i].rotation.y += 0.05; 
      }*/ 
     } 
    } 

    function render() 
    { 
     //theta += 0.4; 
     camera.position.x = 300 * Math.sin(theta * Math.PI/360); 
     camera.position.y = 300 * Math.sin(theta * Math.PI/360); 
     camera.position.z = 300 * Math.cos(theta * Math.PI/360); 
     camera.lookAt(scene.position); 

     renderer.render(scene, camera); 
    }

来源

2012-11-13 13:58:52 Gero3

太感谢你了！你救了我的命。 – user1820891

现在这个例子已经被破坏了。：| –

@LenielMacaferi于2012年撰写;从那以后有几个发布。我在这里看到的最显着的是'CubeGeometry'不再有效（应该是'BoxGeometry'等）。你有类似的问题，你应该提出一个问题吗？ – Hectate

鼠标悬停效果在Three.js中不起作用

回答

相关问题