threejs模拟车辆行驶和转弯

标签: 笔记  js  webgl

受疫情影响,开学不成,于是乎找了个公司实习。略微学过一点cesium,但是领导要求我使用three.js搭建一个智慧园区,我…
好在是实习生,每天不用做什么事情,只需要看看网上教程就行了。边学边总结,关于three.js的官方资源不是特别多,一些好的例子也不多,只能慢慢找慢慢摸索。
我也一边学习一边记录一下我的学习过程,如果能帮到后来的人就更好了,也算是做了一点点贡献了,话不多说,开始!

模拟车辆,首先得有车辆,然后车辆得动。问题来了,车辆怎么动?于是我查了一下,找到了这篇文章,代码效果如下。
https://img2018.cnblogs.com/blog/814286/201809/814286-20180928170921435-606119465.gif
这是我的最终结果图:
在这里插入图片描述

<br><!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden; //隐藏body窗口区域滚动条
    }
  </style>
  <!--引入three.js三维引擎-->
  <!-- <script src="./3D/example/three.min.js"></script> -->
  <script src="https://threejs.org/build/three.js"></script>
  <!--引入轨道控件OrbitControls.js-->
  <script src="./3D/example/OrbitControls.js"></script>
</head>
 
<body>
 
  <script>
    /**
     * 创建场景对象
     */
    var scene = new THREE.Scene();
    /**
     * 创建一个设置重复纹理的管道
     */
    var curve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-80, -40, 0),
      new THREE.Vector3(-70, 40, 0),
      new THREE.Vector3(70, 40, 0),
      new THREE.Vector3(80, -40, 0)
    ],false/*是否闭合*/);
    var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('run.jpg');
    // 设置阵列模式为 RepeatWrapping
    texture.wrapS = THREE.RepeatWrapping
    texture.wrapT=THREE.RepeatWrapping
    // 设置x方向的偏移(沿着管道路径方向),y方向默认1
    //等价texture.repeat= new THREE.Vector2(20,1)
    texture.repeat.x = 20;
    var tubeMaterial = new THREE.MeshPhongMaterial({
      map: texture,
      transparent: true,
    });
    var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
    scene.add(tube)
    /**
     * 创建一个半透明管道
     */
    var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false);
    var tubeMaterial2 = new THREE.MeshPhongMaterial({
      color: 0x4488ff,
      transparent: true,
      opacity: 0.3,
    });
    var tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
    scene.add(tube2)
     
    scene.add(new THREE.AxesHelper(300))
         
         
         
        //小人box
        //geometryP = new THREE.CircleGeometry( 5, 32 );               
        geometryP = new THREE.SphereGeometry(5,16,16); 
        console.log('geometryP',geometryP);
        var materialP = new THREE.MeshBasicMaterial( { color: 0xff0000 ,side:THREE.DoubleSide} );
        circleP = new THREE.Mesh( geometryP, materialP );
        scene.add( circleP );
        geometryP.rotateY(Math.PI/2);
         
        circleP.position.set(-80, -40, 0);
        console.log(circleP);
         
         
         
         
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x888888);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 100; //三维场景缩放系数
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(width, height);
    // renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
     
         
         
        var progress=0;
 
        // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(render);
      // 使用加减法可以设置不同的运动方向
      // 设置纹理偏移
      texture.offset.x -= 0.06
             
            if(progress>1.0){
                return;    //停留在管道末端,否则会一直跑到起点 循环再跑
            }
            progress += 0.0009;
            console.log(progress);
            if(curve){
                let point = curve.getPoint(progress);
                if(point&&point.x){
                circleP.position.set(point.x,point.y,point.z);
                }
            }
             
    }
    render();
    var controls = new THREE.OrbitControls(camera); //创建控件对象
  </script>
</body>
 
</html>

可以看到,大致的思路就是:
1、先创建一个 var curve = new THREE.CatmullRomCurve3,在这个curve里定义几个控制点(包括起点和终点)。

2、用这个curve创建一个管道并且分段
var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
可以看出把这个管道分了100段并且不闭合。

3、创建一个球(我们的汽车), geometryP = new THREE.SphereGeometry(5,16,16); ,
circleP.position.set(-80, -40, 0);并且把球的位置设为我们curve的起点(是不是能猜出一点点了!!!)
4、没错!就是要将我们的球的位置,换成一段一段的管道的位置

            if(progress>1.0){
                return;    //停留在管道末端,否则会一直跑到起点 循环再跑
            }
            progress += 0.0009;
            console.log(progress);
            if(curve){
                let point = curve.getPoint(progress);
                if(point&&point.x){
                circleP.position.set(point.x,point.y,point.z);
                }
            }
             
    }

