Three.js 光柱效果、树、草 两个矩形交叉 - 文章教程

Three.js 光柱效果、树、草 两个矩形交叉

发布于 2021-08-27 字数 1005 浏览 1012 评论 0

你如果想在 Three.js 创建一个光柱效果,希望通过很简单的方式在场景中模拟一棵树或一棵草,可以通过 Three.js 的矩形平面几何体 PlaneGeometry 创建一个网格模型,然后把一个背景透明的 .png 格式图片作为矩形网格模型的纹理贴图。

// 创建一个矩形几何体
var plane = new THREE.PlaneGeometry(50,200)
var material = new THREE.MeshPhongMaterial({
  //设置矩形网格模型的纹理贴图(光柱特效、树或草等你想要表达效果对应背景透明纹理贴图)
    map: textureLoader.load('light.png'),
    // 双面显示
    side: THREE.DoubleSide,
    // 开启透明效果,否则颜色贴图map的透明不起作用
    transparent: true,
});
var mesh = new THREE.Mesh(plane, material);

为了增强立体效果,可以创建两个矩形网格模型然后90度交叉即可

// 矩形网格1
var mesh1 = new THREE.Mesh(plane, material);
// 克隆网格模型mesh1,并旋转90度
var mesh2 = mesh1.clone().rotateY(Math.PI/2)
var groupMesh= new THREE.Group()
groupMesh.add(mesh1,mesh2)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

想挽留

这个人比较懒,什么都没有填写!

18 文章
3 评论
20026 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0