基于Three.js實現(xiàn)3D玉兔效果的示例代碼
前言
2022年中秋佳節(jié)即將來臨,中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。在民間活動中,全國各地的老百姓通常會舉行很隆重的活動來度過中秋節(jié),通常比較見的就有賞燈、賞月、吃月餅、喝桂花酒、賞桂花等活動,而每年的中秋節(jié)都是天氣比較涼爽的季節(jié),人們剛剛經(jīng)歷了酷暑,轉(zhuǎn)入梁秋。因而紛紛會選擇走出戶外,或與親朋好友一起賞月,吃著月餅,甚至喝一壺桂花酒,不僅讓彼此都放松了心情,同時增加了加強(qiáng)了家人的感情。
堅守
不管在哪個行業(yè),不管是什么原因,總有一些人不能跟家人在一起,可能是駐守邊防的解放軍軍人,可能是在疫情中守衛(wèi)人民健康的白衣天使,可能是我們身邊城市的建設(shè)者-建筑工人,當(dāng)然還有我們IT圈的兄弟姐們們,所有各行各業(yè)奮斗在一線不能跟家人相聚的勞動者們。大家都在為自己的夢想或者家人的夢想在前行。
或許,開發(fā)的同學(xué)不能觀看中秋晚會而選擇在努力編碼;或許,產(chǎn)品的同學(xué)還是費(fèi)勁研究需求,希望這個版本能提高客戶滿意度,增加產(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)場景、相機(jī)等參數(shù)
場景和相機(jī)是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); }
7、最終效果
到此這篇關(guān)于基于Three.js實現(xiàn)3D玉兔效果的示例代碼的文章就介紹到這了,更多相關(guān)Three.js 3D玉兔內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用箭頭函數(shù)實現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11javascript css紅色經(jīng)典選項卡效果實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下2016-05-05Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02fix-ie5.js擴(kuò)展在IE5下不能使用的幾個方法
fix-ie5.js擴(kuò)展在IE5下不能使用的幾個方法...2007-08-08最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12