基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
前言
2022年中秋佳節(jié)即將來(lái)臨,中秋節(jié)是我們國(guó)家的傳統(tǒng)節(jié)日。在民間活動(dòng)中,全國(guó)各地的老百姓通常會(huì)舉行很隆重的活動(dòng)來(lái)度過(guò)中秋節(jié),通常比較見(jiàn)的就有賞燈、賞月、吃月餅、喝桂花酒、賞桂花等活動(dòng),而每年的中秋節(jié)都是天氣比較涼爽的季節(jié),人們剛剛經(jīng)歷了酷暑,轉(zhuǎn)入梁秋。因而紛紛會(huì)選擇走出戶外,或與親朋好友一起賞月,吃著月餅,甚至喝一壺桂花酒,不僅讓彼此都放松了心情,同時(shí)增加了加強(qiáng)了家人的感情。
堅(jiān)守
不管在哪個(gè)行業(yè),不管是什么原因,總有一些人不能跟家人在一起,可能是駐守邊防的解放軍軍人,可能是在疫情中守衛(wèi)人民健康的白衣天使,可能是我們身邊城市的建設(shè)者-建筑工人,當(dāng)然還有我們IT圈的兄弟姐們們,所有各行各業(yè)奮斗在一線不能跟家人相聚的勞動(dòng)者們。大家都在為自己的夢(mèng)想或者家人的夢(mèng)想在前行。
或許,開(kāi)發(fā)的同學(xué)不能觀看中秋晚會(huì)而選擇在努力編碼;或許,產(chǎn)品的同學(xué)還是費(fèi)勁研究需求,希望這個(gè)版本能提高客戶滿意度,增加產(chǎn)品使用率;或許,測(cè)試的同學(xué)還在苦苦寫著測(cè)試用例,在重復(fù)著回歸,希望不帶著B(niǎo)UG上線。這是技術(shù)人的堅(jiān)守,或許大家都是默默無(wú)聞的人,只是千千萬(wàn)萬(wàn)個(gè)普通的勞動(dòng)者。在這里,祝福所有堅(jiān)守的勞動(dòng)者,祝福他們的家庭幸福美滿,身體健康。
技術(shù)人的快樂(lè)
1、中秋與玉兔
中秋與玉兔往往會(huì)聯(lián)系在一起,嫦娥仙子是大家都熟悉的神話故事人物,而在廣寒宮嫦娥身邊,陪著嫦娥的就是一只玉兔,所以玉兔通常也被給予了陪伴的意味。希望大家都可以多陪陪家人,老人。
2、3D玉兔
下面使用Threejs繪制一只靈活的3D玉兔,話不多說(shuō),下面進(jìn)入正題
3、環(huán)境說(shuō)明
需要準(zhǔn)備Jquery.js Threejs OBJLoader.js
4、創(chuàng)建一個(gè)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)場(chǎng)景、相機(jī)等參數(shù)
場(chǎng)景和相機(jī)是Threejs里面非常重要的對(duì)象,想要展示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來(lái)加載玉兔的模型,并在玉兔中心增加一只可愛(ài)的兔子,關(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實(shí)現(xiàn)3D玉兔效果的示例代碼的文章就介紹到這了,更多相關(guān)Three.js 3D玉兔內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁(yè)面
- javascript實(shí)現(xiàn)移動(dòng)端紅包雨頁(yè)面
- js+css實(shí)現(xiàn)紅包雨效果
- JavaScript+Canvas模擬實(shí)現(xiàn)支付寶畫年兔游戲
- 基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
- JavaScript?Canvas實(shí)現(xiàn)兼容IE的兔子發(fā)射爆破動(dòng)圖特效
- 利用JavaScript制作一個(gè)搞怪的兔子動(dòng)畫效果
- 利用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器
- JS技巧動(dòng)手實(shí)現(xiàn)紅包兔子雨效果示例詳解
相關(guān)文章
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時(shí)常被普通函數(shù)的冗長(zhǎng)寫法所困擾,每次都需要寫function關(guān)鍵字,有時(shí)候還要明確地寫return語(yǔ)句,下面我們就來(lái)看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項(xiàng)卡效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-05-05深入淺析JavaScript函數(shù)前面的加號(hào)和嘆號(hào)
這篇文章主要介紹了深入淺析JavaScript函數(shù)前面的加號(hào)和嘆號(hào)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JavaScript 日期時(shí)間選擇器一些小結(jié)
flatpickr 是一個(gè)輕量級(jí)、注重精益、由 UX 驅(qū)動(dòng)和可擴(kuò)展的 JavaScript 日期時(shí)間選擇器。這篇文章主要介紹了JavaScript 日期時(shí)間選擇器,需要的朋友可以參考下2018-04-04JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法,詳細(xì)分析了碰撞運(yùn)動(dòng)的原理及相應(yīng)的javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法
這篇文章主要介紹了js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法,通過(guò)JavaScript的navigator.userAgent相關(guān)屬性判斷訪問(wèn)端的系統(tǒng)類型,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-02-02fix-ie5.js擴(kuò)展在IE5下不能使用的幾個(gè)方法
fix-ie5.js擴(kuò)展在IE5下不能使用的幾個(gè)方法...2007-08-08最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12