鼠标点击获取3维坐标three

鼠标点击的屏幕坐标转换到视点坐标系
var me = this, view = this.getView(), viewModel = this.getViewModel();
var text = view.down(‘[name=Pickuppos]’).getText();
if (me._object) {
if (text == “拾取”) {
view.down(‘[name=Pickuppos]’).setText(“完成”);
me.Pickuppos = true;
var sceneview = Ext.getCmp(‘scene’);
var sceneviewcontroller = Ext.getCmp(‘scene’).getController();
var camera = “”;
//设置球体的值
var radius = 0.5, segemnt = 16, rings = 16;
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segemnt, rings),
sphereMaterial
);
sphere.geometry.verticesNeedUpdate = true;
sphere.geometry.normalsNeedUpdate = true;
me._scene.add(sphere);
sceneview.getEl().on(‘click’, function () {
if (!me.Pickuppos) {
return; <

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
three.js是一款用于创建WebGL渲染的JavaScript库,它可以在浏览器中实现动态的、交互式的三维图形。 要获取鼠标点击三维位置,可以遵循以下步骤: 1. 创建一个three.js场景。 2. 创建一个相机,并将其放置在合适的位置和方向,以便你可以从正确的角度观察场景。 3. 创建一个WebGL渲染器,将其连接到你想要显示场景的HTML元素上。 4. 创建一个射线投射器(raycaster)对象,并根据相机和鼠标点击的位置来定义射线。 5. 使用射线投射器来检测与场景中的物体的交互。 6. 如果射线与物体相交,则可以获取交点的坐标,从而得到三维位置。 下面是一个示例代码来实现上述过程: ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体作为示例物体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 创建一个射线投射器 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 监听鼠标点击事件 function onMouseClick(event) { // 将鼠标点击位置转换为标准化设备坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 通过相机和鼠标点击位置定义射线 raycaster.setFromCamera(mouse, camera); // 计算射线与物体的相交情况 var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 获取交点的坐标 console.log(intersects[0].point); } } // 将鼠标点击事件监听绑定到dom元素上 document.addEventListener('click', onMouseClick, false); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在这个示例中,我们创建了一个立方体物体,并通过监听鼠标点击事件来获取点击位置的三维坐标。射线投射器检测到射线与物体的相交情况,如果有交点存在,我们就输出交点的坐标。 希望上述解答对您有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值