ThreeJS纹理偏移动画
Posted 开源编程案例
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ThreeJS纹理偏移动画相关的知识，希望对你有一定的参考价值。
ThreeJS纹理偏移动画。
<html lang="en"><head><meta charset="UTF-8"><title>ThreeJS纹理偏移动画</title><style>body {margin: 0;overflow: hidden;}</style><script src="/build/three.js"></script><script src="/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)]);var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);var textureLoader = new THREE.TextureLoader();var texture = textureLoader.load('run.jpg');// 设置阵列模式为 RepeatWrappingtexture.wrapS = THREE.RepeatWrappingtexture.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)/*** 创建两个立方体*/function fun() {var box = new THREE.BoxGeometry(20, 50, 30); //创建一个立方体几何对象var material = new THREE.MeshPhongMaterial({color: 0x0000ff}); //材质对象var mesh = new THREE.Mesh(box, material); //网格模型对象scene.add(mesh); //网格模型添加到场景中mesh.position.set(-80, -50, 0)var mesh2 = mesh.clone()scene.add(mesh2); //网格模型添加到场景中mesh2.position.set(80, -50, 0)}fun()scene.add(new THREE.AxesHelper(300))/*** 光源设置*///点光源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对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render);// 使用加减法可以设置不同的运动方向// 设置纹理偏移texture.offset.x -= 0.06}render();var controls = new THREE.OrbitControls(camera); //创建控件对象</script></body></html>
素材
以上是关于ThreeJS纹理偏移动画的主要内容，如果未能解决你的问题，请参考以下文章
为移动目标 lat/lng 和缩放级别的动画偏移地图片段的中心