<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個(gè)three.js文件_WebGL三維場(chǎng)景</title>
<style>
body {
margin: 0;
overflow: hidden; //隱藏body窗口區(qū)域滾動(dòng)條
}
</style>
<!--引入three.js三維引擎-->
<!-- <script src="http://www./3D/example/three.min.js"></script> -->
<script src="https:///build/three.js"></script>
<!--引入軌道控件OrbitControls.js-->
<script src="http://www./3D/example/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 創(chuàng)建場(chǎng)景對(duì)象
*/
var scene = new THREE.Scene();
/**
* 創(chuàng)建一個(gè)設(shè)置重復(fù)紋理的管道
*/
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');
// 設(shè)置陣列模式為 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT=THREE.RepeatWrapping
// 設(shè)置x方向的偏移(沿著管道路徑方向)，y方向默認(rèn)1
//等價(jià)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)
/**
* 創(chuàng)建一個(gè)半透明管道
*/
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);
/**
* 光源設(shè)置
*/
//點(diǎn)光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點(diǎn)光源位置
scene.add(point); //點(diǎn)光源添加到場(chǎng)景中
//環(huán)境光
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);
/**
* 相機(jī)設(shè)置
*/
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 100; //三維場(chǎng)景縮放系數(shù)
//創(chuàng)建相機(jī)對(duì)象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設(shè)置相機(jī)位置
camera.lookAt(scene.position); //設(shè)置相機(jī)方向(指向的場(chǎng)景對(duì)象)
/**
* 創(chuàng)建渲染器對(duì)象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
// renderer.setClearColor(0xb9d3ff,1);//設(shè)置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對(duì)象
var progress=0;
// 渲染函數(shù)
function render() {
renderer.render(scene, camera); //執(zhí)行渲染操作
requestAnimationFrame(render);
// 使用加減法可以設(shè)置不同的運(yùn)動(dòng)方向
// 設(shè)置紋理偏移
texture.offset.x -= 0.06
if(progress>1.0){
return; //停留在管道末端,否則會(huì)一直跑到起點(diǎn) 循環(huán)再跑
}
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); //創(chuàng)建控件對(duì)象
</script>
</body>
</html>
?
?
?參考:http://www./Three.js_course/texture.html#2
?
From:https://www.cnblogs.com/xuejianxiyang/p/9719715.html 來源：http://www./content-4-28091.html
|
