0

点赞
0

评论
收藏
分享
举报

ThreeJS之动画交互逻辑及特效

Terry

关注

0
0
0
1745
发表于 2020-08-10 20:04:36

工作需要，研究了一下 threejs 简单逻辑动画交互方法。写了一个小示例，分享一下，挺丑的。

文章转载自：
https://www.cnblogs.com/catherinezyr/p/7742357.html

**第一步**

当然就是初始化 threejs 的渲染场景了。

var camera; //相机
var scene;//场景
var renderer;//webGL渲染器
var controls;//轨道控件，用于特定场景，模拟轨道中的卫星，可以用鼠标和键盘在场景中游走 
var raycaster;//THREE.Raycaster对象从屏幕上的点击位置想场景中发射一束光线，返回射线穿透物体的数组
var composer;//后期特效合成器，给场景选中物体添加发光特效

**第二步**

在 ThreeJs Editor 中建立简单的示例模型，“Export Scene”，导出。并导入示例程序。免去了在示例程序中自己建模的麻烦，不过因为示例程序要加载本地的json，所以可以设置一个简单的 nodejs 服务器。

在 nodejs 的 anywhere 下运行该示例：

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027101921805-641110392.png)

加载模型文件，将文件中的相关 object 加入 **group **中：

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

var url = 'nofloor.json';
                var loader= new THREE.ObjectLoader();
　　　　　　　　　 var geometry = new THREE.Geometry();//存放objects的position坐标，为之后线条的起始点坐标服务
                loader.load( url, function ( loadedScene ) {
                    //scene = loadedScene;

var objects = loadedScene.children;
 for(var i=0;i<objects.length;i++){

if(objects[i].type == 'Mesh' ){

objects[i].receiveShadow = true;
                            objects[i].castShadow = true;
                            geometry.vertices.push(objects[i].position);
                            group.add(objects[i]);

}
                        
                    }

} , onProgress, onError);[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

导入的模型差不多就是这样子（丑一点，担待），并在示例程序中加了stats 和 dat.gui 用来检测渲染效果和改变特效参数。

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027101121258-2109961439.png)

** 第三步**

**完成的交互目标是，点击上图中某个柱体选中，出现相应的连线，并且让选中的柱体和连线发光。**

现在先利用 raycaster 选中物体：

var mouse = new THREE.Vector2();　//鼠标经过或者点击的屏幕 canvas 上的位置　　　　　　　　　　　
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;//将 canvas 坐标系转换为 WebGL 坐标系
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );// raycaster的作用场景
var intersects = raycaster.intersectObjects( [group], true );//从鼠标 mouse 位置发射线，选中 group 组中的objects ，并返回 objects 给 intersects

一旦 intersects  不为空，intersects[0].object 就是鼠标选中的物体，可以是上图中的正方体，也可以是上图中的地板。

接下来，皆可以根据选中物体来连线了。连线呢有两种方法。

**第一种**

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027103015211-1978322825.png)

代码如下：

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
 //各个柱体的 position 坐标，也就是上面加载模型文件时候生成的 geometry.vertices );
<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">// THREE.Line 会将 geometry.vertices 中所有坐标点连成一条连续线，但不是首尾相接。 //比如 geometry.vertices 中存放了 v1,v2,v3,v4四个三维坐标点，就会生成v1->v2->v3->v4 连续线，中间有三条线。</pre>

var line = new THREE.Line( geometry, material );[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

但是有一个缺点就是由于受限于 [角度层（ANGLE layer）](https://code.google.com/p/angleproject/)，在Windows平台上使用 [WebGL]( "WebGL渲染器(WebGLRenderer)")，线宽将总是为1而不管设置的值。这样一旦模型是五六米高，可是线条只有不到1cm的宽度，看起来模型就会很奇怪了。这时候就要用第二种方法。

**第二种**

画圆柱体，用圆柱体代替线段，但是生成圆柱体就比线段复杂多了。大家知道，threejs 只会指定一个object的position（中心），而不能指定两端的位置（我还没发现，若有错误，请指正），所以画的初始圆柱体是直立的，如下图

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027103954305-1521579143.png)

让我们要的是下图这样的圆柱体（下面统称为“柱子线”）

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027104058164-1439150193.png)

因为半径是 0.02，所以看起来像线段，这也是为什么要用圆柱体模拟线段的原因了，逼真，而且还能根据模型大小调整这个柱子线的“linewidth”。

下面我们看看怎么怎么根据正方体个球体的坐标动态生成柱子线吧。

上面我们讲了如何选中物体，选中之后，我们把这个物体相邻的物体（建模时候，将所有物体坐标顺序放在 geometry.vertices 中，此处默认坐标相邻就是物体相邻）的 position 坐标加入 geometryChange.vertices  中

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

