three.js ---- 3d頁面開發入門

時間 2020-09-20

原文原文鏈接

準備工做

1.運用three.js進行3d開發，其實和頁面編程同樣，首先須要在html文件中引入three.js。Three.js使用面向對象的方式來構建程序，它包含3個基本對象：場景（scene）, 相機（camera）, 以及一個渲染器（renderer）。

第一步：引入three.js.

<!DOCTYPE html>
    <html>
        <head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
        </head>
        <body>
    <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
    <script> // 這個位置是留給後面初始化和開發3d頁面的js代碼 </script>
        </body>
    </html>

第二步：用js代碼建立3D場景（scene），很是簡單就一行代碼.

let scene = new THREE.Scene();

第三步：用js代碼建立相機（camera），再肯定其位置,下面代碼也就兩行，可是多了參數。來講明一下參數的做用：

//fov 表明視角 咱們觀察位置的視覺
    //aspect 寬高比 簡單理解爲肯定3d頁面的寬和高
    //near 最近看到 滾輪縮放的最小距離
    //far 最遠看到 滾輪縮放的最大距離
    let camera = PerspectiveCamera( fov, aspect, near, far );
    camera.position.set( x, y,z);//x:水平方向位置， y: 豎直方向位置，z:垂直屏幕方向位置

通常給下面這組值來肯定相機可以看得的位置：

let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.set( 0, 100,300 );

第四步：用js代碼建立渲染器（renderer),設置渲染頁面大小，通常爲相機肯定的3d頁面大小,最後一行是把渲染器加入頁面.

let renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild(renderer.domElement );

第五步：給3d頁面添加一個白色環境光這樣咱們纔可以看見物體：

//環境光
    let ambientLight = new THREE.AmbientLight( 0xf5f5f5);//建立光
    scene.add( ambientLight );//加入到場景

最後一步：開始時刻渲染3d頁面，雖然完成了最後一步，可是運行代碼後咱們仍是不能看見任何東西，那是由於咱們只渲染了3d頁面，並無添加事物到頁面，接下來咱們就來添加一個球吧：

function render() { 
        requestAnimationFrame( render );
        renderer.render( scene, camera );
    } 
    render();

添加個球吧,添加了下面代碼再運行下發現3d頁面上有一個紅色的球了,可是咱們不能用鼠標來控制它，那是由於three.js裏面沒有來寫鼠標的控制3d頁面，咱們還須要引入鼠標控制插件OrbitControls.js。

let ball= new THREE.SphereGeometry( 5, 32, 32 );//建立球
    let ballColor= new THREE.MeshBasicMaterial( {color: 0xffff00} );//建立材質色，用來給球上色的
    let sphere = new THREE.Mesh( ball, ballColor);//給球上色
    scene.add( sphere );//把球加入到場景

再添加格子輔助線方便咱們觀察和調整物體位置：

let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );//建立輔助線
    scene.add( grid );//加入場景

引入OrbitControls.js，而後初始化控件，在運行頁面發現能夠用鼠標來控制這個球了，就問你完不完美，beautiful 不 beautiful;

<script src="/libs/OrbitControls.js"></script>

    let controls =newTHREE.OrbitControls(camera);
    //經過.enableZoom屬性能夠控制是否容許鼠標中鍵縮放場景，.enableZoom屬性默認值true。
    controls.enableZoom =true;//容許縮放`
    controls.minDistance = 1;//可以縮放多小
    controls.maxDistance = 2000;////可以放大多大

    //經過.enableRotate屬性能夠控制是否容許鼠標左鍵旋轉場景，.enableRotate屬性默認值true。
    controls.enableRotate =true;//容許旋轉

最終代碼：運行一下，查看效果

<!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <title>demo1</title>
    </head>
    <body>
        <script src="lib/three.min.js"></script>
        <script src="lib/OrbitControls.js"></script>
        <script> // 這個位置是留給後面初始化和開發3d頁面的js代碼 let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 ); camera.position.set( 0, 50,300 );    let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement ); // 給場景添加一個環境光     let ambientLight = new THREE.AmbientLight( 0xf5f5f5); scene.add( ambientLight ); let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc ); scene.add( grid ); let ball = new THREE.SphereGeometry( 5, 32, 32 );//5:球半徑 第一個32：水平分割面的數量. 第二個32：垂直分割面的數量. let ballColor = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); let cube = new THREE.Mesh( ball , ballColor ); scene.add( cube ); let controls =new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom =true;//容許縮放 //設置相機移動距離 controls.minDistance = 1; controls.maxDistance = 2000; controls.enableRotate =true; function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); </script>
</body>
</html>