WebGL中three.js的示例分析

小編給大家分享一下WebGL中three.js的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供裕安企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為裕安眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

1、WebGL

可以在瀏覽器端顯示3D圖形

2、three.js

在WebGL基礎(chǔ)上，再進行一次封裝。比較好用。兩者之間的關(guān)系相當于Js與jquery的關(guān)系。

3、基本使用體驗

<!DOCTYPE html>

<head>

<title>three地板、立方體、球體</title>

<style>

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</div>

function init(){

// 1、創(chuàng)建場景

let scene = new THREE.Scene();

// 2、創(chuàng)建相機

let camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)

// 3、創(chuàng)建渲染器

let renderer = new THREE.WebGLRenderer()

// 設(shè)置渲染器的初始顏色

renderer.setClearColor(new THREE.Color(0xEEEEEE))

// 設(shè)置canvas畫布尺寸大小

renderer.setSize(window.innerWidth,window.innerHeight)

renderer.shadowMapEnabled = true

// 設(shè)置三維坐標系

let axis = new THREE.AxesHelper(20)

// 坐標系添加到場景中

scene.add(axis)

// 4、創(chuàng)建地板模型并上色

let planeMat = new THREE.PlaneGeometry(60,20)

let planeCol = new THREE.MeshBasicMaterial({color:0xcccccc})

let plane = new THREE.Mesh(planeMat,planeCol)

plane.receiveShadow = true

// 地面添加到場景中

plane.rotation.x = -0.5*Math.PI

scene.add(plane)

// 5、創(chuàng)建立方體

let cubeMat = new THREE.BoxGeometry(4,4,4);

let cubeCol = new THREE.MeshLambertMaterial({color:0x66cc00})

let cube = new THREE.Mesh(cubeMat,cubeCol)

cube.position.x = 4

cube.position.y = 0

cube.position.z = 4

cube.castShadow = true; //立方體添加陰影

// 5、創(chuàng)建球體

let sphereMat = new THREE.SphereGeometry(4,20,20);

let sphereCol = new THREE.MeshLambertMaterial({color:0x21cc10})

let sphere = new THREE.Mesh(sphereMat,sphereCol)

sphere.position.x = 10

sphere.position.y = 4

sphere.position.z = 0

sphere.castShadow = true; //添加陰影

// 添加聚光燈

let spotLight = new THREE.SpotLight(0xFFFFFF)

spotLight.position.set(30,20,10)

spotLight.castShadow = true

scene.add(spotLight)

scene.add(cube,sphere)

// 6、渲染

// 相機定位，并指向場景

camera.position.x = -20

camera.position.y = 30

camera.position.z = 30

camera.lookAt(scene.position)

document.getElementById("webGL-output").appendChild(renderer.domElement)

renderer.render(scene,camera)

}

window.onload = init

</script>

</body>

</html>

以上是“WebGL中three.js的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：WebGL中three.js的示例分析
文章轉(zhuǎn)載：http://jinyejixie.com/article32/pocopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開發(fā)、搜索引擎優(yōu)化、企業(yè)建站、網(wǎng)頁設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(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)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

WebGL中three.js的示例分析