本篇文章我们通过介绍3 d影院的视觉原理,并介绍了three.js事件处理过程,全面分析了实现3 d影院的基础知识。
1。创建一个3 d的空间
可以想象一下我们在房间内,房间是一个立方体,如果你有生活品味,可能会在房间内贴上壁纸,three.js可以很方便的创建一个立方体,并且给它的周围贴上纹理,让照相机在立方体之中,照相机可以360旋转,就模拟了一个真实的场景。
转换为代码:
const path=资产/图像/'
const格式=' jpg '
const url=[
“${路径}px ${}格式”,“${路径}nx ${格式}’,
“${路径}py ${}格式”,“$ {path}纽约${}格式”,
“${路径}pz ${}格式”,“${路径}{格式}新西兰元'
]
const材料=[]
url。forEach (url=比;{
const textureLoader=new textureLoader ()
textureLoader.setCrossOrigin (this.crossOrigin)
const纹理=textureLoader.load (url)
材料。推动(新MeshBasicMaterial ({
地图:纹理,
透支:没错,
一面:臀部
}))
})
const立方体=new网(新CubeGeometry(9000、9000、9000),新MeshFaceMaterial(材料)
this.scene.add(立方体)
CubeGeometry创建一个超大的立方体MeshFaceMaterial给立方体贴上文理,由于视角是在立方体内部,所以一面:背面2。粒子效果
一个3 d模型是由点,线,面组成的,可以遍历模型的每一个点,把每一个点转换为几何模型,并且给它贴上文理,拷贝每一个点的位置,用这些几何模型重新构成一个只有点的模型,这就是粒子效果的基本原理。
这一点。点=新组()
const顶点=[]
让点
const纹理=new TextureLoader () .load(“资产/图像/dot.png”)
geometry.vertices。forEach ((o, i)=比;{//记录每个点的位置
vertices.push (o.clone ())
const _geometry=new几何()//拿到当前点的位置
const pos顶点=[我]
_geometry.vertices。推动(新Vector3 ())
const=new颜色()
颜色。r=Math.abs (math . random () * 10)
颜色。g=Math.abs (math . random () * 10)
颜色。b=Math.abs (math . random () * 10)
const材料=new PointsMaterial ({
的颜色,
大小:math . random () * 4 + 2,
地图:纹理,
混合:AddEquation,
depthTest:假的,
透明:真
})
点=new点(_geometry、材料)
point.position.copy (pos)
this.points.add(点)
})
返回this.points
新组创建一个群,可以说是粒子的集合通过point.position.copy (pos)设置粒子和位置,坐标和模型中对应点的位置相同3。点击事件的处理
three.js的点击事件需要借助光线投射器(Raycaster),为了方便理解,请先看一张图:
Raycaster发射一个射线,intersectObject监测射线命中的物体
这一点。raycaster=new raycaster ()//把你要监听点击事件的物体用数组储存起来
this.seats.push(座位)
onTouchStart(事件){
event.preventDefault ()
事件。clientX=event.touches [0] .clientX;
事件。clientY=event.touches [0] .clientY;
this.onClick(事件)
｝>
const vertext='
void main ()
{
gl_Position=projectionMatrix * modelViewMatrix * vec4(位置,1.0);
｝
｀
const片段='
制服vec2决议;
统一的浮动时间;
vec2兰特(vec2 pos)
{
返回部分(0.00005 *(战俘(pos + 2.0, pos.yx + 1.0) * 22222.0));
｝
vec2 rand2 (vec2 pos)
{
返回兰德公司(rand (pos));
｝
浮动softnoise (vec2 pos,浮动范围)
{
vec2 smplpos=pos *规模;
浮动c0=rand2((地板(smplpos) + vec2(0.0, 0.0))/规模)方式;
c1=rand2浮动(地板(smplpos) + vec2(1.0, 0.0))/规模)方式;
浮动c2=rand2((地板(smplpos) + vec2(0.0, 1.0))/规模)方式;
浮动c3=rand2((地板(smplpos) + vec2(1.0, 1.0))/规模)方式;
vec2 a=打破(smplpos);
返回组合(
混合(c0, c1, smoothstep (0.0, 1.0, a.x)),
混合(c2、c3 smoothstep (0.0, 1.0, a.x)),
smoothstep (0.0, 1.0, a.y));
｝
void main(空白)
{
vec2 pos=gl_FragCoord。xy/resolution.y;
pos.x +=* 0.1;
浮色=0.0;
浮动s=1.0;
for (int i=0;我& lt;8;我+ +)
{
颜色+=softnoise (pos + vec2(我)* 0.02 * 4.0)/s/2.0;
*=2.0;
｝
gl_FragColor=vec4(颜色);
｝
｀//设置物体的质材为着色器质材
让材料=new ShaderMaterial ({
制服,制服,
vertexShader: vertext,
fragmentShader:片段,
透明:没错,
})
