web3D项目中,需要对模型进行操作,比如点击模型后,模型高亮,这里用到了射线投射器Raycaster
效果展示
通过鼠标交互—射线拾取实现点击模型,模型高亮实现实例。
threejs 鼠标交互—射线拾取 选中模型高亮 动态效果 threejs版本
0.123.0 射线拾... 3年前 (2023-07-21) 喜欢
webGL使用threejs实现白雾效果
通过Fog实现雾
// 设置雾化效果,雾的颜色和背景颜色相近,这样远处网格线和背景颜色融为一体
scene.fog = new THREE.Fog(0xffffff, -100, 1000); 背景
通过和雾类似的背景来和雾搭配使用。
... 3年前 (2023-07-21) 喜欢
在学习threejs粒子的时候,发现自己实现的效果和视频中达到的效果差别非常大,经过查询原因如下
在使用Three.js查看粒子时,如果未能实现远小近大的效果,可能有以下几个原因: 相机设置不正确:请确保在创建透视投影相机(PerspectiveCamera)时,设置了适当的... 3年前 (2023-06-25) 喜欢
threejs实现发光描边后,我们可以继续深入学习,进行更多的设置。
OutlinePass有很多控制高亮外边框样式的属性,下面介绍几个比较常用的属性。
OutlinePass描边颜色
OutlinePass描边颜色,通过visibleEdgeColor来实现,默认是白色
out... 3年前 (2023-03-24) 喜欢
学习Threejs中的射线Ray概念,你可以类比数学几何中提到的射线,在三维空间中,一条线把一个点作为起点,然后沿着某个方向无限延伸。
创建射线对象
// 创建射线对象
const ray = new THREE.Ray() 射线起点 .origin
射线Ray的起点.orig... 3年前 (2023-03-09) 喜欢
问题
在threejs项目中,可能会出现一种情况,明明修改的只是模型1的材质颜色,其他模型的材质颜色也跟着变了。
原因:
两个模型共享的同一个材质,对材质的任何修改都会同时反应在两个模型上。
两个mesh共享一个材质,改变一个mesh的颜色,另一个mesh2的颜色也会跟着改变
n... 3年前 (2023-02-28) 喜欢
threejs项目开发中我们会遇到隐藏模型的需要,我们可以通过属性.visible来控制模型的隐藏和显示。
.visible是true是显示,false为隐藏,默认为true
group.visible = false 材质属性 .visible
材质对象的父类 Materia... 3年前 (2023-02-28) 喜欢
threejs 通过add()添加对象,比如添加模型光源到场景中。
通过remove移出对象,将已添加的对象从父对象.children属性中删除。
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geom... 3年前 (2023-02-28) 喜欢
在实际应用中,透视投影相机的规则是远小近大,相机距离目标观察点距离越远,目标模型显示越小,距离越近显示越大.
对于透视投影相机而言,OrbitControls缩放,本质上就是改变相机的位置属性.position.
这就是说如果你想控制缩放范围,就是约束相机位置.position的... 3年前 (2023-02-28) 喜欢
threejs在进行调试的时候,为了方便我们知道光源的位置,我们可以使用PointLightHelper来实现添加可视化点光源,从而更直观的了解到光源在3d项目中的作用。
// 添加光源
const pointLight = new THREE.PointLight(0xffff... 3年前 (2023-02-28) 喜欢