threejs創建一個流動的水管效果(通過材質的移動實現)

/**
 * 創建一個設置重複紋理的管道
 */
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.9, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('images/top.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 mesh = new THREE.Mesh(tubeGeometry, tubeMaterial); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中


var animate = function () {
		requestAnimationFrame( animate );
		controls.update();
		renderer.render( scene, camera );
		texture.offset.x -= 0.06
	};
	animate();

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章