小編給大家分享一下WebGL中three.js的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)是一家專業(yè)提供裕安企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站建設、成都網(wǎng)站設計、H5高端網(wǎng)站建設、小程序制作等業(yè)務。10年已為裕安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。
1、WebGL
可以在瀏覽器端顯示3D圖形
2、three.js
在WebGL基礎上,再進行一次封裝。比較好用。兩者之間的關系相當于Js與jquery的關系。
3、基本使用體驗
*{
margin: 0;
padding: 0;
}
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()
// 設置渲染器的初始顏色
renderer.setClearColor(new THREE.Color(0xEEEEEE))
// 設置canvas畫布尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMapEnabled = true
// 設置三維坐標系
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
以上是“WebGL中three.js的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!