WebGL中three.js的示例分析

小编给大家分享一下WebGL中three.js的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联是一家专业提供裕安企业网站建设,专注与成都网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为裕安众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

1、WebGL

可以在浏览器端显示3D图形

2、three.js

在WebGL基础上，再进行一次封装。比较好用。两者之间的关系相当于Js与jquery的关系。

3、基本使用体验

<!DOCTYPE html>

<head>

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

<style>

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</div>

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的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文题目：WebGL中three.js的示例分析
文章转载：https://www.cdcxhl.com/article32/pocopc.html

成都网站建设公司_创新互联，为您提供电子商务、软件开发、搜索引擎优化、企业建站、网页设计公司、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容