<script type="module">
	import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
	basic3();

	// 加载纹理
	const texture = new THREE.CanvasTexture(drawTexture());
	texture.colorSpace = THREE.SRGBColorSpace;
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	texture.repeat.x = 8;
	texture.repeat.y = 2;
		
	//绘制直管道
	const path = new THREE.LineCurve3(new THREE.Vector3(-2, 1, 0), new THREE.Vector3(2, -1, 0));
	const geometry = new THREE.TubeGeometry(path, 32, 0.2, 32, false);
	const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture, side: THREE.DoubleSide });
	const mesh = new THREE.Mesh(geometry, material);
	mesh.rotateY(-Math.PI / 3);
	scene.add(mesh);

	// 纹理动画
	function animate() {
		requestAnimationFrame(animate);
		const delta = clock.getDelta();
		texture.offset.x += delta;
		renderer.render(scene, camera);
	}

	// 绘制canvas纹理
	function drawTexture () {
		const canv = document.createElement('canvas');
		canv.width = 100;
		canv.height = 100;
		canv.style.border = '1px solid gray';
		const ctx = canv.getContext('2d');
		ctx.fillStyle = 'yellow';
		ctx.fillRect(0, 0, 50, 100);
		ctx.fillStyle = 'teal';
		ctx.fillRect(50, 0, 100, 100);
		return canv;
	}

	animate();
</script>