three.js-走進3d的奇妙世界一創建一個三維場景

 

一、git代碼倉庫地址

　　git clone https://github.com/josdirksen/learning-threejs-third  下載並解壓

二、創建一個三維場景

　　如下圖所示是一個三維場景，包括了一個幾何體，球，平面，坐標系等等。

　　

　　那么這些東西究竟是怎么實現呢，在未了解three.js之前，我也一直對這些東西感到疑惑。今天就帶大家一起走進3d的奇妙世界。

　　大家都知道在現實生活中，我們能看到或者感覺到陽光，雨水，高山，風等等，那么在3d的世界中這么東西都是以怎么樣子構建的呢。

　　在three中存在了幾個重要的東西用來實現對現實生活中的模擬。

　　　　1.camera(相機)：他就像人的眼睛一樣，用來觀察一切事物，沒有他我們就什么都看不見。當然他也有許多屬性，譬如相機的位置，觀看的方向，相機的旋轉角度（可以想象一下你拿相機照相的情形）

　　　　2.scene(場景)：可以想象成一個真實的世界，如果沒有了世界，那其他也就什么都沒有了

　　　　3.renderer(渲染器)：渲染器會基於攝像機的角度來計算場景對象在瀏覽器中渲染成什么樣子

　　　　

// 創建場景
 var scene = new THREE.Scene();
  // 創建相機 接收四個參數fov aspect near  far
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));  //將場景的背景顏色設置為黑色
renderer.setSize(1000,400); //設置場景的大小
renderer.shadowMap.enabled = true; //渲染陰影，后面有提到
document.getElementById("demo").appendChild(renderer.domElement); // 要渲染的div 
renderer.render(scene ,camera )

　　

　

　　下面解釋如何在剛剛建好的環境中添加三維對象

　　首先我們創建一個坐標系，便於直觀的看出三維模型，這里的坐標系使用的右手坐標系。可以拿出右手體會下。

　　

// 添加坐標軸 線寬為20
 var axes = new THREE.AxesHelper(20)
//並把坐標系添加到場景中
  scene.add(axes)

　　現在場景中有了一個三維對象，就如現實世界中有了事物，有了眼睛。但是我們站在哪里，以什么角度去看呢，這就需要設置攝像機的位置，觀看的角度

　　

// 相機位置
camera.position.set(-30, 40, 30);
 // 相機看的方向 為場景的方向也可以設置成其他方向
camera.lookAt(scene.position);

　我們繼續分別添加一個平面、球型和正方體

// 創建平面
//  創建平面的大小
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
// 創建平面的材質MeshLambertMaterial
var planeMaterial = new THREE.MeshLambertMaterial({
    color:0xffffff
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true; //平面是否接受投影
plane.position.set(15, 0, 0);  //平面的位置
plane.rotation.x = -0.5 * Math.PI; //平面繞x軸旋轉90度

scene.add(plane);

　　

// 添加立方體長寬高   4 4 4
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
         color: 0xFF0000,
          wireframe: true
});
 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.position.set(-4, 4, 0);
cube.castShadow = true; //是否投影
scene.add(cube);

　　

 //創建球體
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
 var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777FF,
         wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 0, 0);
sphere.castShadow = true;
scene.add(sphere);

　　最后添加光源，此外在需要在rendrer中渲染陰影

 // 添加光源
 var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight);

　

function init(){
            // 創建場景
            var scene = new THREE.Scene();
            // 創建相機 接收四個參數fov aspect near  far
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(new THREE.Color(0x000000));  //將場景的背景顏色設置為黑色
            renderer.setSize(1000,400);
            renderer.shadowMap.enabled = true;
            // 添加坐標軸
            var axes = new THREE.AxesHelper(20)
             scene.add(axes)
            // 創建平面
            //  創建平面的大小
            var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
            // 創建平面的材質
            var planeMaterial = new THREE.MeshLambertMaterial({
                color:0xffffff
            });
            var plane = new THREE.Mesh(planeGeometry,planeMaterial);
            plane.receiveShadow = true;
            plane.position.set(15, 0, 0);
            plane.rotation.x = -0.5 * Math.PI;

            scene.add(plane);
            // 添加立方體
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xFF0000,
                wireframe: true
            });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
            cube.position.set(-4, 4, 0);
            cube.castShadow = true;
            scene.add(cube);
            //創建球體
            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({
                color: 0x7777FF,
                wireframe: true
            });
            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.position.set(20, 0, 0);
            sphere.castShadow = true;
            scene.add(sphere);
            // 相機位置
            camera.position.set(-30, 40, 30);
            // 相機看的方向
            camera.lookAt(scene.position);
            // 添加光源
            var ambienLight = new THREE.AmbientLight(0x353535);
            scene.add(ambienLight);

            var spotLight = new THREE.SpotLight(0xFFFFFF);
            spotLight.position.set(-10, 20, -5);
            spotLight.castShadow = true;
            scene.add(spotLight);

            document.getElementById("webgl-output").appendChild(renderer.domElement);
　　　　　　　　
            var step = 0;
            renderScene();
            function renderScene(){
                // stats.update();
                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
                cube.rotation.z += 0.02;
                step += 0.04;
                sphere.position.x = 20 + (10 * (Math.cos(step)));
                sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);
            }
        }