threejs 草場足球運動視角（三） - hsprout－IT工程師數位筆記本

文章出處

這次要模擬的場景如下圖：就是在綠草地上足球的運動，并且視角會隨著足球的運動發生變化，同時整個草地的視角也會旋轉。

接下來，我們就對各個元素進行分析：

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

文章列表