飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

造个海洋球池来学习物理引擎【Three.js系列】-

时间:2022-05-25  作者:qiufenghua  

github地址:https://域名/hua1995116/Fly-域名

大家好,我是秋风。继上一篇《域名系列:   游戏中的第一/三人称视角》今天想要和大家分享的呢,是做一个海洋球池。

海洋球大家都见过吧?就是商场里非常受小孩子们青睐的小球,自己看了也想往里蹦跶的那种。

图片

就想着做一个海洋球池,然后顺便带大家来学习学习 域名 中的物理引擎。

那么让我们开始吧,要实现一个海洋球池,那么首先肯定得有“球”吧。

因此先带大家来实现一个小球,而恰恰在 域名 中定义一个小球非常的简单。因为 域名 给我们提供非常丰富几何形状 API ,大概有十几种吧。

图片

提供的几何形状恰巧有我们需要的球形, 球形的 API  叫 SphereGeometry。

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

这个API 一共有 7 个参数,但是呢,我们需要用到就只有前3个参数,后面的暂时不需要管。

Radius 的意思很简单,就是半径,说白了就是设置小球的大小,首先我们设置小球的大小,设置为 0.5,然后其次就是 widthSegments 和 heightSegments ,这俩值越大,球的棱角就越少,看起来就越细腻,但是精细带来的后果就是性能消耗越大,widthSegments 默认值为32,heightSegments默认值为 16 ,我们可以设置 20, 20

const sphereGeometry = new 域名reGeometry(0.5, 20, 20);

这非常的简单,虽然小球有了形状,我们还得给小球设置上材质,材质就是类似我们现实生活中的材料,不是是只要是球形的就叫一个东西,比如有玻璃材质的弹珠,有橡胶材质的网球等等,不同的材质会与光的反射不一样,看起来的样子也不一样。在 域名 中我们就设置一个标准物理材质 MeshStandardMaterial ,它可以设置金属度和粗糙度,会对光照形成反射,然后把球的颜色设置成红色,

const sphereMaterial = new 域名StandardMaterial({
  color: \'#ff0000\'
});
const mesh = new 域名(sphereGeometry, sphereMaterial);

域名(mesh);

然后我们将它添加到我们的场景中,emmm,看起来黑乎乎的一片。

域名

“上帝说要有光,于是就有了光”,黑乎乎是正常的,因为在我们场景中没有灯光,这个意思很简单,当夜晚的时候,关了灯当然是伸手不见五指。于是我们在场景中加入两盏灯,一个环境灯,一个直射灯,灯光在本篇文章中不是重点,所以就不会展开描述。只要记住,”天黑了,要开灯”

// Ambient light
const ambientLight = new 域名entLight(0xffffff, 0.5)
域名(ambientLight)

// Directional light
const directionalLight = new 域名ctionalLight(0xffffff, 0.5)
域名(2, 2, -1)
域名(directionalLight)

图片

嗯!现在这个球终于展现出它的样子了。

一个静态的还海洋球肯定没有什么意思,我们需要让它动起来,因此我们需要给它添加物理引擎。有了物理引擎之后小球就会像现实生活中的样子,有重力,在高空的时候它会做自由落地运动,不同材质的物体落地的时候会有不同的反应,网球落地会弹起再下落,铅球落地则是静止的。

常用的 3d 物理引擎有Physijs 、域名 、域名 和 域名 等等。这里我们用到的则是 域名

在 域名 官网有很多关于 3d 物理的效果,详细可以看他的官网 https://域名/cannon-es/

图片

引入 域名

import * as CANNON from \'https://域名/npm/cannon-es@域名.0/dist/cannon-域名\';

首先先创建一个物理的世界,并且设置重力系数 9.8

const world = new 域名d();

域名(0, -域名, 0);

在物理世界中创建一个和我们 域名 中一一对应的小球,唯一不一样的就是需要设置 mass,就是小球的重量。

const shape = new 域名re(0.5);

const body = new 域名({
    mass: 1,
    position: new 域名(0, 3, 0),
    shape: shape,
});

域名ody(body);

然后我们再修改一下我们的渲染逻辑,我们需要让每一帧的渲染和物理世界对应。

+ const clock = new 域名k();
+ let oldElapsedTime = 0;

const tick = () => {
+   const elapsedTime = 域名lapsedTime()
+   const deltaTime = elapsedTime - oldElapsedTime;
+   oldElapsedTime = elapsedTime;

+   域名(1 / 60, deltaTime, 3);

    域名te();

    域名er(scene, camera)

    域名estAnimationFrame(tick)
}

tick();

但是发现我们的小球并没有动静,原因是我们没有绑定物理世界中和 域名 小球的关系。

const tick = () => {
 ...
+ 域名(域名tion);
 ...
}

来看看现在的样子。

图片

小球已经有了物理的特性,在做自由落体了~ 但是由于没有地面,小球落向了无尽的深渊,我们需要设置一个地板来让小球落在一个平面上。

创建 域名 中的地面, 这里主要用到的是 PlaneGeometry  它有4个参数

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

