three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。Three.js 是一款運(yùn)行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機(jī)、光影、材質(zhì)等各種對象。
下載地址: http://threejs.org/
首先創(chuàng)建一個(gè)HTML文件,引入three.js引擎包.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Three.js實(shí)現(xiàn)3D空間粒子效果</title>
<style type="text/css">
body{
background-color:#000000;
margin:0px;
overflow:hidden;
}
</style>
<script src="scripts/three.js"></script>
</head>
<body >
</body>
</html>聲明全局變量
相機(jī):
OpenGL（WebGL）中、三維空間中的物體投影到二維空間的方式中，存在透視投影和正投影兩種相機(jī)。
透視投影就是、從視點(diǎn)開始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。
正投影就是不管物體和視點(diǎn)距離，都按照統(tǒng)一的大小進(jìn)行繪制、在建筑和設(shè)計(jì)等領(lǐng)域需要從各個(gè)角度來繪制物體，因此這種投影被廣泛應(yīng)用。
在 Three.js 也能夠指定透視投影和正投影兩種方式的相機(jī)。
場景:
場景就是一個(gè)三維空間。 用 [Scene] 類聲明一個(gè)叫 [scene] 的對象。
渲染器:
三維空間里的物體映射到二維平面的過程被稱為三維渲染。 一般來說我們都把進(jìn)行渲染的操作叫做渲染器。
數(shù)據(jù)初始化
相機(jī)初始化說明:
實(shí)例中使用的是透視投影. var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );
透視投影中，會(huì)把稱為視體積領(lǐng)域中的物體作成投影圖。 視體積是通過以下4個(gè)參數(shù)來指定。
視野角：fov
縱橫比：aspect
相機(jī)離視體積最近的距離：near
相機(jī)離視體積最遠(yuǎn)的距離：far
設(shè)置相機(jī)的位置:
相機(jī)的位置坐標(biāo)和視野的中心坐標(biāo)，按
方式進(jìn)行設(shè)置。 和該方式一樣，下面這樣的方法也可以
camera.position.set(100,20,50);
此外還可以設(shè)置相機(jī)的上方向,視野中心等,
設(shè)置相機(jī)的上方向?yàn)檎较?
設(shè)置相機(jī)的視野中心
利用[lookAt]方法來設(shè)置相機(jī)的視野中心。 「lookAt()」的參數(shù)是一個(gè)屬性包含中心坐標(biāo)「x」「y」「z」的對象。
「lookAt()」方法不僅是用來設(shè)置視點(diǎn)的中心坐標(biāo)、 在此之前設(shè)置的相機(jī)屬性要發(fā)生實(shí)際作用，也需要調(diào)用 [lookAt] 方法。
其他投影方式
在 Three.js 中、有各種各樣的類，用來來實(shí)現(xiàn)透視投影、正投影或者復(fù)合投影（透視投影和正投影）這樣的相機(jī)。
渲染器
創(chuàng)建CanvasRenderer對象.這是一個(gè)普通的2D畫布對象,實(shí)例中我們添加到body標(biāo)簽中. 否則我們就不會(huì)看到它。我們想讓它充滿整個(gè)瀏覽器窗口，所以我們設(shè)置其大小為window.innerwidth和window.innerheight。
鼠標(biāo)監(jiān)聽
使用自定義函數(shù)makeParticles()創(chuàng)建粒子,并為其添加mousemove偵聽器來跟蹤鼠標(biāo)的位置,最后我們建立一個(gè)間隔調(diào)用update函數(shù)一秒30次。
update函數(shù)中的定義如下:
產(chǎn)生粒子的函數(shù)
math . random()返回一個(gè)浮點(diǎn)數(shù)在0和1之間,我們乘以1000,給了我們一個(gè)0到1000之間的數(shù)字。然后我們減去500,這給了我們一個(gè)號(hào)碼在-500和500之間.我們也可以這樣定義一個(gè)生成范圍區(qū)間內(nèi)隨機(jī)值的函數(shù)
繪制粒子的函數(shù)
定義粒子移動(dòng)的函數(shù),這里設(shè)置成移動(dòng)速度隨著鼠標(biāo)距離Y軸0點(diǎn)的值越大,粒子移動(dòng)越快,
鼠標(biāo)移動(dòng)時(shí)函數(shù)監(jiān)聽
至此,空間粒子簡單效果學(xué)習(xí)完畢.
整合代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Three.js實(shí)現(xiàn)3D空間粒子效果</title>
<style type="text/css">
body{
background-color:#000000;
margin:0px;
overflow:hidden;
}
</style>
<script src="scripts/three.js"></script>
<script>
//定義應(yīng)用所需的組件:相機(jī),場景,渲染器
var camera, scene, renderer;
//跟蹤鼠標(biāo)的位置
var mouseX = 0, mouseY = 0;
//定義存儲(chǔ)粒子的數(shù)組
var particles = [];
//數(shù)據(jù)初始化
function init(){
//相機(jī)參數(shù)：
//四個(gè)參數(shù)值分別代表:視野角：fov 縱橫比：aspect 相機(jī)離視體最近的距離：near 相機(jī)離視體最遠(yuǎn)的距離：far
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
//設(shè)置相機(jī)位置,默認(rèn)位置為:0,0,0.
camera.position.z = 1000;
//聲明場景
scene = new THREE.Scene();
//將相機(jī)裝加載到場景
scene.add(camera);
//生成渲染器的對象
renderer = new THREE.CanvasRenderer();
//設(shè)置渲染器的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//追加元素
document.body.appendChild(renderer.domElement);
//調(diào)用自定義的生成粒子的方法
makeParticles();
//添加鼠標(biāo)移動(dòng)監(jiān)聽
document.addEventListener('mousemove',onMouseMove,false);
//設(shè)置間隔調(diào)用update函數(shù),間隔次數(shù)為每秒30次
setInterval(update,1000/30);
}
function update() {
//調(diào)用移動(dòng)粒子的函數(shù)
updateParticles();
//重新渲染
renderer.render( scene, camera );
}
//定義粒子生成的方法
function makeParticles(){
var particle,material;
//粒子從Z軸產(chǎn)生區(qū)間在-1000到1000
for(var zpos=-1000;zpos<1000;zpos+=20){
//we make a particle material and pass through the colour and custom particle render function we defined.
material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
//生成粒子
particle = new THREE.Particle(material);
//隨即產(chǎn)生x軸,y軸,區(qū)間值為-500-500
particle.position.x = Math.random()*1000-500; //math . random()返回一個(gè)浮點(diǎn)數(shù)在0和1之間
particle.position.y = Math.random()*1000-500;
//設(shè)置z軸
particle.position.z = zpos;
//scale it up a bit
particle.scale.x = particle.scale.y = 10;
//將產(chǎn)生的粒子添加到場景
scene.add(particle);
//將粒子位置的值保存到數(shù)組
particles.push(particle);
}
}
//定義粒子渲染器
function particleRender( context ) {
//獲取canvas上下文的引用
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360? - a full circle!
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
//設(shè)置原型填充
context.fill();
}
//移動(dòng)粒子的函數(shù)
function updateParticles(){
//遍歷每個(gè)粒子
for(var i=0; i<particles.length; i++){
particle = particles[i];
//設(shè)置粒子向前移動(dòng)的速度依賴于鼠標(biāo)在平面Y軸上的距離
particle.position.z += mouseY * 0.1;
//如果粒子Z軸位置到1000,將z軸位置設(shè)置到-1000
if(particle.position.z>1000){
particle.position.z-=2000;
}
}
}
//鼠標(biāo)移動(dòng)時(shí)調(diào)用
function onMouseMove(event){
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
</head>
<body onload="init()">
</body>
</html>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.alabama37th.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
