THREE.JS（如何想場景中添加物體對象）

本文轉載自查看原文 2017-06-13 23:41 6209 3D/ 數據可視化/ three.js

這篇主要實現向模型對象中添加頭像，並組成一個矩形

一、three.js是什么?

上篇說了點TWEEN這篇又來一根THREE是不是兩兄弟啊？還真有點像，當想要做3D動畫的時候，可能會考慮用TWEEN的動畫函數。

其實THREE.JS就是實現3D效果的WEBGL的模型庫。內容涵蓋量大，目前的技術博文較少，要領會其中部分API需要一點功夫啊。

二、如何建立一個3D模型呢?

先來一個HTML代碼。看看我們需要哪些東西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background: #000;
        }
        a {
            color: #8888ff;
        }
        #info {
            position: absolute;
            width: 100%;
            color: #000000;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            z-index: 1;
        }
        .element {
            width: 100px;
            height: 100px;
            box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
            border: 1px solid rgba(127,255,255,0.25);
            text-align: center;
            cursor: default;
            border-radius: 50%;
            overflow: hidden;
        }

        .element2:hover {
            box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
            border: 1px solid rgba(127,255,255,0.75);
        }

        .element .number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 12px;
            color: rgba(127,255,255,0.75);
            display: none;
        }

        .element .symbol {
            position: absolute;
            top: 0;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 100%;
        }

        .element .details {
            position: absolute;
            bottom: 10px;
            left: 0px;
            right: 0px;
            font-size: 12px;
            color: rgba(127,255,255,0.75);
            height:15px;
            line-height:15px;
            font-size: 12px;
            font-weight: bold;
            color: rgba(255,255,255,0.75);
            text-shadow: 0 0 10px rgba(0,255,255,0.95);
            overflow: hidden;
            display: none;
        }
        #container img{
            border-radius: 0!important;
        }
        #animation{
            -webkit-animation:rollOut .5s .2s ease both;
            -moz-animation:rollOut .5s .2s ease both;
        }
        @-webkit-keyframes rollOut{
            0%{
                opacity:1;
                -webkit-transform:translateX(0px) rotate(0deg);
                left: 0px;
                top:0px;
                width: 200px;
            }

            100%{
                opacity:0;
                -webkit-transform:translateX(100%) rotate(240deg);
                left:800px;
                top:500px;
                width: 0px;
            }
        }
        @-moz-keyframes rollOut{
            0%{
                opacity:1;
                -moz-transform:translateX(0px) rotate(0deg);
                left: 0px;
                top:0px;
                width: 200px;
            }
            100%{
                opacity:0;
                -moz-transform:translateX(100%) rotate(120deg);
                left:1400px;
                top:500px;
                width: 0px;
            }
        }
    </style>
</head>
<body>
    <div id="container"></div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/three.js"></script> <script src="js/CSS3DRenderer.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/demo.js"></script> </html>

從上面看到主要引進了three.js。CSS3DRenderer.js(css3模型渲染器)。TrackballControls.js(可以理解為場景控制器吧); tween.min.js 這篇就不說了。也用不上。

