threejs
关注
分享
扫一扫
文章平均质量分 64
biyusr
qq:280905365
展开
-
threejs球体旋转与场景旋转_js 之threejs地球旋转
如果报这个错DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded问题解决:其实还是因为跨域的问题，尝试使用webstorm打开即可浏览效果：代码：3Dmapbody{margin: 0;}#canvasBox{width:100%;height:99.5%;position: absolute;}var ca原创 2022-06-28 11:04:44 · 1288 阅读 · 0 评论 -
threejs显示不出物体的几种可能性
1.没有进行render渲染。2.物体不在于相机的最近值和最远值之间。3.物体在相机的后面所以看不到。4.物体太小，需要放大才能看到。原创 2021-09-14 15:15:22 · 3345 阅读 · 0 评论 -
Three.js中矩阵和向量的使用教程(附例子)
https://www.jb51.net/article/158076.htm /** * 创建场景对象Scene */ var scene = new THREE.Scene(); /** * 创建网格模型 */ var box_geometry = new THREE.BoxGeometry(32, 32, 32); var sphere_geometry = new THREE.SphereGeometry(16, 32, 32); var cy.转载 2021-05-11 17:24:17 · 2636 阅读 · 0 评论 -
threejs球体旋转与场景旋转_Threejs 创建一个虚拟城市三维场景
前情回顾前几篇文章大概讲述了threejs如何创建场景,创建几何体,纹理贴图等...本篇文章主要讲述threejs如何去搭建一个智慧城市虚拟场景(主要讲述如何去加载模型以及加载贴图)开发前准备1.从官方下载threejs的包,引入到项目中 2.智慧城市模型一份( 本篇文章主要加载的 OBJ+ MTL) 3.具备前几章节讲到的一些基础知识(如果还不会的话请看前几篇文章哦) 4.学习了解MTLLoader.js和OBJLoader.js(加载模型主要用到这两个js) 5....转载 2021-04-29 13:30:52 · 665 阅读 · 0 评论 -
threejs 加载两个场景_Three.js 对模型多个动画切换展示(fbx)
Titlemargin:0;height:100%;}canvas {display: block;}varrenderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action,datGui;var clock = newTHREE.Clock();functioninitRender() {renderer= new THREE.WebGLRenderer({antialias: true}转载 2021-04-29 13:28:42 · 2161 阅读 · 0 评论 -
threejs球体旋转与场景旋转_threejs 在微信小程序中，我回答过的一些问题（1）...
小程序玩了一段时间后，又把之前搁置的threejs，捡起来，做了一点东西，对它的了解又多了一些，也回答过群友的几个问题，这里做一次罗列。不过我也承认threejs真的是很多坑，一个人学是真的很烦。但请耐住性子，毕竟在你前面，别人也是这么一个个踩坑踩过来的，总能搜到办法的。Q1：为何示例里面的模型，在真机预览上都看不到？答：原因在于模型下载地址，不在小程序request合法域名中。如果只是想真机浏览下效果，不考虑日后上线问题，可以在真机预览轻快下，打击页面右边上面的3个点，选择打开调试即可，这转载 2021-04-29 13:27:31 · 684 阅读 · 0 评论 -
在threejs中对3D物体旋转的思考
今天在写threejs时，突然想到一个问题：一个3D物体需要旋转时，一般情况下简单的旋转我都是使用欧拉角，稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转（欧拉角复杂旋转可能会产生的死锁问题），但是在threejs中object3D的旋转方法无论是使用setRotation（沿着x、y、z轴旋转）还是rotateOnAxis（按从原点到任意方向的向量进行旋转）都无法完成沿着一个不经过原点的轴进行旋转（或者是我没有发现），但是实际应用的情况是存在的，比如一个大箱子，再某种情况下我们需要他沿着y轴旋转，另一种转载 2021-04-29 13:26:03 · 817 阅读 · 0 评论 -
threejs- z-fighting 问题（模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题）
Z-Buffer在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距离观察者较*的物体在该像素点的渲染结果，这样就形成了*的模型遮挡远的模型的结果。上面说到，深度缓冲（Z-Buffer）是一个二维数组，但是数组的元素类型却可以不同，不同的元素类型代表着不同的精度。这和颜色的转载 2021-04-29 13:22:53 · 2679 阅读 · 1 评论 -
three.js 模型重合相交部分闪烁 Z-Fighting
Z-Fighting当场景中两个模型在同一个位置时，渲染器会根据它们的深度值来显示前面的模型，隐藏背后的部分。而当他们的位置及深度值相同时，渲染器则不确定哪个将被绘制到颜色缓冲区中，相机旋转时，情况会变得更糟，于是就出现了闪烁现象，这就是“Z-Fighting”想要解決这个问题，就是要让他们有不同的深度值（下面的主要说这种方法如何实现。）。或者是手动设置渲染顺序，这样即使在同一位置同一个深度值当中也会将后渲染的覆盖之前的，这种出来的效果类似于设置了css当中的z-index，这种方法不太适用于我的转载 2021-04-29 13:21:09 · 1999 阅读 · 3 评论 -
关于 Threejs 模型旋转问题(笔记)
用到一个基础的 three.js 的拖拽旋转, 梳理了一下资料,欧拉角旋转的问题定义的话看 Wiki, 数学描述太晦涩, 没细看https://zh.wikipedia.org/wiki...简单的描述就是定义了沿着 X Y Z 方向的依次旋转, 来模拟空间当中的任何一个旋转,但是用欧拉角描述旋转有问题, 就是一个空间旋转这里是拆成三个旋转来描述的,存在问题, 就是不同的多个旋转合并是可能得到一个旋转的, 所以这种描述并不精确,实际当中就导致一些问题了, 数学上有一些问题, 然.转载 2021-04-29 13:17:12 · 6086 阅读 · 0 评论 -
Threejs 物体闪烁
摸索经验告诉我，对物体的材料关闭深度检测有奇效。即：depthTest: false有同类问题的童鞋可以试试。转载 2021-04-29 13:11:21 · 2592 阅读 · 4 评论 -
threejs 纹理流动_three.js – 将纹理应用于threejs模型时出现奇怪的线条(“接缝”)...
我正在将从.ctm文件导入的模型渲染为threejs v71.然后我使用MeshBasicMaterial和map添加纹理.原始模型在Agisoft Photoscan中制作,导出为.obj,然后使用官方OpenCTM查看器程序转换为OpenCTM格式. .ctm模型本身是here.它看起来是正确的,除了加载.ctm时纹理上出现奇怪的“接缝”. .obj在没有接缝的情况下在three.js中加载正常.这些是什么,我如何摆脱它们？这是一个截图：纹理文件中不存在这些“接缝”：更新：我注意到在转载 2021-04-29 10:21:19 · 946 阅读 · 0 评论 -
threejs球体旋转与场景旋转_threejs中矩阵旋转原理
矩阵的概念threejs中的矩阵矩阵的应用用于旋转一个几何体创建一个立方体cube放到场景中；绕向量(1,1,0)旋转30度var axis = new THREE.Vector3(1,1,0); //创建一个三维向量var rotWorldMatrix = new THREE.Matrix4(); //创建一个4*4矩阵rotWorldMatrix.makeRotationAxis(axis.normalize(), 30 * Math.PI / 180 );rotWo转载 2021-04-29 10:19:32 · 1147 阅读 · 0 评论 -
Three.js_解决谍影锯齿闪烁重影模型的方法
像素点重叠问题问题展示解决后效果解决方法renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true,});设置logarithmicDepthBuffer属性为true, 便可以处理这个问题logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用, 默认是false。 使用了会带.转载 2020-12-17 13:13:16 · 1653 阅读 · 1 评论 -
使用three.js画的简单的墙壁 在墙上挖了个门，做纪念
项目要用到web3d 但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。 关于框架的基本搭建和js引入，场景相机等的基本添加就不说明了，随便搜一下就一堆说明，重点说下如何在墙壁上挖一个门出来。 首先使用了ThreeBSP.js的类库<script src="js/ThreeBSP.js"></script> 然后是主要代码...转载 2019-02-22 13:11:08 · 1144 阅读 · 0 评论 -
用Three.js实现简单布局的3D房间
https://blog.youkuaiyun.com/mxdmojingqing/article/details/78044520废话不说了，直接上成果图。 代码如下<!doctype html><html lang="en"><head><title>房间布局</title><meta charset="utf-8转载 2019-02-22 13:12:31 · 2976 阅读 · 0 评论 -
使用three.js画的简单的墙壁 在墙上挖了个门，做纪念
项目要用到web3d 但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。 关于框架的基本搭建和js引入，场景相机等的基本添加就不说明了，随便搜一下就一堆说明，重点说下如何在墙壁上挖一个门出来。 首先使用了ThreeBSP.js的类库<script src="js/ThreeBSP.js"></script> 然后是主要代码:...转载 2019-02-22 13:22:32 · 994 阅读 · 0 评论 -
threejs加载三维模型
直接使用three.js编程建模比较麻烦，实际开发的时候往往会借助一些可视化的3D建模工具，比如SolidWorks、Blender、C4D、3Dmax。不同领域的三维软件支持导出的文件有所差异，比如工业设计、机械设计类的三维软件往往支持导入静态的3D模型，游戏开发常常使用的Blender等三维软件，除了静态的三维模型，还可以导出含有动画信息的三维模型。three.js针对不同的文件格式，提供了许...转载 2019-02-20 11:01:04 · 40646 阅读 · 4 评论 -
使用three.js搭建室内场景
公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。1.创建地板 地板是一个类似盒子，有顶部有底部有侧面，但是不一定...转载 2019-02-21 08:54:22 · 3611 阅读 · 0 评论 -
Threejs 中建立可看到其内部的房间效果
Threejs 中建立可看到其内部的房间效果太阳火神的美丽人生 (http://blog.youkuaiyun.com/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句：太阳火神的美丽人生 - 本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。...转载 2019-02-22 13:10:06 · 1365 阅读 · 0 评论