和之前类似我们只需要关注前 2 个参数,就是平面的宽和高,由于平面默认是 x-y 轴的平面,由于域名 默认用的是右手坐标系,对应的旋转也是右手法则,所以逆时针为正值,顺时针为负值,而我们的平面需要向顺时针旋转 90°,所以是 -PI/2

const planeGeometry = new 域名eGeometry(20, 20);
const planeMaterial = new 域名StandardMaterial({
    color: \'#777777\',
});

const plane = new 域名(planeGeometry, planeMaterial);
域名tion.x = -域名 * 0.5;
域名(plane);

然后继续绑定平面的物理引擎,写法基本和 域名 差不多,只是 API 名字不一样

const floorShape = new 域名e();
const floorBody = new 域名();
域名 = 0;
域名hape(floorShape);
域名romAxisAngle(new 域名(-1, 0, 0), 域名 * 0.5);
域名ody(floorBody);

来看看效果:

图片

但是这个效果仿佛是一个铅球落地的效果,没有任何回弹以及其他的效果。为了让小球不像铅球一样直接落在地面上,我们需要给小球增加弹性系数。

const defaultMaterial = new 域名rial("default");

const defaultContactMaterial = new 域名actMaterial(
    defaultMaterial,
    defaultMaterial,
    {
        restitution: 0.4,
    }
);
域名ontactMaterial(defaultContactMaterial);
域名ultContactMaterial = defaultContactMaterial;

...
const body = new 域名({
    mass: 1,
    position: new 域名(0, 3, 0),
    shape: shape,
+   material: defaultMaterial,
}); 
...

查看效果:

图片

海洋球池当然不能只有一个球,我们需要有很多很多球,接下来我们再来实现多个小球的情况,为了生成多个小球,我们需要写一个随机小球生成器。

const objectsToUpdate = [];
const createSphere = (radius, position) => {
 const sphereMaterial = new 域名StandardMaterial({
     metalness: 0.3,
     roughness: 0.4,
     color: 域名om() * 0xffffff
 });
 const mesh = new 域名(sphereGeometry, sphereMaterial);
 域名(radius, radius, radius);
 域名Shadow = true;
 域名(position);
 域名(mesh);
 
 const shape = new 域名re(radius * 0.5);
 const body = new 域名({
     mass: 1,
     position: new 域名(0, 3, 0),
     shape: shape,
     material: defaultMaterial,
 });
 域名(position);
 
 域名ody(body);
 
 域名({
     mesh,
     body,
 });
};

以上只是对我们之前写的代码做了一个函数封装,并且让小球的颜色随机,我们暴露出小球的位置以及小球的大小两个参数。

最后我们需要修改一下更新的逻辑,因为我们需要在每一帧修改每个小球的位置信息。

const tick = () => {
...
for (const object of objectsToUpdate) {
    域名域名(域名tion);
    域名域名(域名ernion);
}
...
}

紧接着我们再来写一个点击事件,点击屏幕的时候能生成 100 个海洋球。

域名ventListener(\'click\', () => {

  for (let i = 0; i < 100; i++) {
      createSphere(1, {
          x: (域名om() - 0.5) * 10,
          y: 10,
          z: (域名om() - 0.5) * 10,
      });
  }
}, false);

查看下效果:

图片

初步的效果已经实现了,由于我们的池子只有底部一个平面,没有设置任何墙,所以小球就四处散开了。所以大家很容易地想到,我们需要建设4面墙,由于墙和底部平面有的区别就是有厚度,它不是一个单纯的面,因此我们需要用到新的形状 —— BoxGeometry , 它一共也有7个参数,但是我们也只需要关注前3个,对应的就是长宽高。

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

现在我们来建立一堵 长20, 宽 5, 厚度为 0.1 墙。

const box = new 域名eometry(20, 5, 0.1);
const boxMaterial = new 域名StandardMaterial({
    color: \'#777777\',
    metalness: 0.3,
    roughness: 0.4,
});

const box = new 域名(box, boxMaterial);
域名(0, 2.5, -10);
域名(box)

现在它长成了这个样子:

图片

接着我们”依葫芦画瓢“完成剩下3面墙:

图片

Untitled

然后我们也给我们的墙添加上物理引擎,让小球触摸到的时候,仿佛是真的碰到了墙,而不是穿透墙。

const halfExtents = new 域名(20, 5, 0.1)
const boxShape = new 域名(halfExtents)
const boxBody1 = new 域名({
    mass: 0,
    material: defaultMaterial,
    shape: boxShape,
})

域名(0, 2.5, -10);

域名ody(boxBody1);
...
boxBody2
boxBody3
boxBody4

查看效果

图片

收获满满一盆海洋球

图片

大功告成!

来总结一下我们本期学习的内容,一共用到  SphereGeometry、PlaneGeometry、 BoxGeometry,然后学习了 域名 几何体 与  物理引擎 域名 绑定,让小球拥有物理的特性。

主要得步骤为

  • 定义小球
  • 引入物理引擎
  • 将 域名 和 物理引擎结合
  • 生成随机球
  • 定义墙

好了,以上就是本章的全部内容了,下一个篇章再见。

github地址:https://域名/hua1995116/Fly-域名

系列连载首发地址:

  1. 域名系列: 造个海洋球池来学习物理引擎
  2. 域名系列: 游戏中的第一、三人称视角

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。