var demoConfig = {
    'fakeNum': 500,       //500張頭像圖片
    'fakeUserImgTpl': "head/pic_#id#.jpg", //圖片路徑
    'fakeUserTpl': {     //對每個圖片的描述
        "id": "#id#",
        "cont": "爽歪歪",
        "name": "3D模型",
        "img": "#img#"
    }
};
var camera,scene,renderer,contols,obj;
//相機， 場景， 渲染器， 控制器， 物體對象。
var fakeUserArr = (function () {
    var arr = [], picNum = demoConfig['fakeNum'];
    var fakeUserTpl = demoConfig['fakeUserTpl'], fakeUserImgTpl = demoConfig['fakeUserImgTpl'];
    for (var i = 0; i < picNum; i++) {
        var userId = (i + 1), img = fakeUserImgTpl.replace(/#id#/gi, (i + 1));
        userId = 'fake' + userId;
        var fakeUser = $.extend({}, fakeUserTpl, {"id": userId, "img": img});
        arr.push(fakeUser);
    }
    return arr;
})();
var appendImg = function(userJson,i){
    var image = document.createElement('img');
    var element = document.createElement('div');
    var objId = 'user_' + userJson['id'];
    element.setAttribute("id", objId);
    element.className = 'element fakeuser';

    element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';

    image.className = 'symbol';
    element.appendChild(image);
    image.src = userJson['img'];

    // var object = new THREE.CSS3DSprite( element );//頭像正對鏡頭
    var object = new THREE.CSS3DObject(element);//頭像平貼平面
    object.objId = objId;

    object.position.x = Math.random() * 3000 - 2000; //隨機位置
    object.position.y = Math.random() * 3000 - 2000;
    object.position.z = Math.random() * 3000 - 2000;
    obj.add(object);
}
var width = window.innerWidth,height = window.innerHeight,doc = document;
var init = function () {
    //創建相機
    camera = new THREE.PerspectiveCamera(75, width / height, 1, 5000);
    camera.position.z = 2500;  //相機的位置
    //參數啥意思呢？
    //設置透視投影的相機,默認情況下相機的上方向為Y軸，右方向為X軸，
    // 沿着Z軸朝里（視野角：fov 縱橫比：aspect 相機離視體積最近的距離：near 相機離視體積最遠的距離：far）

    scene = new THREE.Scene();//創建場景
    obj = new THREE.Object3D(); //物體對象
    scene.add(obj);  //把物體放置到場景中

    for(var i = 0,l = fakeUserArr.length; i < l; i++ ){
        appendImg(fakeUserArr[i],i);
    }

    //創建渲染器
    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(width,height); //設置尺寸
    renderer.domElement.style.position = 'absolute'; //渲染器的style
    doc.getElementById('container').appendChild(renderer.domElement); //把渲染器添加到場景中


    //創建場景控制器
    contols = new THREE.TrackballControls(camera,renderer.domElement);
    contols.rotateSpeed = 0.5;  //旋轉速度
    contols.minDistance = 500;   //滾動滾動時的縮放距離 最大
    contols.maxDistance = 10000; // 最小

    renderer.render(scene,camera);  //把物體對象添加到渲染器中
};

init();

這樣就把頭像點放到渲染器里面去了。那怎么拼成各種圖形呢?

三、如何把像素點拼成各種圖形？

1.矩形。

其實我們仔細想如何才能把頭像拼成矩形呢？我們可以把一個矩形先畫出來，再取像素點，把位置頭像放到對應位置不就行了嗎？寫個方法把坐標點保存下來。

table = function (i) {
    var x = i / 18;
    var y = i % 18;
    var object = new THREE.Object3D();
    object.position.x = ( x * 140 ) - 1330;
    object.position.y = -( y * 180 ) + 1100;
    return object;
}

完整代碼：

/**
 * Created by Administrator on 2017/6/13.
 */
var demoConfig = {
    'fakeNum': 500,       //500張頭像圖片
    'fakeUserImgTpl': "head/pic_#id#.jpg", //圖片路徑
    'fakeUserTpl': {     //對每個圖片的描述
        "id": "#id#",
        "cont": "爽歪歪",
        "name": "3D模型",
        "img": "#img#"
    }
};
var camera,scene,renderer,contols,obj;
//相機， 場景， 渲染器， 控制器， 物體對象。
var fakeUserArr = (function () {
    var arr = [], picNum = demoConfig['fakeNum'];
    var fakeUserTpl = demoConfig['fakeUserTpl'], fakeUserImgTpl = demoConfig['fakeUserImgTpl'];
    for (var i = 0; i < picNum; i++) {
        var userId = (i + 1), img = fakeUserImgTpl.replace(/#id#/gi, (i + 1));
        userId = 'fake' + userId;
        var fakeUser = $.extend({}, fakeUserTpl, {"id": userId, "img": img});
        arr.push(fakeUser);
    }
    return arr;
})();
var appendImg = function(userJson,i){
    var image = document.createElement('img');
    var element = document.createElement('div');
    var objId = 'user_' + userJson['id'];
    element.setAttribute("id", objId);
    element.className = 'element fakeuser';

    element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';

    image.className = 'symbol';
    element.appendChild(image);
    image.src = userJson['img'];

    // var object = new THREE.CSS3DSprite( element );//頭像正對鏡頭
    var object = new THREE.CSS3DObject(element);//頭像平貼平面
    object.objId = objId;

    object.position.x = tableArr[i].position.x; //隨機位置
    object.position.y = tableArr[i].position.y;
    object.position.z = tableArr[i].position.z;
    obj.add(object);
}
table = function (i) {
    var x = i / 18;
    var y = i % 18;
    var object = new THREE.Object3D();
    object.position.x = ( x * 140 ) - 1330;
    object.position.y = -( y * 180 ) + 1100;
    return object;
}
var width = window.innerWidth,height = window.innerHeight,doc = document,tableArr = [];

for(var i = 0 ; i < 500; i++){
    tableArr.push(table(i));
}
var init = function () {
    //創建相機
    camera = new THREE.PerspectiveCamera(75, width / height, 1, 5000);
    camera.position.z = 2500;  //相機的位置
    //參數啥意思呢？
    //設置透視投影的相機,默認情況下相機的上方向為Y軸，右方向為X軸，
    // 沿着Z軸朝里（視野角：fov 縱橫比：aspect 相機離視體積最近的距離：near 相機離視體積最遠的距離：far）

    scene = new THREE.Scene();//創建場景
    obj = new THREE.Object3D(); //物體對象
    scene.add(obj);  //把物體放置到場景中

    for(var i = 0,l = fakeUserArr.length; i < l; i++ ){
        appendImg(fakeUserArr[i],i);
    }

    //創建渲染器
    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(width,height); //設置尺寸
    renderer.domElement.style.position = 'absolute'; //渲染器的style
    doc.getElementById('container').appendChild(renderer.domElement); //把渲染器添加到場景中


    //創建場景控制器
    contols = new THREE.TrackballControls(camera,renderer.domElement);
    contols.rotateSpeed = 0.5;  //旋轉速度
    contols.minDistance = 500;   //滾動滾動時的縮放距離 最大
    contols.maxDistance = 10000; // 最小

    renderer.render(scene,camera);  //把物體對象添加到渲染器中
};

init();

好，本篇到此為止。主要是講如何把像素點渲染到場景中去，下面幾篇會結合TWEEN講述動畫,以及如何生成定制LOGO。如何讓每個頭像動起來，並且停在相應的位置。

四、結束篇。

每天學習一點，堅持做同一樣事情，離老菜鳥就不遠了。還是那句話，當一個東西要入門的話，一定要敲，要寫demo，去推演，不然你永遠不知道

哪些地方埋有炸彈。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 three.js 給物體添加圖片超級容易理解的Three.js中的物體rotation three.js中物體旋轉實踐之房門的打開與關閉 three.js 之透明物體不能正常顯示 three.js添加文字 Three.js中實現場景霧化效果 Three中的動畫實現-[three.js] three.js中transformControl可以方便調節物體位置大小。關於three.js中添加文字的方式[轉] Three.js場景的基本組件