WebGL中three.js的示例分析
小编给大家分享一下WebGL中three.js的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家专业提供裕安企业网站建设,专注与成都网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为裕安众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
1、WebGL
可以在浏览器端显示3D图形
2、three.js
在WebGL基础上,再进行一次封装。比较好用。两者之间的关系相当于Js与jquery的关系。
3、基本使用体验
*{
margin: 0;
padding: 0;
}
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
以上是“WebGL中three.js的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前名称:WebGL中three.js的示例分析
本文链接:http://myzitong.com/article/pocopc.html