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吧，谢谢