三js可点击的对象

我有两个三维对象“网格”，我在three.js创建。我想为这些对象添加点击事件，这样当我点击其中的一个时，它就会放大，当我点击另一个时，它会旋转。三js可点击的对象

我试过这个方法来添加一个点击事件到一个对象，它不工作。

<script src='threex.domevent.js'> </script> 
<script> 

     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000); 
     camera.position.z = 100; 

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

     var geometry = new THREE.CubeGeometry(1,1,1); 
     var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
     var cube = new THREE.Mesh(geometry, material); 
     scene.add(cube); 

     cube.addEventListener('click',function(){cubeScale()} , false); 

     function cubeScale() 
      { 
      cube.scale.x *= 20; 
      } 


     var render = function() { 
      requestAnimationFrame(render); 
      cube.rotation.y += 0.1; 
      renderer.render(scene, camera); 
     }; 

     render(); 

    </script>

来源

2013-07-14 Mashael

看到http://mrdoob.github.io/three .js/examples/canvas_interactive_cubes.html – yaku

另请参阅http://threejs.org/examples/canvas_interactive_cubes_tween。 html – WestLangley

绝对需要实现raycaster选择/点击/挑某些对象three.js所。我已经在我的一个项目中使用three.js和raycaster对collada模型实现了它。供您参考，这些链接可以帮助您：

来源

2014-02-17 13:19:55

除此链接之外的第一个链接：“http://stackoverflow.com/questions/29366109/three-js-three-projector-has-been-moved-to”帮助了我很多。 – ConductedClever

您可以使用pickingRay执行与正视相机点击类似，在该代码如下：

var vector = new THREE.Vector3(
     (event.clientX/window.innerWidth) * 2 - 1, 
     -(event.clientY/window.innerHeight) * 2 + 1, 0.5); 

var rayCaster = projector.pickingRay(vector, camera); 

var intersectedObjects = rayCaster.intersectObjects(scene.children, true);

但是，如果您想要在透视相机上执行点击操作，则必须使用unprojectVector遵循如下：

var vector = new THREE.Vector3( 
    (event.clientX/window.innerWidth) * 2 - 1, 
    - (event.clientY/window.innerHeight) * 2 + 1, 
       0.5); 

var rayCaster = projector.unprojectVector(vector, camera); 

var intersectedObjects = rayCaster.intersectObjects(objects);

来源

2014-02-17 13:42:18 Filipe

您可以使用此事件管理器three.interaction

看这demo

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three'; 
 
import { Interaction } from 'three.interaction'; 
 

 
const renderer = new WebGLRenderer({ canvas: canvasElement }); 
 
const scene = new Scene(); 
 
const camera = new PerspectiveCamera(60, width/height, 0.1, 100); 
 

 
// new a interaction, then you can add interaction-event with your free style 
 
const interaction = new Interaction(renderer, scene, camera); 
 

 
const cube = new Mesh(
 
    new BoxGeometry(1, 1, 1), 
 
    new MeshBasicMaterial({ color: 0xffffff }), 
 
); 
 
scene.add(cube); 
 
cube.cursor = 'pointer'; 
 
cube.on('click', function(ev) {}); 
 
cube.on('touchstart', function(ev) {}); 
 
cube.on('touchcancel', function(ev) {}); 
 
cube.on('touchmove', function(ev) {}); 
 
cube.on('touchend', function(ev) {}); 
 
cube.on('mousedown', function(ev) {}); 
 
cube.on('mouseout', function(ev) {}); 
 
cube.on('mouseover', function(ev) {}); 
 
cube.on('mousemove', function(ev) {}); 
 
cube.on('mouseup', function(ev) {}); 
 
// and so on ... 
 

 
/** 
 
* you can also listen on parent-node or any display-tree node, 
 
* source event will bubble up along with display-tree. 
 
* you can stop the bubble-up by invoke ev.stopPropagation function. 
 
*/ 
 
scene.on('touchstart', ev => { 
 
    console.log(ev); 
 
}) 
 
scene.on('touchmove', ev => { 
 
    console.log(ev); 
 
})

来源

2017-12-27 03:35:55 jasonChen82

三js可点击的对象

回答

相关问题