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 模拟人行走的 ...
随机推荐
- CentOS 7 安装方式汇总
U盘安装 通过U盘安装 CentOS 的过程和安装Windows非常相似,首先将 CentOS 镜像文件刻录到U盘(或者光盘),设置固件(BIOS或者UEFI)从U盘启动,然后逐步设置即可. 使用 V ...
- windows 下加载执行hta文件的方法
首先编写这么一个hta的文件: <html> <head> <script> s = new ActiveXObject("WScript.Shell&q ...
- springcloud(七)-Feign声明式REST调用
前言 前面我们使用的RestTemplate实现REST API调用,代码大致如下: public User findById(@PathVariable Long id) { return rest ...
- server端获得到client端的IP地址的格式
使用telnet,ping或其他client连接server端时,server端获得的client端的ip地址取决于client端使用的时ipv4还是ipv6地址. 例: client IPv4地址: ...
- docker仓库harbor镜像列表获取命令
2019-03-14 搭建好docker仓库harbor之后,在服务器上获取harbor的所有镜像列表命令 curl -u "harbor账号:密码" -X GET -H &quo ...
- excel 快速填充所有非连续空白单元格
工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法. 工具/原料 EXCEL 方法/步骤 首先选中你要填充的区域, 按“F5"或者 Ctrl + ...
- mono修改代码模板
新建android application是在这里修改模板D:\prostu\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplatesCach ...
- CentOS 7进入救援模式的方法
CentOS 7版本进入救援模式并修改密码:方法1: runlevel 显示当前的运行级别(进入救援模式需要进入单用户模式) 方法2: ①.开机时随便按下键盘,进入系统选择菜单 ②.选择第一项,按e键 ...
- 爱奇艺视频显示列表CSS实现
css: body{margin:0;font-size: 12px;font-family: "宋体":} ul{margin:0;padding:0;list-style: n ...
- WPF自定义Button样式(按钮长度随Content长度自适应)
代码如下: <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property= ...