1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>第一个three.js文件_WebGL三维场景</title> 7 <style> 8 body { 9 margin: 0; 10 overflow: hidden; //隐藏body窗口区域滚动条 11 } 12 </style> 13 <!--引入three.js三维引擎--> 14 <!-- <script src="https://my.oschina.net//u/4293620/blog/3809304/3D/example/three.min.js"></script> --> 15 <script src="https://threejs.org/build/three.js"></script> 16 <!--引入轨道控件OrbitControls.js--> 17 <script src="https://my.oschina.net//u/4293620/blog/3809304/3D/example/OrbitControls.js"></script> 18</head> 19 20<body> 21 22 <script> 23 /** 24 * 创建场景对象 25 */ 26 var scene = new THREE.Scene(); 27 /** 28 * 创建一个设置重复纹理的管道 29 */ 30 var curve = new THREE.CatmullRomCurve3([ 31 new THREE.Vector3(-80, -40, 0), 32 new THREE.Vector3(-70, 40, 0), 33 new THREE.Vector3(70, 40, 0), 34 new THREE.Vector3(80, -40, 0) 35 ],false/*是否闭合*/); 36 var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false); 37 var textureLoader = new THREE.TextureLoader(); 38 var texture = textureLoader.load('run.jpg'); 39 // 设置阵列模式为 RepeatWrapping 40 texture.wrapS = THREE.RepeatWrapping 41 texture.wrapT=THREE.RepeatWrapping 42 // 设置x方向的偏移(沿着管道路径方向)，y方向默认1 43 //等价texture.repeat= new THREE.Vector2(20,1) 44 texture.repeat.x = 20; 45 var tubeMaterial = new THREE.MeshPhongMaterial({ 46 map: texture, 47 transparent: true, 48 }); 49 var tube = new THREE.Mesh(tubeGeometry, tubeMaterial); 50 scene.add(tube) 51 /** 52 * 创建一个半透明管道 53 */ 54 var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false); 55 var tubeMaterial2 = new THREE.MeshPhongMaterial({ 56 color: 0x4488ff, 57 transparent: true, 58 opacity: 0.3, 59 }); 60 var tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2); 61 scene.add(tube2) 62 63 scene.add(new THREE.AxesHelper(300)) 64 65 66 67 //小人box 68 //geometryP = new THREE.CircleGeometry( 5, 32 ); 69 geometryP = new THREE.SphereGeometry(5,16,16); 70 console.log('geometryP',geometryP); 71 var materialP = new THREE.MeshBasicMaterial( { color: 0xff0000 ,side:THREE.DoubleSide} ); 72 circleP = new THREE.Mesh( geometryP, materialP ); 73 scene.add( circleP ); 74 geometryP.rotateY(Math.PI/2); 75 76 circleP.position.set(-80, -40, 0); 77 console.log(circleP); 78 79 80 81 82 /** 83 * 光源设置 84 */ 85 //点光源 86 var point = new THREE.PointLight(0xffffff); 87 point.position.set(400, 200, 300); //点光源位置 88 scene.add(point); //点光源添加到场景中 89 //环境光 90 var ambient = new THREE.AmbientLight(0x888888); 91 scene.add(ambient); 92 /** 93 * 相机设置 94 */ 95 var width = window.innerWidth; //窗口宽度 96 var height = window.innerHeight; //窗口高度 97 var k = width / height; //窗口宽高比 98 var s = 100; //三维场景缩放系数 99 //创建相机对象 100 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 101 camera.position.set(200, 300, 200); //设置相机位置 102 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) 103 /** 104 * 创建渲染器对象 105 */ 106 var renderer = new THREE.WebGLRenderer({ 107 antialias: true 108 }); 109 renderer.setSize(width, height); 110 // renderer.setClearColor(0xb9d3ff,1);//设置背景颜色 111 document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 112 113 114 115 var progress=0; 116 117 // 渲染函数 118 function render() { 119 renderer.render(scene, camera); //执行渲染操作 120 requestAnimationFrame(render); 121 // 使用加减法可以设置不同的运动方向 122 // 设置纹理偏移 123 texture.offset.x -= 0.06 124 125 if(progress>1.0){ 126 return; //停留在管道末端,否则会一直跑到起点 循环再跑 127 } 128 progress += 0.0009; 129 console.log(progress); 130 if(curve){ 131 let point = curve.getPoint(progress); 132 if(point&&point.x){ 133 circleP.position.set(point.x,point.y,point.z); 134 } 135 } 136 137 } 138 render(); 139 var controls = new THREE.OrbitControls(camera); //创建控件对象 140 </script> 141</body> 142 143</html>
参考:
http://www.yanhuangxueyuan.com/Three.js\_course/texture.html#2