three.js實(shí)現(xiàn)圓柱體
更新時(shí)間：2018年12月30日 11:10:29 作者：你比誰都明白
這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)圓柱體的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了three.js繪制圓柱體的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓柱體</title>
<style>
#canvas{
width:1100px;
height:600px;
border:1px solid;
}
</style>
<script type="text/javascript" src="js/three.js"></script>
<script>
// 渲染器
var renderer;
function init_renderer(){
width = document.getElementById("canvas").clientWidth;
height = document.getElementById("canvas").clientHeight;
renderer = new THREE.WebGLRenderer({ //生成渲染對(duì)象
antialias : true //去鋸齒
});
renderer.setSize(width,height);//設(shè)置渲染的寬度和高度；
document.getElementById("canvas").appendChild(renderer.domElement);
renderer.setClearColor(0xEEEEEE,1);//設(shè)置渲染的顏色；
}
// 場(chǎng)景
var scene;
function init_scene(){
scene = new THREE.Scene();
}
// 圓柱體
var cylinder;
function init_cylinder(){
var cylinder = new THREE.CylinderGeometry(80,50,300,50,50);
var texture = THREE.ImageUtils.loadTexture("textures/2.jpg",null,function(t)//圖片地址可使用本地,同根目錄下文件夾即可
{
});
var material = new THREE.MeshLambertMaterial({map:texture}); //材料
cube = new THREE.Mesh(cylinder,material);
cube.position.set(0,0,5); //設(shè)置幾何體的位置（x,y,z）
scene.add(cube);
}
// 相機(jī)
var camera;
function init_camera(){
// camera = new THREE.PerspectiveCamera(100,width/height,1,10000); //透視相機(jī)
camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000) //正投影相機(jī)
// （可視角度，可視范圍的長寬比，相對(duì)于深度剪切面的近的距離 必須為正數(shù)，相對(duì)于深度剪切面的遠(yuǎn)的距離 必須為正數(shù)）
camera.position.x =600
camera.position.y = 100;
camera.position.z = 100;
camera.up.x = -2;//設(shè)置相機(jī)的上為「x」軸方向
camera.up.y = 2;//設(shè)置相機(jī)的上為「y」軸方向
camera.up.z = 0;//設(shè)置相機(jī)的上為「z」軸方向
camera.lookAt({x:0,y:0,z:0}); //設(shè)置視野的中心坐標(biāo)
}
// 光源
var light;
function init_light(){
light = new THREE.DirectionalLight(0xffffff,1);//設(shè)置平行光源 (光顏色，光強(qiáng)度)
light.position.set(200,100,50);//設(shè)置光源向量 (x,y,z)
scene.add(light);
}
function ThreeJs_Main(){
init_renderer();//渲染
init_scene();//場(chǎng)景
init_cylinder();//圓柱體
init_camera();//相機(jī)
init_light();//光源
renderer.clear();
animation()
renderer.render(scene,camera);
}
function animation(){
//x,y,z為旋轉(zhuǎn)的軸 后邊數(shù)字為速度
// cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// cube.rotation.z += 0.01;
renderer.render(scene,camera);
requestAnimationFrame(animation);
}
</script>
</head>
<body onload="ThreeJs_Main()">
<div id="canvas"></div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
onerror事件用來協(xié)助處理頁面中的JavaScript錯(cuò)誤主要包括：Window.onerror事件,img載入錯(cuò)誤，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-04-04
JavaScript實(shí)現(xiàn)QQ聊天室功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中數(shù)組雙重去重的方法總結(jié)
這篇文章主要為大家學(xué)習(xí)介紹了JavaScript中數(shù)組雙重去重的幾個(gè)常用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，百度統(tǒng)計(jì)中有個(gè)熱點(diǎn)統(tǒng)計(jì)圖，我們要做的就是獲取光標(biāo)的像素坐標(biāo)2013-11-11
這篇文章主要介紹了7個(gè)好用的TypeScript新功能，想了解TypeScript的同學(xué)，一定要看一下2021-05-05
JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap()，array.flatMap()是一個(gè)映射函數(shù)，它接收一個(gè)數(shù)組和一個(gè)映射函數(shù)，然后返回一個(gè)新的映射數(shù)組，下面進(jìn)入文章了解具體內(nèi)容
2022-02-02 
javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔問題解析
這篇文章主要介紹了javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03 
詳解cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案
這篇文章主要為大家介紹了cesium實(shí)現(xiàn)大批量POI點(diǎn)位聚合渲染優(yōu)化方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05 
JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果,通過簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件遍歷頁面元素實(shí)現(xiàn)二級(jí)導(dǎo)航菜單切換的效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-10-10