WebGL中three.js的示例分析

发布时间：2022-03-05 11:50:24 作者：小新
来源：亿速云阅读：209

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

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的示例分析

相关阅读