<!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>

　　

参考:

http://www.yanhuangxueyuan.com/Three.js_course/texture.html#2

https://blog.csdn.net/ruangong1203/article/details/60477093

From:https://www.cnblogs.com/xuejianxiyang/p/9719715.html

ThreeJS模拟人沿着路径运动-路径箭头使用纹理offset偏移的更多相关文章

  1. 简单聊一聊那些svg的沿路径运动

    之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...

  2. WPF编程，通过Path类型制作沿路径运动的动画一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...

  3. 探秘神奇的运动路径动画 Motion Path

    CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径.本文将对 motion path 一探究竟,通过本文,你可以了解到: 什么 ...

  4. u3d 逐个点运动，路径运动。 U3d one by one, path motion.

    u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...

  5. WPF编程，通过Path类型制作沿路径运动的动画另一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...

  6. canvas 实现光线沿不规则路径运动

    canvas 实现光线沿不规则路径运动 此文章为原创,请勿转载 1.svg实现 2.canvas实现 3.坑点 svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都 ...

  7. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  8. JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址

    在写java程序时不可避免要获取文件的路径...总结一下,遗漏的随时补上 1.可以在servlet的init方法里 String path = getServletContext().getRealP ...

  9. 结合 CSS3 & Canvas 模拟人行走的效果

    HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

随机推荐

  1. 图的最短路径---弗洛伊德(Floyd)算法浅析

    算法介绍 和Dijkstra算法一样,Floyd算法也是为了解决寻找给定的加权图中顶点间最短路径的算法.不同的是,Floyd可以用来解决"多源最短路径"的问题. 算法思路 算法需要 ...

  2. 41.oracle索引，分析索引，索引碎片整理

    概述 索引分为B树索引和位图索引.我们主要研究B树索引,B树索引如下图(图片源自网络):

  3. poj 2796 Feel Good单调栈

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 20408   Accepted: 5632 Case T ...

  4. 本地docker镜像上传Docker Hub，并且在腾讯云上pull该镜像，最后运行成功。

    1:在docker hub 上注册一个账号(本人直接能注册,有的说不能),然后创建自己的仓库. 2:登录docker hub ( longdbdocker --hub账号,longdb --仓库名称) ...

  5. CentOS 7下安装RabbitMQ

    下载erlang:http://www.erlang.org/downloads ,otp_src_20.3.tar.gz 下载RabbitMQ: http://www.rabbitmq.com ,r ...

  6. 【软件】chrome设置默认字体

    安装stylish插件 新建样式,加入代码 * { font-family: "Microsoft YaHei", "微软雅黑" !important; }

  7. 【MPI】执行mpiexec出错

    运行mpiexec提示mpiexec_mic: cannot connect to local mpd (/tmp/mpd2.console_jzhang); possible causes: 1. ...

  8. 【es6】数组扩展

    只有一个参数,为数组中的值.

  9. Set up the environment for driver compiling in Debian

    1.check the kernel version $ uname -r --amd64 2.install the source code $ sudo apt-get install linux ...

  10. Git学习系列之Git基本操作提交项目（图文详解）

    前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...