溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下WebGL中three.js的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、WebGL
可以在瀏覽器端顯示3D圖形
2、three.js
在WebGL基礎上，再進行一次封裝。比較好用。兩者之間的關系相當于Js與jquery的關系。
3、基本使用體驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>three地板、立方體、球體</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="webGL-output">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
<script>
function init(){
// 1、創建場景
let scene = new THREE.Scene();
// 2、創建相機
let camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
// 3、創建渲染器
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、創建地板模型并上色
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、創建立方體
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、創建球體
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的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
