Three.js导入obj模型后无法实现碰撞检测

最新推荐文章于 2024-06-23 11:02:34 发布
最新推荐文章于 2024-06-23 11:02:34 发布
阅读量2k 收藏 6
点赞数
分类专栏： 图形学 文章标签： three.js 碰撞检测
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30531799/article/details/84929620
版权

刚开始直接用three.js的建模函数THREE.Mesh制造的模型可以用raycaster实现碰撞检测。而在利用blender绘制了一个模型用three.js加载后发现碰撞检测功能失效了。

最后发现是子物体的问题。

原先

var collisionResults = ray.intersectObjects(collidableList);

改为

var collisionResults = ray.intersectObjects(collidableList, true);

即可。

 

推测是绘制的模型中自带了child。

qq_30531799
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
js碰撞检测
anshue7620的博客
10-29 153
这篇文章主要介绍了JS实现判断碰撞的方法,实例分析了通过js判断实体碰撞的技巧与相关应用,需要的朋友可以参考下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head&g...
卜若的代码笔记-webgl系列-第十一章：Three.js里面的碰撞检测
qq_37080133的博客
09-14 649
1 原理 通过射线去监听一个动态的坐标(比如你的角色的移动)，当你的角色移动到如图所示的位置 在这里呢，就是你的贪吃蛇的head，碰撞到了一个红色的箱子。 接下来呢，它的坐标传递给射线，然后摄像机就向着这个地方发射一条射线，射线就会穿过一组物体，这一组就是允许探测的物体，接着，返回穿过的信息，如果存在信息，就表明发生了碰撞。 以下是示例代码： var point = new...
第十章 Three.js物理引擎与碰撞检测(二)
最新发布
一名全栈开发工程师
06-23 391
通过以上代码，我们可以创建一个带有物理效果的 Three.js 场景，实现基本的重力和碰撞效果。这为我们后续实现更复杂的物理效果和交互打下了基础。碰撞检测是物理引擎的重要功能之一。我们可以通过监听物理世界中的碰撞事件来实现碰撞检测。我们需要在动画循环中更新物理世界，并同步 Three.js 网格的位置和旋转。在这个示例中，我们将创建多个立方体，并让它们在重力作用下掉落并相互碰撞。为了更好地理解物理引擎的使用，我们将实现一个简单的物理效果示例。
碰撞检测
weixin_42666092的博客
04-15 79
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>碰撞</title> <style type="text/css"> * { margin:0; padding:0; } .wp1,.wp2 { width:200px; height:200px; background: #04BE
Three.js进阶篇之6 - 碰撞检测
热门推荐
跟随技术的脚步-linolzhang的专栏
03-28 1万+
最近在试着用Three.js做一个简单的赛车游戏，里面有一个需要解决的问题是如何判断两个物体发生了碰撞，比如赛车是否碰上了障碍物或者获得了奖励物品。 示例 我找了一些资料，发现了两个示例程序：第一个示例、  第二个示例 。  以上两个程序都是用  THREE.Raycaster 类来解决问题的。  Raycaster类 Raycaster 应该翻译为“光线投射”，顾名
JS函数实现碰撞检测
juse__we的博客
03-21 1380
物体碰撞检测
three.js加载obj模型添加点击事件及其他
01-04
首先，我们需要了解如何在three.js中加载OBJ模型。这通常涉及到以下步骤： 1. **导入three.js库**：确保在HTML文件中引入three.js库，可以通过CDN链接或者本地文件导入。 ```html <script src="path/to/three.js"> ...
three.js 3d小游戏实例源码
06-12
Three.js支持导入多种3D模型格式，如OBJ、FBX等。模型的外观依赖于纹理，包括颜色贴图、法线贴图和镜面贴图等，它们增强了模型的视觉效果。 2. **光照与阴影** 光照是3D场景中不可或缺的部分。Three.js提供了各种...
three.js应用篇（五）模型内第一视角漫游
05-12
5. **3D模型导入**：Three.js支持多种3D格式的模型导入，如OBJ、FBX等。你可以使用Loader类，如`OBJLoader`或`GLTFLoader`，加载外部模型文件。 6. **模型内漫游**：通过监听用户的键盘或鼠标输入，可以改变相机的...
three-js-教程源代码.zip
07-14
虽然Three.js本身不包含物理引擎，但可以与第三方库（如Cannon.js、Physi.js）结合，实现复杂的碰撞检测和物理模拟。 10. **WebVR与AR** Three.js也支持WebVR和WebAR技术，让你可以创建虚拟现实和增强现实应用，...
three.js学习笔记 为模型增添物理效果
mystery的专栏
06-29 9048
前一篇介绍了物理引擎Physijs，场景中的对象只需要用特定的Physijs对象封装一下便可以在场景中展现物理效果(重力、碰撞检测等)。但Physijs并没有为模型的加载提供一种特定的方法。所以由3Dmax或是Blender等建模软件创建的模型通过传统方式加载到场景中并没有物理效果。 为了使模型具有物理效果这里我使用了一种方法(才疏学浅，仅供参考)。 这里使用的是r71的加载方式，最新的有所不
UE4 - Blender 碰撞体，设置
sjy2333的博客
08-17 888
如果有多个碰撞体 则在所属名字之后再 _ 添加编号 如模型为 BOX_01 碰撞体则必须为 UCX_BOX_01 或 UCX_BOX_01_01 UCX_BOX_01_02 否则导入后引擎将无法识别碰撞体
threejs包围盒的应用
yunduanzhijie的博客
01-05 4639
1、可以当作场景边界的判定值 2、用于相机飞行的参考值 3、物体碰撞的载体 4、不规则物体的体积判断 5、不规则物体的中心点计算（group更好用）
Three.js - 物体碰撞检测（二十六）
小小的前端
04-27 7573
简介 碰撞检测在three.js开发中是很常见的。最常见的两种方式实现： 使用.Raycaste()在物体的各个顶点发出射线，计算是否和其他物体相交。 使用.Box3在物体上创建包围盒，计算两个物体包围盒是否相交。 本节介绍第一种碰撞检测法。 Raycaster origin — 光线投射的原点向量。 direction — 射线的方向向量，应该归一化。 near — 所有返回的结果应该比 near 远。near不能为负，默认值为0。 far — 所有返回的结果应该比 far 近。far 不能小
【threejs开发随笔】three.js基于八叉树的碰撞检测
SusiiaRomon的博客
06-23 5221
threeJs基于八叉树的碰撞检测，非常丝滑，撞墙能滑走的那种
three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
好好学习天天向上
04-27 1877
如果没有设置则每次调用都会初始化一个新数组。
ThreeJS 3D高级教程
07-11
该课程是在ThreeJS 3D基础版的提升，学习基础版以后，再学习该课程，目的是帮助在ThreeJS 3D应用方面做一个技术提升，该课程实现了一些比较复杂的效果，当然这些效果实现起来也不难，只要掌握了ThreeJS 3D编程的精髓，学习就容易的多了。
Threejs 通过 Raycaster 进行物体碰撞检测
IkeShyZz的博客
02-03 1808
参考：http://www.wukai.me/2015/12/28/threejs-collision/ 1： 创建Raycaster， 设置摄像机。 this.rayCaster = new THREE.Raycaster(); this.rayCaster.camera = camera; 2： this.spaceShip 是玩家操作的类，我创建了一个专门用于检测碰撞的THREE.BoxGeometry this.stoneList 是 需要被检测碰撞的物体 从屏幕里向外飞出...
Three.js (六) 物体的点击和碰撞
Cool的博客
11-17 1505
点击和碰撞都需要使用光线投射 Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) origin —— 光线投射的原点向量。 direction —— 向射线提供方向的方向向量，应当被标准化。 near —— 返回的所有结果比near远。near不能为负值，其默认值为0。 far —— 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。） 使用光线投射实例的inters
three.js导入obj模型，贴图怎么办
07-14
要在Three.js中导入`.obj`模型并贴图，你可以使用`MTLLoader`和`OBJLoader`加载器，并在材质上应用纹理。 首先，确保你已经安装了所需的依赖项： ``` npm install three react-three-fiber ``` 然后，创建一个新的React组件来加载和渲染`.obj`模型： ```jsx import React, { useRef } from 'react'; import { Canvas, useLoader } from 'react-three-fiber'; import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; function Model() { const materials = useLoader(MTLLoader, '/path/to/model.mtl'); materials.preload(); const obj = useLoader(OBJLoader, '/path/to/model.obj'); const modelRef = useRef(); obj.setMaterials(materials); obj.position.y = -1; return <primitive object={obj} ref={modelRef} />; } function App() { return ( <Canvas> <ambientLight /> <pointLight position={[10, 10, 10]} /> <Model /> </Canvas> ); } export default App; ``` 在上面的代码中，我们首先导入了需要的加载器和组件。然后，在`Model`组件中，我们使用`useLoader`钩子加载`.mtl`文件，并预加载材质。 接下来，我们使用`useLoader`再次加载`.obj`文件，并创建一个模型引用。然后，我们将预加载的材质应用于模型，并设置模型的位置。 在`App`组件中，我们创建了一个基本的Three.js场景，并添加了环境光和点光源。然后，我们将`Model`组件放置在场景中以渲染模型。 请确保将`/path/to/model.mtl`和`/path/to/model.obj`替换为你实际模型文件和材质文件的路径。 这只是一个简单的示例，你可以根据需要进行修改和扩展。希望对你有所帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值