关于 ThreeJS 子物体 旋转有问题 子物体加入父物体后 位置旋转错误 及Object3D.attach()的用法 等问题

最新推荐文章于 2024-06-21 17:41:59 发布
最新推荐文章于 2024-06-21 17:41:59 发布
阅读量2.9k 收藏 2
点赞数 3
分类专栏： ThreeJs 文章标签： threejs attach threejs add
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljason1993/article/details/102943047
版权

首先感谢大佬 在 2015.4.18 向three官方提出的bug(感觉应该是功能缺失~~)

https://github.com/mrdoob/three.js/issues/6426

膜拜大佬~~~~~~~~~

 

-----------------------激动的分割线-------------------------

今天项目发现个问题...

如果父物体自带旋转,当其他物体使用 add() 进入子物体后就会出现位置旋转错乱

(当然我知道,如果是一个轴旋转,可以通过 worldToLocal() 更换位置,然后反一下旋转....)

虽然我还发现一个偏方....

直接用  parent.children.push(object) 放进子物体里面...就不会影响本身旋转等问题

但是如果你这是parent再产生旋转就无法影响子物体了...(这压根就是投机啊....)

你把object.parent=parent之后也会出现上面的问题,等于白忙

 

 (同事及时发现) 好在 ThreeJS 官方在v105版本增加 attach的功能

之后又在后两个版本进行了修正

也就是v107就可以正常使用了,虽然我用的109哈

这个attach就可以在不影响本身旋转及位置的情况更换父物体

api: https://threejs.org/docs/index.html#api/en/core/Object3D.attach

两个增加子物体的方法,大家可以尝试一下

add() 和 attach()

最上方大神连接里面有详细内容,如果需要研究的可以仔细看下~~~

 

LJason 祝各位顺利

