threejs 草场足球运动视角（三）

这次要模拟的场景如下图：就是在绿草地上足球的运动，并且视角会随着足球的运动发生变化，同时整个草地的视角也会旋转。



接下来，我们就对各个元素进行分析：

1，草地

用PlaneGeometry在三维空间里创建一个平面对象，添加草场纹理，然后rotation.x在x轴方向旋转90度，营造一种立体的视角

我们用 floorMater.map.repeat.set将草皮重复，是不要让草皮太放大，看起来失真；

function addFloor() {
var floorGeom = new THREE.PlaneGeometry(100,100,20,20);
var floorMater = new THREE.MeshPhongMaterial();
floorMater.map = THREE.ImageUtils.loadTexture('http://10.1.26.29:84/assets/textures/06_DIFFUSE.jpg');
//沿着(S)x,(T)y方向允许纹理重复自己
floorMater.map.wrapS = floorMater.map.wrapT = THREE.REpeatWrapping;
//material.map.repeat.set(repeatX,repeatY);repeatX：指定在x轴方向多久重复一次。repeatY：指定在y轴方向多久重复一次。
//如果设置为1，都不会重复。 如果设置<1，纹理就会被放大。 如果设置为负数，就会产生纹理镜像。
floorMater.map.repeat.set(10,10);
var floor = new THREE.Mesh(floorGeom,floorMater);
floor.receiveShadow = true;
floor.rotation.x = -0.5 * Math.PI;
scene.add(floor);
}

2，添加横杆　

这里用的就是一个圆柱，通过旋转将其与草地几乎平行

function addRail() {
var cylinderGeometry = new THREE.CylinderGeometry(0.1, 0.1,15,50,50);
var cylinderMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
var cylinder = new THREE.Mesh(cylinderGeometry,cylinderMaterial);
cylinder.position.set(1,5,1);
cylinder.rotation.x = '15';
cylinder.rotation.y = '-57.8';
cylinder.rotation.z = '-14.85';
cylinder.name = 'cylinder';
scene.add(cylinder);
}

3，添加足球　

Three.js的光源默认不会导致物体间的投影，打开投影需要执行以下几步：

打开渲染器的地图阴影: renderer.shadowMapEnabled = true;

启用光线的投影：light.castShadow = true;

把模型设置为生成投影：mesh.castShadow = true;

把模型设置为接收阴影：mesh.receiveShadow= true;

然后为足球添加一个足球的纹理

function addSphere() {
var sphereGeometry = new THREE.SphereGeometry(0.8, 25, 25);
var sphereMaterial = new THREE.MeshBasicMaterial({specular: '#a9fcff',emissive: '#006063',shininess: 10});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(7,0.8,-1);
sphere.castShadow = true;
var texture = new THREE.ImageUtils.loadTexture("http://10.1.26.29:84/assets/football.jpg");
sphereMaterial.map = texture;
sphere.name = 'sphere';
scene.add(sphere);
}

4，render（）函数

我们为每个元素分别写了一个函数，然后在init()初始化函数中调用即可

这一节的重点就是render函数中改变camera的视角

首先我们相机的视角是以足球的位置camera.lookAt(sphere.position); 然后我们通过step改变足球的位置，camera视角就会跟着足球发生变化

然后我们为camera添加位置变化，使得camera本身位置发生旋转、

我们可以通过分别注释（1）（2）

function render() {
var sphere = scene.getObjectByName('sphere');
renderer.render(scene, camera);
camera.lookAt(sphere.position);
　　    // (1)
step += 0.02;
sphere.position.x = 0 + ( 10 * (Math.cos(step)));
sphere.position.y = 0.75 * Math.PI / 2 + ( 6.5 * Math.abs(Math.sin(step)));
sphere.rotation.z += 0.03;
　　　　//（2）
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(0.015) + z * Math.sin(0.015);
camera.position.z = z * Math.cos(0.015) - x * Math.sin(0.015);

requestAnimationFrame(render);
}

完整代码下载：github(threejs-four) 如果你觉得我写的对你有所帮助的话，请给我个star吧，谢谢