2019-9-26 seo達(dá)人
three.js 的簡(jiǎn)單實(shí)例
三大主件: 渲染器、場(chǎng)景、相機(jī)
思想核心: 相機(jī)獲取到場(chǎng)景內(nèi)顯示的內(nèi)容, 然后再通過(guò)渲染器渲染到畫(huà)布上面
渲染器: 實(shí)例化渲染器的同時(shí)生成的一個(gè) Canvas 畫(huà)布, 之后將這個(gè)畫(huà)布添加到了 DOM 當(dāng)中
場(chǎng)景: 場(chǎng)景只是一個(gè)容器, 顯示的內(nèi)容需要進(jìn)行添加, 添加一個(gè)內(nèi)容稱(chēng)作一個(gè)網(wǎng)格, 每個(gè)網(wǎng)格基本上包括幾何體和材質(zhì), 網(wǎng)格也稱(chēng)之為模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script>
//聲明一些全局變量
var renderer, camera, scene, geometry, material, mesh, stats, rotate = true;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //實(shí)例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置寬和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化場(chǎng)景
function initScene() {
scene = new THREE.Scene(); //實(shí)例化場(chǎng)景
}
//初始化相機(jī)
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實(shí)例化相機(jī)
camera.position.set(0, 0, 15); //初始化的坐標(biāo)
}
//創(chuàng)建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2); //創(chuàng)建幾何體
material = new THREE.MeshNormalMaterial(); //創(chuàng)建材質(zhì)
mesh = new THREE.Mesh(geometry, material); //創(chuàng)建網(wǎng)格
scene.add(mesh); //將網(wǎng)格添加到場(chǎng)景
}
//運(yùn)行動(dòng)畫(huà)
function animate() {
requestAnimationFrame(animate); //循環(huán)調(diào)用函數(shù)
//判斷是否可以旋轉(zhuǎn)
if(rotate) {
mesh.rotation.x += 0.01; //每幀網(wǎng)格模型的沿x軸旋轉(zhuǎn)0.01弧度
mesh.rotation.y += 0.02; //每幀網(wǎng)格模型的沿y軸旋轉(zhuǎn)0.02弧度
}
stats.update(); //更新性能檢測(cè)框
renderer.render(scene, camera); //渲染界面
}
//性能檢測(cè)框
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//創(chuàng)建調(diào)試框
function initGui() {
//控制參數(shù)初始值
controls = {
positionX: 0,
positionY: 0,
positionZ: 0,
rotate: true
};
gui = new dat.GUI(); //實(shí)例化對(duì)象
gui.add(controls, "positionX", -10, 10).onChange(updatePosition);
gui.add(controls, "positionY", -5, 5).onChange(updatePosition);
gui.add(controls, "positionZ", -10, 10).onChange(updatePosition);
function updatePosition() {
mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
}
gui.add(controls, "rotate").name("旋轉(zhuǎn)").onChange(function(e) {
rotate = e;
});
}
//初始化函數(shù)，頁(yè)面加載完成是調(diào)用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
initStats();
initGui();
animate();
}
</script>
</body>
</html>
藍(lán)藍(lán)設(shè)計(jì)( www.lapeinture.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn