ThreeJS模拟人沿着路径运动-路径箭头使用纹理offset偏移
<!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偏移的更多相关文章
- 简单聊一聊那些svg的沿路径运动
之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...
- WPF编程，通过Path类型制作沿路径运动的动画一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...
- 探秘神奇的运动路径动画 Motion Path
CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径.本文将对 motion path 一探究竟,通过本文,你可以了解到: 什么 ...
- u3d 逐个点运动，路径运动。 U3d one by one, path motion.
u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...
- WPF编程，通过Path类型制作沿路径运动的动画另一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...
- canvas 实现光线沿不规则路径运动
canvas 实现光线沿不规则路径运动 此文章为原创,请勿转载 1.svg实现 2.canvas实现 3.坑点 svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都 ...
- js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
- JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址
在写java程序时不可避免要获取文件的路径...总结一下,遗漏的随时补上 1.可以在servlet的init方法里 String path = getServletContext().getRealP ...
- 结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...
随机推荐
- 如何使用Node爬虫利器Puppteer进行自动化测试
文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是 ...
- week 4 Vocabulary in paper
1.Using action verbs 1.1 deffenence between action verbs and fuzzy verbs Action verbs(strong verbs) ...
- C#-集合及特殊集合——★★哈希表集合★★
集合的基本信息: System.Collections命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位组数.哈希表和字典)的集合. System.Collections.Generic ...
- 课堂练习：ex 4-20
一.习题要求 • 定义一个复数类Complex. • 有相加,输出,模计算函数. • 模计算要求结果保存在第一个复数中. 二.习题内容 //complex.h # ifndef COMPLEX_H # ...
- 新手入门贴之基于 python 语言的接口自动化 demo 小实战
大家好,我是正在学习接口测试的菜鸟.近期通过自己的学习,完成了一个关于测试接口的接口自动化demo.下面想跟大家分享一下,主要的思路是根据接口文档确定测试用例,并将测试用例写在excel中.因为只是小 ...
- Linux网络编程案例分析
本代码来自于博主:辉夜星辰 本篇主要对运行代码中出现的问题进行分析,代码本身的内容后续展开讨论. 服务器端代码 /* Linux网络编程之TCP编程,服务器端读数据 socket函数之后,返回值ser ...
- Q64 最小路径和
给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], [1,5,1], ...
- Q143 重排链表
给定一个单链表 L:L0→L1→-→Ln-1→Ln , 将其重新排列后变为: L0→Ln→L1→Ln-1→L2→Ln-2→- 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例 1: ...
- 微信 oauth 登录 ，回调两次，一个坑，记录一下。
在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...
- OpenERP button 的三种类型
1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...