懵懵爸爸
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Three.js的物体点击选中拾取DEMO
05-23
Three.js提供了`THREE.Raycaster`类，它可以生成一条射线，从相机位置出发，穿过屏幕上的点击位置，用于检测与这条射线相交的3D物体。首先，创建一个Raycaster实例，然后用鼠标点击时的屏幕坐标和相机信息更新射线...
Three.js源码阅读笔记(Object3D类)
10-27
总的来说，Object3D类是Three.js中构建3D世界的基础，它的属性和方法提供了对对象位置、旋转、缩放以及父子关系的全面控制，使得开发者能够灵活地创建和管理复杂的3D场景。通过对Object3D的深入理解和使用，我们可以...
常用旋转知识 - 旋转父对象子对象不受到位置影响
thinbug的专栏
01-13 7060
using System.Collections; using System.Collections.Generic; using UnityEngine; //旋转父对象,子对象不跟着移动 public class CCamera : MonoBehaviour { public Transform cameraLook; //相机看向目标 public Transfo
three.js 设置父子物体
纸上得来终觉浅，绝知此事要躬行
10-17 1733
因为想要动态设置场景中物体的父子层级，百度了一下，发现有人建议使用SceneUtils 工具类，但是使用过程中发现，其实在新版本的three中这个工具类的方法已经被弃用了，找了一下发现，使用下面的代码即可简单设置父子物体 parent.attach(child); parent是你想要设置的父物体，参数child是你的子物体，那么如果你想要把某个子物体从一个父物体中释放出来怎么办，其实很简...
threejs BufferGeometry更新了顶点后，可能导致部分位置拾取失效
qq_37200686的博客
11-07 213
通过点击线上的点，去更新线的BufferGeometry，导致，只能在更新顶点坐标之前的线的区域上才能被拾取到。
【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作
牛哞哞杂记
07-06 2590
一、效果展示 需要实现的功能，对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移。 如下图的效果： 点击底部的按钮，对模型进行平移和旋转操作。 二、方法描述 关于平移和旋转的方法 比如沿着 Y 轴平移，就是 translateY， 沿着 Z 轴平移，就是 translateZ, 沿着 X 轴平移，就是 translateX 绕着 Y 轴旋转，就是 rotateY, 绕着 Z 轴旋转，就是 rotateZ, 绕着 X 轴旋转，就是 rotateX, 而我们要做到整个视觉上整个模型都在平移和旋转，就需
threejs加载模型旋转某些角度，部分消失问题
tutouxiaoyaonie的博客
10-12 1573
threejs加载模型旋转某些角度，部分消失问题
Three.js旋转到某个角度模型消失的问题
eevee_1的博客
11-18 3413
除了渲染方向之外(FrontSide,BackSide,DoubleSide)设置要正确之外，还要注意模型的实际中心点位置。 如果模型实际中心点位置跑到了相机的视锥体外面也会导致模型消失。 某些动画师或者模型师导出不规范的模型时会出现此类问题。 如果要把某个模型或者全部mesh改为即使物体中心点看不到也不消失可以这样： //遍历子物体，如果是mesh就让他不裁剪消失 model.trave...
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
12-09
本示例"ThreeJS使用Curve曲线让物体沿轨迹运动DEMO"探讨了如何利用Three.js中的Curve类来创建自定义的路径，并使物体沿着这条路径移动。 首先，让我们理解什么是Curve。在Three.js中，Curve是定义二维空间中路径的...
unity编辑物体旋转缩放等功能插件.rar
03-30
里面有网上能下载的到unity在运行状态下旋转缩放编辑物体，一共两个插件一个是ObjectTransForm插件（测试功能可以用，指向标颜色可能会丢失），另外一个是RuntimeTransformGizmo插件（功能完美）亲测可用
three.js旋转立方体
04-18
我们可以使用`THREE.Object3D.rotation.y += angle`来改变立方体的Y轴旋转角度。 9. **渲染场景**：最后，调用渲染器的`render`方法来绘制场景和相机视图。 在这个示例中，代码注释将详细解释每个步骤的作用，帮助...
css旋转div，div位置发生偏移
吴纯玲的博客
01-10 8769
实现下图的遮罩层loading旋转。   但是旋转的时候却发现旋转块发生了位置偏移。 代码如下 <div class="mask"> <div class="load-circle"> </div> </div> /* 遮罩层 */ .mask { width: 100%; height: 100%; pos...
threejs-- add()和attach（）的区别(不受父对象影响)
最新发布
weixin_45705239的博客
06-21 354
add()用于构建层级关系，子对象会继承父对象的变换。attach()用于管理物体之间的关系，添加的物体不会直接继承父对象的变换。选择使用哪个方法取决于你的需求：如果希望子对象能够受到父对象的变换影响，使用add()；如果希望在不受父对象变换影响的情况下管理层级关系，使用attach()。
three.js - scene场景属性讲解
qq_42005992的博客
11-19 911
scene对象可以包含所有的物体，摄像机，光源以及其他的一些对象 scene对象还可称为场景图，它不仅仅是一个对象数据，还包含了整个场景图树形结构中的所有节点 每个添加到three.js场景的对象，甚至包括scene场景，都是继承自THREE.Object3D的对象 每个THREE.Object3D对象都有自己的子对象我们可以通过它的子对象来创建一个three.js能够解释和渲染的对象 THREE.Scene的方法和属性 add(object) 向场景中添加对象，使用该方法还可以创建一个..
Three.js 旋转 rotation\rotateOnAxis\rotateX
这是个问题
05-12 1万+
属性： 属性名 说明 使用方法 .rotation 物体的局部旋转，以弧度来表示 object3D.rotation.x = 10 注意，这里设置的数值是弧度，需要和角度区分开 角度 转 弧度 MathUtils.degToRad(deg) 弧度 转 角度 MathUtils.radToDeg (rad) 方法： rotateOnAxis 在局部空间中绕着该物体的轴来旋转一个物体 方法 传参 使用方法 .rotateOnAxis ( axis : V
Three.js - SceneUtils 工具类
ithanmang
07-10 2973
THREE.SceneUtils是Scene对象的工具类，用于对场景中的对象进行操作。 使用时需要引入js库文件examples\js\utils\SceneUtils.js 方法 1 .createMultiMaterialObject() 方法名 .createMultiMaterialObject ( geometry : Geometry, materials : Array )...
three.js 变换大小、角度、位移控件 TransformControls.js
热门推荐
蜗牛速度额的博客
09-05 1万+
TransformControls.js：鼠标操控物体移动、缩放、旋转的控件（物体操作工具） 该控件可以实现可视化操作三维模型，通过选中一个三维模型，然后通过控件对象的方法attach()可以把选中的三维模型与控件TransformControls绑定， 你可以把控件对象TransformControls理解为一个特殊的三维模型，比如平移状态，控件对象TransformControls就是一个三...
Three.js坐标系与变换矩阵快速入门
新缸中之脑
01-27 5035
很多东西汇集在一起构成一个美丽的 3D 场景，例如光照、材质、模型、纹理、相机设置、后期处理、粒子效果、交互性等等，但无论我们创建什么样的场景，没有比这更多的了 比组成它的乐曲的排列和运动更重要。要创建建筑效果图，我们必须成为建筑师和室内装饰师。我们必须考虑建筑物和里面房间的比例，巧妙地放置家具和灯具。在自然场景中，无论是一朵花的特写，还是广阔的山景，我们都需要以自然而令人信服的方式安排树木和岩石，或叶子和花瓣。
threejs基础示例
qianbo042311的博客
03-13 1205
1 先打一个架子，这样容易写代码 先看一个结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%;
three.js 围绕某物体旋转
09-01
three.js是一个用于创建WebGL图形的JavaScript库。要围绕某物体旋转，我们可以使用three.js中的旋转方法和对象来实现。 首先，我们需要创建一个场景(scene)、相机(camera)和渲染器(renderer)。然后，我们可以在场景中添加一个几何体(例如立方体或球体)作为我们要围绕旋转的物体。 接下来，我们可以使用以下代码来设置物体的旋转： ``` var object = new THREE.Object3D(); // 创建一个对象来包含我们的物体 scene.add(object); // 将对象添加到场景中 function animate() { object.rotation.y += 0.01; // 围绕Y轴旋转 renderer.render(scene, camera); // 渲染场景 requestAnimationFrame(animate); // 循环调用 animate() 方法，使物体不断旋转 } animate(); // 开始动画循环 ``` 在这个例子中，我们使用`object.rotation.y`来控制物体绕Y轴旋转。通过修改旋转的角度值，我们可以调整旋转的速度和方向。 最后，我们需要在HTML中创建一个canvas元素来渲染我们的场景。例如： ``` <div id="canvas"></div> <script> // 创建WebGL渲染器，指定渲染器大小为canvas元素的大小 var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('canvas')}); renderer.setSize(window.innerWidth, window.innerHeight); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建场景 var scene = new THREE.Scene(); // 添加光源 var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 5); scene.add(light); // 添加物体和旋转动画 // ... // 开始渲染和动画循环 // ... </script> ``` 通过以上步骤，我们可以使用three.js围绕某物体旋转，并在浏览器中以WebGL图形的形式呈现出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懵懵爸爸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值