<!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. 分析解决Java运行时异常

            1 ,基础知识    http://my.oschina.net/u/140462/blog/421128    JVM运行时内存结构          2 ,相关命令    http ...

  2. 考试题 T1

    题意分析 就是让你求 \[\sum_{i=1}^{|S|}val[i][gcd(a[i],x)=y]\] 那么接下来就是化简式子 \[\sum_{i=1}^{|S|}val[i][gcd(\frac{ ...

  3. Swift中的Weak Strong Dance

    亲爱的博客园的关注着博主文章的朋友们告诉你们一个很不幸的消息哦, 这篇文章将会是博主在博客园发表的最后一篇文章咯, 因为之后的文章博主只会发布到这里哦 http://daiweilai.github. ...

  4. 半年的iOS代码生活

    半年的iOS代码生活 在高考大军中拼杀过,也在大学校园中荒芜过,曾经低迷消沉,也常满怀壮志…… 但是最多的还是被称为小伙子以及自称为iOS工程师!博主就是这种喜闻乐见的这类人,实习一年后在2015年的 ...

  5. 1.需要对txt存放的测试数据做去重处理，代码如下

    采用集合去重,在新文件里逐行写入,达成目的 old_file = "D:/testdata/memberId.txt" #old result_file = "D:/te ...

  6. mysql工具——使用mysqlshow查看mysql对象信息，查看mysql表大小

    关键词:查看表大小,mysqlshow mysqlshow --count -uroot -p test

  7. Oracle数据库学习（三）：Oracle数据库的环境配置与安装

    1.解压oracle安装包 将oracle的安装包和补丁包都存放在/home/oracle/soft目录下,然后对其进行解压,建议以root权限进行解压. unzip p13390677_112040 ...

  8. main:处理命令行选项

    有时我们需要给main函数传递实参, 我们可以把命令行选项通过两个形参传递给main函数: int mian(int argc, char *argv[]) { ... }; argv是argumen ...

  9. Python turtle库学习笔记

    1.简介 Python的turtle库的易操作,对初学者十分友好.对于初学者来说,刚学编程没多久可以写出许多有趣的可视化东西,这是对学习编程极大的鼓舞,可以树立对编程学习的信心.当然turtle本身也 ...

  10. 思维题--code forces round# 551 div.2

    思维题--code forces round# 551 div.2 题目 D. Serval and Rooted Tree time limit per test 2 seconds memory ...