<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一個three.js文件_WebGL三維場景</title> <style> body { margin: 0; overflow: hidden; //隱藏body窗口區域滾動條 } </style> <!--引入three.js三維引擎--> <!-- <script src="./3D/example/three.min.js"></script> --> <script src="https://threejs.org/build/three.js"></script> <!--引入軌道控件OrbitControls.js--> <script src="./3D/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) ],false/*是否閉合*/); 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) scene.add(new THREE.AxesHelper(300)) //小人box //geometryP = new THREE.CircleGeometry( 5, 32 ); geometryP = new THREE.SphereGeometry(5,16,16); console.log('geometryP',geometryP); var materialP = new THREE.MeshBasicMaterial( { color: 0xff0000 ,side:THREE.DoubleSide} ); circleP = new THREE.Mesh( geometryP, materialP ); scene.add( circleP ); geometryP.rotateY(Math.PI/2); circleP.position.set(-80, -40, 0); console.log(circleP); /** * 光源設置 */ //點光源 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對象 var progress=0; // 渲染函數 function render() { renderer.render(scene, camera); //執行渲染操作 requestAnimationFrame(render); // 使用加減法可以設置不同的運動方向 // 設置紋理偏移 texture.offset.x -= 0.06 if(progress>1.0){ return; //停留在管道末端,否則會一直跑到起點 循環再跑 } progress += 0.0009; console.log(progress); if(curve){ let point = curve.getPoint(progress); if(point&&point.x){ circleP.position.set(point.x,point.y,point.z); } } } render(); var controls = new THREE.OrbitControls(camera); //創建控件對象 </script> </body> </html>
參考:
http://www.yanhuangxueyuan.com/Three.js_course/texture.html#2
https://blog.csdn.net/ruangong1203/article/details/60477093
From:https://www.cnblogs.com/xuejianxiyang/p/9719715.html