var object = intersects[0].object;
 geometryChange = new THREE.Geometry();
 var position = intersects[0].object.position;//当前选中物体的坐标
 //搜索 geometry.vertices 中的 position 重新绘制选中物体相关linet
 var p = geometry.vertices.length;
 for(i=0;i<p;i++){
 if(geometry.vertices[i] == position){

if (i == p - 1){//将最后一个物体的前一个物体坐标加入
                                    geometryChange.vertices.push(geometry.vertices[p - 2]);
                                    geometryChange.vertices.push(position);
                                }
                                else if(i == 0){//将第一个物体的后一个坐标加入
                                    geometryChange.vertices.push(position);
                                    geometryChange.vertices.push(geometry.vertices[i+1]);
                                }

else{
                                    geometryChange.vertices.push(geometry.vertices[i-1]);
                                    geometryChange.vertices.push(position);//将物体前后相邻的加入
                                    geometryChange.vertices.push(geometry.vertices[i+1]);
                                  
                                }
                            }
                        }[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

这样我们就把选中物体相邻的物体坐标放在 geometryChange.vertices。现在我们知道柱子线的起点和终点坐标了，那柱子线怎么画，画哪里呢？

var temp = geometryChange.vertices.length;
                        var xyz = geometryChange.vertices;
　　　　　　　　　　　　　　　//position(x,y,z)，就是柱子线的中点位置,xw是起点和中点的 X 轴方向距离，zh是起点和中点的 Z 轴方向距离，cheight是起点和中点的空间距离
　　　　　　　　　　　　　　 var x,y,z,xw,zh,cheight;

先知道柱子线的position（x,y,z），xyz[i]是柱子线起点，xyz[i+1]是柱子线终点。

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">x= (xyz[i].x+xyz[i+1].x)/2;
y=0.1;//线我是画在地面附近的，所以y默认0.1
z=(xyz[i].z+xyz[i+1].z)/2</pre>

再来求柱子线的长度

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">xw=xyz[i].x-xyz[i+1].x;
zh=xyz[i].z-xyz[i+1].z;
cheight=Math.sqrt(xw*xw+zh*zh);//圆柱体长度，勾股定理</pre>

这下画柱子线

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

var material = new THREE.MeshPhongMaterial( {
                                        color: 0x156289,
                                        emissive: 0x00FFFF,
                                        side: THREE.DoubleSide,
                                        shading: THREE.FlatShading,
                                        vertexColors:THREE.FaceColors
                                    } );
var cylinder = new THREE.Mesh( geometryCylinderLine, material );
cylinder.position.set( x, y, z );//两实体的中点，也就是柱子线的中点，自己理解[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

可是发现画的柱子是竖直向上的

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027110704258-1488746553.png)

这个时候就需要改变柱子线的模型矩阵的，对它做旋转，达到我们理想的效果。

我们先分析一下怎么旋转，首先将绕 x 轴转90° ，让柱子线躺地上。

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">cylinder.rotation.x -= Math.PI * 0.5;</pre>

之后如下图分析所示，红线就是躺地上的柱子（自行脑补3D场景）。

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027111923961-1459303228.png)

其中红线和黑线长度相同，红线只需要旋转 θ 角度之后就可以和黑线重合，达到我们要的效果。

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">θ = Math.asin(xw/cheight);//弧度制</pre>

这个时候知道转多少度了，转就ok

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

//考虑到局部坐标系和全局坐标系的转换，柱体是在全局坐标系下旋转
 if(xyz[i].x > xyz[i+1].x && xyz[i].z < xyz[i+1].z)
 cylinder.rotation.z -= Math.asin(xw/cheight);//Math.asin(xw/cheight)为柱体要旋转的角度
 else if(xyz[i].x > xyz[i+1].x && xyz[i].z > xyz[i+1].z)
 cylinder.rotation.z += Math.asin(xw/cheight);
 else if(xyz[i].x < xyz[i+1].x && xyz[i].z < xyz[i+1].z)
 cylinder.rotation.z -= Math.asin(xw/cheight);
 else
 cylinder.rotation.z += Math.asin(xw/cheight);[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

好了，柱子线画出来了。

当然不止一条柱子线，把当前的都加入lineGroup 中

lineGroup.add( cylinder );
scene.add( lineGroup );

下次绘制的时候只要移除当前的 lineGroup 即可。

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">scene.remove( lineGroup );</pre>

**第四步**

加发光特效

借助threejs的 outlinePass 通道

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　　　　　　　　　　composer = new THREE.EffectComposer( renderer );

var renderPass = new THREE.RenderPass( scene, camera );
 composer.addPass( renderPass );

outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
 composer.addPass( outlinePass );

var onLoad = function ( texture ) {

outlinePass.patternTexture = texture;
 texture.wrapS = THREE.RepeatWrapping;
 texture.wrapT = THREE.RepeatWrapping;

};

var loader = new THREE.TextureLoader();

loader.load( 'tri_pattern.jpg', onLoad );

effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 effectFXAA.renderToScreen = true;
 composer.addPass( effectFXAA );</pre>

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码")

在选中时，将物体和相应柱子线加入  outlinePass  渲染目标中即可。

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　　　　　　　　　　　　　　　selectedObjects = [];
 selectedObjects.push( lineGroup );//给选中的线条和物体加发光特效
 selectedObjects.push( intersects[ 0 ].object );
 outlinePass.selectedObjects = selectedObjects;</pre>

ok，这就实现了，点击交互的简单特效。

![](https://images2017.cnblogs.com/blog/787426/201710/787426-20171027112925023-2026549959.png)

当然，这只是个示例，要把它用到复杂的3D场景中，还需要很多的事情要做，加油。

有错误敬请指正。

点击查看更多

全部评论

关于作者

Terry

TA的个人主页

关注

文章

粉丝

获赞

访问

81161