Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >A帧-光线投射Three.JS 3D对象

A帧-光线投射Three.JS 3D对象
EN

Stack Overflow用户
提问于 2020-04-10 15:33:53
回答 1查看 292关注 0票数 0

在A帧场景中,我有两个对象,一个圆柱体和一个多边形,表示一个Three.js 3D对象。我只想让多边形在悬停时发生变化,就像圆柱体一样。

我在这里有一个有效的演示:Demo

当光标悬停在圆柱体上时,屏幕上将显示悬停的文本,并且圆柱体的颜色会使用Raycaster组件更改。如何对多边形执行相同的操作?

多边形是使用以下命令创建的:

代码语言:javascript
运行
AI代码解释
复制
AFRAME.registerComponent('foo', {
    init: function() {
        let points = [];
        points.push(new THREE.Vector2(0, 0));
        points.push(new THREE.Vector2(1.5, 0));
        points.push(new THREE.Vector2(2.5, 1));
        points.push(new THREE.Vector2(2.5, 2.5));
        points.push(new THREE.Vector2(1, 3.5));

        for (let i = 0; i < points.length; i++) {
            points[i].multiplyScalar(0.25);
        }
        let shape = new THREE.Shape(points);


        let extrudedGeometry = new THREE.ExtrudeGeometry(shape, {
            amount: 1,
            bevelEnabled: false
        });

        // Geometry doesn't do much on its own, we need to create a Mesh from it
        let extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({
            color: 0xff0000
        }));
        this.el.object3D.add(extrudedMesh);

        let geometry = new THREE.ShapeGeometry(shape);
        let material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        let mesh = new THREE.Mesh(geometry, material);
        this.el.object3D.add(mesh);
    }
});

谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-10 19:56:43

光线投射到实体的网格上。你可以用setObject3D来设置它。执行以下操作:

代码语言:javascript
运行
AI代码解释
复制
let mesh = new THREE.Mesh(geometry, material);
this.el.setObject3D('mesh', mesh);

Corrected code

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61143589

