鼠标点击获取3维坐标three

最新推荐文章于 2023-09-27 16:33:38 发布

原创

最新推荐文章于 2023-09-27 16:33:38 发布 · 5.8k 阅读

标签

#three 鼠标点击获取三维坐标

收录于

本文介绍如何在Three.js场景中，通过监听鼠标点击事件，将屏幕坐标转换为视点坐标系的3D坐标。首先，创建一个球体作为标记，并在鼠标点击时，使用Raycaster进行对象检测，从而获取被点击的3D位置。

鼠标点击的屏幕坐标转换到视点坐标系
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;
}
var coordinate = { x: event.pageX, y: event.pageY };
me._mouse = {
x: (coordinate.x / sceneview.get