之前我们实现threejs实现地球围绕太阳公转,距离threejs创建太阳系近了一步,地球围绕太阳公转了,我们需要绘制一条线用来表示公转轨道。
创建轨道方法
通过three方法我们可以使用ArcCurve来绘制轨道,我们创建一个绘制轨道的方法
import * as THREE...
yekong
2年前 (2023-03-26)
喜欢
threejs实现发光描边后,我们可以继续深入学习,进行更多的设置。
OutlinePass有很多控制高亮外边框样式的属性,下面介绍几个比较常用的属性。
OutlinePass描边颜色
OutlinePass描边颜色,通过visibleEdgeColor来实现,默认是白色
out...
yekong
2年前 (2023-03-24)
喜欢
threejs会遇到一些需求,比如模型选中后,添加一个高亮描边的效果,表示当前模型选中了,那么如何实现描边呢?
这里我们可以使用OutlinePass来实现高亮发光描边效果
后期处理需要用到EffectComposer.js效果合成器,对threejs进行后期处理。
引入Effe...
yekong
2年前 (2023-03-24)
喜欢
学习Threejs中的射线Ray概念,你可以类比数学几何中提到的射线,在三维空间中,一条线把一个点作为起点,然后沿着某个方向无限延伸。
创建射线对象
// 创建射线对象
const ray = new THREE.Ray()
射线起点 .origin
射线Ray的起点.orig...
yekong
2年前 (2023-03-09)
喜欢
vue 可视化数据大屏 智慧校园综合指挥中心项目开发中,需要使用threejs绘制一个圆环轨道
使用
circle(type.R);
绘制方法
// 圆弧轨迹绘制函数
function circle(r) {
// ArcCurve创建一个圆弧曲线
var a...
yekong
2年前 (2023-03-08)
喜欢
问题
在threejs项目中,可能会出现一种情况,明明修改的只是模型1的材质颜色,其他模型的材质颜色也跟着变了。
原因:
两个模型共享的同一个材质,对材质的任何修改都会同时反应在两个模型上。
两个mesh共享一个材质,改变一个mesh的颜色,另一个mesh2的颜色也会跟着改变
n...
yekong
2年前 (2023-02-28)
喜欢
threejs项目开发中我们会遇到隐藏模型的需要,我们可以通过属性.visible来控制模型的隐藏和显示。
.visible是true是显示,false为隐藏,默认为true
group.visible = false
材质属性 .visible
材质对象的父类 Materia...
yekong
2年前 (2023-02-28)
喜欢
threejs 通过add()添加对象,比如添加模型光源到场景中。
通过remove移出对象,将已添加的对象从父对象.children属性中删除。
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geom...
yekong
2年前 (2023-02-28)
喜欢
展示一个三维场景,你想控制360度旋转范围,比如一个工厂,你不希望用户看到工厂的底部,你可以通过设置相机的旋转范围属性来实现。
通过.minPolarAngle 和.maxPolarAngle 属性控制上下的旋转范围,默认从0到180度, 默认情况下0度,XOZ平面平行canva...
yekong
2年前 (2023-02-28)
喜欢
在实际应用中,透视投影相机的规则是远小近大,相机距离目标观察点距离越远,目标模型显示越小,距离越近显示越大.
对于透视投影相机而言,OrbitControls缩放,本质上就是改变相机的位置属性.position.
这就是说如果你想控制缩放范围,就是约束相机位置.position的...
yekong
2年前 (2023-02-28)
喜欢