复制
相关文章
元宇宙基础案例 | 大帅老猿threejs特训
「元宇宙」这个概念在近来十分火热,但本质来上说,元宇宙这个词更多的是一个商业上的概念,在这个概念里面融入集成了很多现有的技术。具体可能包括:
用户2225445
2023/10/16
5700
元宇宙基础案例 | 大帅老猿threejs特训
Three.js基础之变换3D对象 | 《Three.js零基础直通04》
经过上一小节《使用Three.js构建基础3D场景 | 《Three.js零基础直通03》》,基础场景已经有了,现在我们来探索Three.js的一些功能。
大帅老猿
2022/06/06
3.6K0
Three.js基础之变换3D对象 | 《Three.js零基础直通04》
three.js中帧缓存的使用
在网上查阅了一下three.js关于帧缓存的使用,感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的,但其实我就是想获取某个时刻的渲染结果作为纹理,没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类,这是一个渲染目标的缓冲区,可以装载到WebGLRenderer中进行渲染,再从WebGLRenderTarget获取纹理对象。
charlee44
2020/06/22
4.3K0
游戏开发中的物理之射线投射
游戏开发中最常见的任务之一是投射光线(或自定义形状的物体)并检查其撞击。这样就可以进行复杂的行为,AI等。本教程将说明如何在2D和3D中执行此操作。
海拥
2021/08/23
8830
WebGL基础教程:第三部分
欢迎回到第三部分,也是我们的迷你WebGL教程系列的最后一部分。在此课程中,我们会会介绍光照和添加2D对象到场景中。新的内容很多,我们还是直接开始吧。
前端达人
2019/01/12
2.7K0
WebGL基础教程:第三部分
射击游戏里的子弹是如何飞行的
从第一款FPS游戏《德军总部3D》出现以来,这种类型的游戏广受好评,创新的玩法也层出不穷,比如“吃鸡”。
量子位
2020/05/19
1.4K0
射击游戏里的子弹是如何飞行的
论文简述 | Voxel Map for Visual SLAM
在现代视觉SLAM系统中,从关键帧中检索候选地图点是一种标准做法,用于进一步的特征匹配或直接跟踪.在这项工作中,我们认为关键帧不是这项任务的最佳选择,因为存在几个固有的限制,如弱几何推理和较差的可扩展性.我们提出了一种体素图表示来有效地检索视觉SLAM的地图点.通过以光线投射方式对摄像机frustum进行采样来查询来自摄像机姿态的可见点,这可以使用有效的体素散列方法在恒定时间内完成.与关键帧相比,使用我们的方法检索的点在几何上保证落在摄像机的视野内,并且遮挡点可以在一定程度上被识别和去除.这种方法也很自然地适用于大场景和复杂的多摄像机配置.实验结果表明,我们的体素图与具有5个关键帧的关键帧图一样有效,并且在EuRoC数据集上提供了显著更高的定位精度(在RMSE平均提高46%),所提出的体素图表示是视觉SLAM中基本功能的一般方法,并且可广泛应用.
计算机视觉
2020/11/11
1.3K0
论文简述 | Voxel Map for Visual SLAM
three.js 绘制3d地图
这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击3D中国地图
郭先生的博客
2020/08/31
11.3K0
three.js 绘制3d地图
【带着canvas去流浪(11)】Three.js入门学习笔记
官方文档中的新手示例过于简单,所以本节对Three.js中的概念进行一些补充描述:
大史不说话
2019/07/15
3.9K0
【带着canvas去流浪(11)】Three.js入门学习笔记
three.js 运行3D模型
HTML <!DOCTYPE html> <html style="height: 100%;"> <head> <title>model_load</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
小蔚
2019/09/11
7.1K0
用 Three.js 画个 3D 生日蛋糕送给他(她)
作为整天和 UI 打交道的前端工程师,是否想在他(她)生日的时候用代码送上一份惊喜呢?
神说要有光zxg
2021/11/25
3.6K0
用 Three.js 画个 3D 生日蛋糕送给他(她)
three.js 新手指南
在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转!你也可以使用鼠标滚轮进行缩放。
疯狂的技术宅
2019/03/27
8.1K0
three.js 新手指南
Material Design的概述与环境
Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新。
Jean
2018/10/26
8180
Material Design的概述与环境
如何实现一个3d场景中的阴影效果(threejs)?
跟OpenGL不同,在threejs中实现一个阴影效果很简单,只需要简单的几个设置。
程序你好
2021/07/23
2.8K0
如何实现一个3d场景中的阴影效果(threejs)?
3D场景中物体模型选中和碰撞检测的实现
在3D场景中常用的一个需求就是鼠标在屏幕上点击特定位置,选中一个物体模型,进行下一步的操作。比如说移动、旋转变形或者改变物体模型渲染外观等等。具体怎么实现呢?这涉及到把二维坐标转换到三维场景里,进行检测找到选种的模型。
程序你好
2021/07/23
2.4K0
3D场景中物体模型选中和碰撞检测的实现
CVPR 2018 | Spotlight论文:单摄像头数秒构建3D人体模型
选自arXiv 作者:Thiemo Alldieck等 机器之心编译 想把自己的身体形象投射进电子游戏里?现在已经是很容易的事了。人工智能算法此前已被广泛应用于虚拟现实头像、监视、服装试穿或电影等多种任务的人体建模上,但大多数方法需要特殊的照相设备来检测景深,或从多个角度探查人体。近日,来自德国布伦瑞克工业大学和 Max Planck Institute for Informatics 的研究人员提出了一种新的算法,可以使用单个角度的标准视频素材为人体创建 3D 模型,用时仅需数秒。目前,该研究的论文已被评
机器之心
2018/05/08
1.4K0
CVPR 2018 | Spotlight论文:单摄像头数秒构建3D人体模型
Three.js DEM建模与渲染
在这个教程中,我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型(DEM)数据,使用的工具包括Three.js、geotiff、webpack和QGIS。
用户5687508
2021/07/20
4.8K0
Three.js - 走进3D的奇妙世界
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
用户7118204
2020/03/31
8.6K0
一文搞懂如何在Three.js里创建阴影效果 |《Three.js零基础直通14》
经过上一小节,我们学会了如何使用各种类型的灯光。既然有了光,那还得有阴影,这样看起来才会更加真实。
大帅老猿
2022/11/11
7.5K0
一文搞懂如何在Three.js里创建阴影效果 |《Three.js零基础直通14》
Three.js - 走进3D的奇妙世界
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
宜信技术学院
2019/11/27
10.3K0

相似问题

Three.js光线投射无法获取对象

121

Three.js:场景对象子集的光线投射

11

three.js光线投射器intersectObjects

11

带有动画的Three.js光线投射对象选择

14

Three.js相交光线投射器

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档