<!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. SpringQuartz定时任务cronExpression配置

    <!-- 每一个小时跑一次--> <property name="cronExpression"> <value>0 0 0/1 * * ?&l ...

  2. linux克隆后修配置

    第一步:克隆 第二步:vi /etc/sysconfig/network-scripts/ifcfg-eth0   编辑 DEVICE=eth0 TYPE=Ethernet ONBOOT=yes NM ...

  3. Python 全栈开发：str（字符串）索引和切片

    str(字符串)索引和切片 str(字符串)索引: #计算机中大部分索引以0为开始 s = 'mylovepython' s1 = s[0] s2 = s[4] s3 = s[-1] print(s1 ...

  4. html5: 复制到剪贴板 clipboard.js

    1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...

  5. 思科 ISR路由器登录内置交换模块的方式

    ISR2900/3900系列 登录:Router#service-module gigabitethernet1/0 session 退出: control+shift+6 x disconnect ...

  6. underscore相关记录

    为什么使用void 0代替undefined? 在很多框架的源码以及webpack打包出来的bundle.js中,我们都可以看到void 0的身影,如下: function generateRando ...

  7. [问题解决]Fresco设置圆角效果不生效问题探究

    [问题解决]Fresco设置圆角效果不生效问题探究 /** * Created by diql on 2017/2/21 11:07:04. */ 问题 在View中设置: fresco:rounde ...

  8. JavaScript数据结构-6.优先队列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Tomcat开发Comet要点

    Comet技术的悄然流行,Jetty在比较早地支持了Comet,提供了Comet 的Servlet,同样从Tomcat6开始,Comet已经在Tomcat的标准Servlet中开始支持了,这是个好事情 ...

  10. svn 改英文