three.js

時間 2019-12-08

原文原文鏈接

threejs是webgl的一個庫,經過它咱們能夠利用大量已有的api作出很好的3d圖形.css

第一部分：html頁面框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs</title>
    <script src="cdn.bootcss.com/jquery/3.1.1/core.js"></script>
    <!-- 引入jqury簡化js複雜的操做，能夠引入，但不是必須的 -->
    <script src="cdn.bootcss.com/three.js/r83/three.js"></script>    
    <!-- 引入threejs核心庫，必須的 -->
    <style>
        body{
            margin:0;
            overflow: hidden;
        }
        /*這裏設置margin:0; 和overflow:hidden; 能夠保證移除全部的滾動條*/
    </style>
</head>
<body>
    <div class="webgl_output">
        
    </div>

    <script>
        $(function () {
            // here we run the there.js
        });
    </script>
</body>
</html>

第二部分：Three.js中的座標軸html

　　咱們要創建三位場景，那麼必定是離不開座標軸的。jquery

　　建立一個場景很是的簡單，就是var scene = new THREE.Scene(); 而建立一個座標軸就是用 var axes = new THREE.AxisHelper(); css3

　　座標軸的具體指向以下：web

　　顯然，其中xy平面即爲電腦屏幕的平面。這裏的座標軸和css3中的3d旋轉是同樣的。api

第三部分：實例解析app

　　最終效果以下：框架

源代碼以下：dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs</title>
    <!-- <script src="http://cdn.bootcss.com/jquery/3.1.1/core.js"></script> -->
    <!-- 引入jqury簡化js複雜的操做，能夠引入，但不是必須的 -->
    <script src="http://cdn.bootcss.com/three.js/r83/three.js"></script>    
    <!-- 引入threejs核心庫，必須的 -->
    <style>
        body{
            margin:0;
            overflow: hidden;
        }
        /*這裏設置margin:0; 和overflow:hidden; 能夠保證移除全部的滾動條*/
    </style>
</head>
<body>
    <div class="webgl_output">
        
    </div>

    <script>
        // $(function () {
            // here we run the there.js



// 基礎工做
            var scene = new THREE.Scene();
            // 建立一個THREE的場景，場景就是咱們最終看到的，也就是咱們描繪三維圖圖形的地方，能夠看出THREE相似一個對象，咱們使用其下的方法

            var camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,0.1,1000);
            // 建立一個相機，雖然有場景，可是看不到啊，必須指定一個相機，經過相機咱們能夠看到場景的內容。
            // 這裏的55能夠理解爲舉例，值越大，咱們看到的場景月
            var renderer = new THREE.WebGLRenderer();
            // 建立一個渲染器
            renderer.setClearColor(0x111111);
            // 注意，以前的版本是setClearColorHex，如今只有setClearColor可使用，能夠去查看源碼
            // 將scene的背景色設置爲eeeeee
            renderer.setSize(window.innerWidth,window.innerHeight);
            // 設置scene的尺寸

            //  這時，咱們就已經建立了場景（買了一塊空地）、 一個相機（經過眼睛觀察這塊地）、一個渲染器（用戶施工的工具）





// 建立一個座標軸
            var axes = new THREE.AxisHelper(30);
            // 這裏的30，即建立出的座標軸的相對長度
            // 建立一個座標軸
            scene.add(axes);
            // 把座標軸添加到場景中





// 建立一個二維平面
            var planeGeometry = new THREE.PlaneGeometry(60,25,2,1);
             // 建立一個二維的平面幾何形狀（這是身體，尚未靈魂），其寬爲60，高20，然後面兩個參數卻幾乎沒有影響,即便不要也是能夠的

            var planeMaterial = new THREE.MeshBasicMaterial({color:0xff0000});
            // 建立一個材質，顏色爲紅色，這裏即是幾何形狀的靈魂。

            var plane = new THREE.Mesh(planeGeometry,planeMaterial);
            // 使用Mesh將建立的二維平面和材質結合起來

            plane.rotation.x =-0.5*Math.PI;
            plane.rotation.y =-0.1*Math.PI;
            // 將平面沿着x軸旋轉-90度，這裏的旋轉和CSS3中的3d旋轉是同樣的。

            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;
            //肯定這個平面在座標軸的位置

            scene.add(plane);
            // 剛纔它是一個孤魂野鬼，如今將之將平面置於場景中





// 建立一個方塊
            var cubeGeometry = new THREE.CubeGeometry(4,4,4);
            // 建立一個方塊的幾何形狀
            var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00,wireframe: true});
            // 建立好一個方塊的材質
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            // 把它的形體和它的靈魂相結合，這時他就是一個完整的人

            cube.position.x = -4;
            cube.position.y = 10;
            cube.position.z = 15;
            // 一樣的，得指定它在座標系中的位置。

            scene.add(cube);
            //同上，建立好以後，它只是一個孤魂野鬼，必須把它加在這個場景中





// 建立一個球體
            var sphereGeometry = new THREE.SphereGeometry(8,20,20);
            // 建立一個球體殼

            var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe:true});
            // 建立一個球體的靈魂

            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
            // 將形體和靈魂相結合

            sphere.position.x = 20;
            sphere.position.y = 12;
            sphere.position.z = -20;
            // 指定球體的位置

            scene.add(sphere);
            //將球體放在場景中


            //  最開始咱們確實建立了一個相機，可是並無將之放在場景中，因此咱們是看不到的。
            camera.position.x = -30;
            camera.position.y = 4;
            camera.position.z = 2;
            // 這樣就肯定了其位置

            camera.lookAt(scene.position);
            // 指定觀察的方位

            var dom = document.querySelector(".webgl_output");
            dom.append(renderer.domElement);
            // renderer是一個渲染器，將渲染器獲得的dom添加到div中
            // 將camera放在場景中，這樣就能夠看到了

            renderer.render(scene,camera);



        // });
    </script>
</body>
</html>


<!-- 注意點material不要拼錯了，16進制的是0x，而不是ox -->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。