Three.js入門之helloworld以及如何繪制線-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)建站主營定襄網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),定襄h5小程序制作搭建,定襄網(wǎng)站營銷推廣歡迎定襄等地區(qū)企業(yè)咨詢

本文屬于學習Three.js 的入門教程，文中通過示例介紹了hello world和線的實現(xiàn)，下面話不多說了，來一起看看詳細的介紹吧。

hello world

首先使用我們先用three.js創(chuàng)建一個立方體的hello world類型的案例。

<!doctype html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title> 
 <script src="build/three.js"></script> 
 <style> 
 body{margin:0;} 
 canvas{width: 100%; height:100%; display: block;} 
 </style> 
</head> 
<body> 
<script> 
 //創(chuàng)建場景 
 var scene = new THREE.Scene(); 
 //設置相機（視野，顯示口的寬高比，近裁剪面，遠裁剪面） 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //設置渲染器的高度和寬度，如果加上第三個值 false，則按場景大小顯示，等比例縮放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //將渲染器添加到html當中 
 document.body.appendChild( renderer.domElement ); 
 
 //盒子模型（BoxGeometry），這是一個包含立方體所有頂點和填充面的對象。 
 var geometry = new THREE.BoxGeometry( 1, 2, 1 ); 
 //使用網(wǎng)孔基礎材料（MeshBasicMaterial）進行著色器，這里只繪制了一個綠色 
 var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } ); 
 //使用網(wǎng)孔(Mesh)來承載幾何模型 
 var cube = new THREE.Mesh( geometry, material ); 
 //將模型添加到場景當中 
 scene.add( cube ); 
 //將相機沿z軸偏移5 
 camera.position.z = 5; 
 
 //設置一個動畫函數(shù) 
 var animate = function () { 
 //一秒鐘調(diào)用60次，也就是以每秒60幀的頻率來繪制場景。 
 requestAnimationFrame( animate ); 
 
 //console.log(cube.rotation); 
 //每次調(diào)用模型的沿xy軸旋轉(zhuǎn)0.01 
 cube.rotation.x += 0.01; 
 cube.rotation.y += 0.01; 
 //使用渲染器把場景和相機都渲染出來 
 renderer.render(scene, camera); 
 }; 
 
 animate(); 
</script> 
</body> 
</html>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁題目：Three.js入門之helloworld以及如何繪制線-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://muchs.cn/article16/cddodg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、做網(wǎng)站、網(wǎng)站收錄、軟件開發(fā)、手機網(wǎng)站建設、移動網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容