到这里原理就讲完了,我们就能做出这个球沿着这个管道运动的效果。
但是!!!
但是!!!
但是!!!
如果换成车,一个有头尾的形状,就会发现,在拐弯时,车头是不动的,这非常的不真实!比如:

那么该怎么办?
我也是找了很久才从一个大神的消防车的代码中找到端倪
在这里插入图片描述
代码中这样写道:

//移动汽车
WTBS.prototype.moveCar = function (carObj,pointpath,moveTime, callBack) {
    var _this = this;
    function move(index) {
→→→→→→→ carObj.lookAt(pointpath[index].end);var unittime = Math.sqrt((pointpath[index].end.x - carObj.position.x) * (pointpath[index].end.x - carObj.position.x) + (pointpath[index].end.z - carObj.position.z) * (pointpath[index].end.z - carObj.position.z)) * 2 / _this.animationParam.select_V;

有一个carObj.lookAt(pointpath[index].end);,我就在想难道物体也可以设置这个lookAt?
试了一下,果然是可以的!于是乎在我的代码中这样写道:

    if (progress > 1.0) {
        return;    //停留在管道末端,否则会一直跑到起点 循环再跑
    }
    progress += 0.0009;
    // console.log(progress);
    if (curve) {
        let point = curve.getPoint(progress);
        let point1 =curve.getPoint(progress+0.001);
        if (point && point.x) {

            circleP.position.set(point.x, point.y, point.z);
            circleP.lookAt(point1.x, point1.y, point1.z);
            // camera.position.set(point.x, point.y, point.z);
                // camera.position.set(point.x, point.y, point.z);
            // object.position.set(point.x,point.y,point.z);
        }
    }

对比之前的加了:

    let point1 =curve.getPoint(progress+0.001);
    ....
   circleP.lookAt(point1.x, point1.y, point1.z);

这两行代码,第一个是让point1感受提前拐弯,第二个就是传说中的掉转车头了!
效果如下
在这里插入图片描述
就是这样了,后面可能可能会再记录一下怎么去掉轨道,太晚了要睡觉了!

引用的两篇文章地址分别是:
1、https://www.cnblogs.com/xuejianxiyang/p/9719715.html
2、https://www.cnblogs.com/yeyunfei/p/9629405.html

版权声明:本文为qq_33069557原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33069557/article/details/106007517

智能推荐

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

猜你喜欢

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...

机器学习算法之决策树

原文:http://www.jianshu.com/p/6eecdeee5012 决策树是一种简单高效并且具有强解释性的模型,广泛应用于数据分析领域。其本质是一颗由多个判断节点组成的树,如: 决策树 在使用模型进行预测时,根据输入参数依次在各个判断节点进行判断游走,最后到叶子节点即为预测结果。 如何构造决策树 决策树算法的核心是通过对数据的学习,选定判断节点,构造一颗合适的决策树。 假设我们从用户...

Netty实现一个简单的RPC框架

微服务 微服务通讯 API构建需要考虑的因素 通讯协议 文本协议或者二进制协议 支持的调用方式:单向、双向、Streaming API定义与声明 API容错、可伸缩性 RPC框架 REST http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm REST即Representational State Transf...

04-键值对操作(pair RDD)

前言 键值对(pair RDD)是Spark的一部分,与普通RDD具有相同的特性,却又拥有不同于普通RDD的一些特性和操作。 简单来pair RDD就是以key-value形式的RDD。 1 创建pair RDD 根据文本内容,以第一个单词作为键为例: map()函数需要设置key-value参数,如该例中:key=x.split(" ")[0], value=x。 2 pai...

高二&高一&初三模拟赛17 总结

蛋糕 题目描述 输入格式 一行两个整数 n 和 P, 意义如题面所示。 输出格式 一行一个整数, 表示有多少种切法。 输入样例 【样例一输入】 6 1000000007 【样例二输入】 20 572541752 输出样例 【样例一输出】 14 【样例二输出】 266161148 题解(卡特兰数+线性筛+快速幂) 题目看上去像个dp,设f[n]为n边形的答案,选一个三角形分割,将问题划分成两边,则f...