快捷導(dǎo)航

基于Three.js實現(xiàn)3D玉兔效果的示例代碼

更新時間：2022年08月30日 08:35:45 作者：yelangking1

2022年中秋佳節(jié)即將來臨，中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會聯(lián)系在一起，本文將用Threejs做一只會動的3D玉兔，感興趣的可以了解一下

前言

2022年中秋佳節(jié)即將來臨，中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。在民間活動中，全國各地的老百姓通常會舉行很隆重的活動來度過中秋節(jié)，通常比較見的就有賞燈、賞月、吃月餅、喝桂花酒、賞桂花等活動，而每年的中秋節(jié)都是天氣比較涼爽的季節(jié)，人們剛剛經(jīng)歷了酷暑，轉(zhuǎn)入梁秋。因而紛紛會選擇走出戶外，或與親朋好友一起賞月，吃著月餅，甚至喝一壺桂花酒，不僅讓彼此都放松了心情，同時增加了加強了家人的感情。

堅守

不管在哪個行業(yè)，不管是什么原因，總有一些人不能跟家人在一起，可能是駐守邊防的解放軍軍人，可能是在疫情中守衛(wèi)人民健康的白衣天使，可能是我們身邊城市的建設(shè)者-建筑工人，當(dāng)然還有我們IT圈的兄弟姐們們，所有各行各業(yè)奮斗在一線不能跟家人相聚的勞動者們。大家都在為自己的夢想或者家人的夢想在前行。

或許，開發(fā)的同學(xué)不能觀看中秋晚會而選擇在努力編碼；或許，產(chǎn)品的同學(xué)還是費勁研究需求，希望這個版本能提高客戶滿意度，增加產(chǎn)品使用率；或許，測試的同學(xué)還在苦苦寫著測試用例，在重復(fù)著回歸，希望不帶著BUG上線。這是技術(shù)人的堅守，或許大家都是默默無聞的人，只是千千萬萬個普通的勞動者。在這里，祝福所有堅守的勞動者，祝福他們的家庭幸福美滿，身體健康。

技術(shù)人的快樂

1、中秋與玉兔

中秋與玉兔往往會聯(lián)系在一起，嫦娥仙子是大家都熟悉的神話故事人物，而在廣寒宮嫦娥身邊，陪著嫦娥的就是一只玉兔，所以玉兔通常也被給予了陪伴的意味。希望大家都可以多陪陪家人，老人。

2、3D玉兔

下面使用Threejs繪制一只靈活的3D玉兔，話不多說，下面進(jìn)入正題

3、環(huán)境說明

需要準(zhǔn)備Jquery.js Threejs OBJLoader.js

4、創(chuàng)建一個html

新建index.html，在index.html中引入相應(yīng)的javascript資源。如下代碼所示：

<script src="jquery-1.11.1.min.js"></script>
<script src="TweenMax.min.js"></script>
<script src="three.80.min.js"></script>
<script src="OBJLoader.js"></script>

5、定義Threejs的相關(guān)場景、相機等參數(shù)

場景和相機是Threejs里面非常重要的對象，想要展示3D效果，這些組件必不可少。

   var camera, scene, renderer, mouse, stats, geometry, shaderMaterial, mesh, clock;
    var isLoop;
 
    var objLoader;
 
    var targetArr = [];
    var particles = [];
    var positionAttribute;
    var MAX_COUNT = 60000;
    var time = 0;
 
    var utils = {
      range : function(min, max){
        return min + (max -min) * Math.random();
      }
    }
 
function init(group){
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 1000);
        // camera.position.z = 1.2;
        // camera.position.y = 0.5;
        camera.position.z = 20;
        camera.position.y = 20;
        camera.lookAt(new THREE.Vector3())
 
        scene = new THREE.Scene();
 
        /*
         mesh = group.children[0];
         console.log(mesh.geometry);
         mesh.material = new THREE.MeshBasicMaterial({wireframe: true, color : 0xffff00})
         mesh.scale.set(10, 10, 10);
         mesh.position.y = -1;
         scene.add(group); */
 
         mesh = group.children[0];
         console.log(mesh.geometry);
         mesh.material = new THREE.MeshBasicMaterial({wireframe: true, color : 0xffff00})
         mesh.scale.set(120, 120, 120);
         mesh.position.y = -15;
 
         scene.add(group);
 
 
            // line material
        var material = new THREE.LineBasicMaterial({
                color: new THREE.Color("rgb(" + parseInt(0.2 * 255) + ", " + parseInt(0.3 * 255) + "," + parseInt(0.4 * 255) + ")"),
                blending: THREE.AdditiveBlending,
                depthTest: false,
                transparent: true,
                opacity: 0.8
            });
 
 
        var indices = [];
 
        var positions = new Float32Array(MAX_COUNT * 3);
        var geometry = group.children[0].geometry;
        var positionArr = geometry.attributes.position.array;
        var positionCount = positionArr.length / 3;
        var scale = 180;
        var size = 0.1;
 
        for(var ii = 0; ii < positionCount; ii++){
            var pos = new THREE.Vector3(positionArr[3 * ii] * scale, positionArr[3 * ii + 1] * scale, positionArr[3 * ii + 2] * scale);
 
            targetArr.push(pos);
        }
 
        for(var ii = 0; ii < MAX_COUNT / 2; ii++){
            var index = parseInt(targetArr.length * Math.random());
            var pos = targetArr[index];
 
            particles[ii] = new Particle(pos.x, pos.y, pos.z, ii, index);
          
            if( Math.random() < 0.9){
              particles[ii].updateTarget(true);
            }
            
 
            positions[6 * ii] = pos.x;
            positions[6 * ii + 1] = pos.y;
            positions[6 * ii + 2] = pos.z;
 
            positions[6 * ii + 3] = pos.x + utils.range(-size, size);
            positions[6 * ii + 4] = pos.y + utils.range(-size, size);
            positions[6 * ii + 5] = pos.z + utils.range(-size, size);
        }
 
        for(var ii = 0; ii < MAX_COUNT / 2; ii++){
            indices.push(2 * ii);
            indices.push(2 * ii + 1);
        }
 
        var geometry = new THREE.BufferGeometry();
        positionAttribute = new THREE.BufferAttribute(positions, 3)
        geometry.addAttribute('position', positionAttribute);
        geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));
 
        var line = new THREE.LineSegments(geometry, material);
        line.position.set(5, -15, 0);
        scene.add(line);
 
 
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000);
 
        clock = new THREE.Clock();
 
        document.body.appendChild(renderer.domElement);
        document.addEventListener('mousemove', onDocumentMouseMove, false);
    }

6、定義玉兔并設(shè)置大小

我們工作ObjLoaderjs來加載玉兔的模型，并在玉兔中心增加一只可愛的兔子，關(guān)鍵代碼如下：

objLoader = new THREE.OBJLoader();
objLoader.load("bunny.obj", onLoadObj);
 
var indices = [];
 
var positions = new Float32Array(MAX_COUNT * 3);
var geometry = group.children[0].geometry;
var positionArr = geometry.attributes.position.array;
var positionCount = positionArr.length / 3;
var scale = 180;
var size = 0.1;
 
for(var ii = 0; ii < positionCount; ii++){
    var pos = new THREE.Vector3(positionArr[3 * ii] * scale, positionArr[3 * ii + 1] * scale, positionArr[3 * ii + 2] * scale);
 
    targetArr.push(pos);
}