小编给大家分享一下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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
