ThreeJS纹理偏移动画

Posted 开源编程案例

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ThreeJS纹理偏移动画相关的知识,希望对你有一定的参考价值。

ThreeJS纹理偏移动画。

<!DOCTYPE html><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'); // 设置阵列模式为 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) /** * 创建两个立方体 */ 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纹理偏移动画的主要内容,如果未能解决你的问题,请参考以下文章

threejs深究动画,纹理,control等

Threejs部分应用纹理

Threejs—BIM管道流向动态效果

为移动目标 lat/lng 和缩放级别的动画偏移地图片段的中心

Threejs 精灵火焰特效 Sprite Firey Aura effect

ThreeJS-纹理加载进度(十四)