threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置

目前：我有一个球体,其上有一个围绕y轴旋转的纹理.我也有在3D空间中点击的位置,以及球体上的旋转位置(我认为).

目标：获取纹理上的位置,例如：我想获得我点击的图像的正方形. (参见下面的示例球体和图像)

在实践中,我不会使用这个图像,但我觉得这将是一个很好的起点.

代码根据this example获取球体上的位置：

function onDocumentMouseDown( event ) {

event.preventDefault();

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;

mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects );

if ( intersects.length > 0 ) {

console.log(intersects[ 0 ].point);

var vector = new THREE.Vector3( 1, 0, 0 );

var axis = new THREE.Vector3( 0, 1, 0 );

var angle = objects[ 0 ].rotation.y;

//Rotate Point

intersects[ 0 ].point = vector.applyAxisAngle( axis, angle );

console.log(intersects[ 0 ].point);

}

球：

图片包装：

threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置相关推荐

【百度地图API·javascriptapi】地图定位、创建自定义图标、获取用户点击位置
引言地图在网页上的应用远不止于展示,我们可以借助百度地图定位用户的当前位置,在地图上创建自定义的标记,或者在用户点击地图的时候,获取用户点击位置的经纬度. 定位百度地图给用户提供了专门的定位api ...
threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球提示: 讲座前端大型免费公开课讲座教程从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
threejs 绘制球体_web前端入门到实战：threejs 绘制地球、飞机、轨迹
首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: 全球航班 html{overflow: ...
threejs绘制风羽
threejs绘制风羽 1. 引言 2. 什么是风羽 3. threejs绘制 3.1 threejs渲染流程概述 3.2 构建矩形 3.3 绘制风羽 3.3.1 实现思路 3.3.2 实现效果 3. ...
ThreeJS绘制流动的虚线效果
Threejs绘制等距流动线 three.js flow line Three中LineMaterial中支持将线渲染为虚线样式,通过在LineMaterial中引入时间,可以使虚线动起来,产生流动效 ...
Threejs 绘制世界地图
效果在线预览地址:threejs-worldmap ,你可以通过鼠标左键旋转,中键缩放,右键平移来操作视口. 实现通过读取一张透明世界地图的图片数据,然后将图片数据,用 ThreeJs 绘制到场景 ...
好用的机电revit软件丨revit中怎么画球体，半球体，椭球体?
好用的机电revit软件丨revit中怎么画球体,半球体,椭球体? revit中怎么画球体,半球体,椭球体?如图-1所示,如何通过内建模型创建呢? 单击[内建模型]命令→[族类型和参数]→选择[常规模 ...
【Android FFMPEG 开发】FFMPEG ANativeWindow 原生绘制 ( 设置 ANativeWindow 缓冲区属性 | 获取绘制缓冲区 | 填充数据到缓冲区 | 启动绘制 )
文章目录 I . FFMPEG ANativeWindow 原生绘制前置操作 II . FFMPEG 原生绘制流程 III . 设置 ANativeWindow 绘制窗口属性 ANativeWind ...
高德通过起经止经纬度获取路线经纬度，（可搜索位置，新增经过点）
高德通过起经止经纬度获取路线经纬度前言一.经纬度获取代码二.效果图演示三.DEMO 演示地址总结前言之前工作的公司与道路相关,后端同事经常需要采集路线坐标,网上又没有找到合适 ...

threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置

threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置相关推荐

最新文章

热门文章