网络知识 娱乐 Three.js学习笔记 | WebGL渲染器入门示例

Three.js学习笔记 | WebGL渲染器入门示例

发布: 2023年2月14日 10:17:50

效果图：

我们先来看一下示例程序的基本骨架：

<!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>WebGL渲染器入门示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script> <style> body { margin: 0; overflow: hidden; } </style></head><body> <script> </script></body></html>

因为我们要在整个浏览器的内容区域里展示我们的示例程序，所以我们将body的margin设置成0。<script>标签用于存放Three.js代码。

接下来，我们要做的就是在<script>标签内编写Three.js代码。

我们定义了三个全局变量：

// 渲染器var renderer;// 场景var scene;// 摄像机var camera;

  • 渲染器（Renderer）：场景的渲染方式，如webGLcanvas2DCss3D。
  • 场景（Scene）：是物体、光源等元素的容器。
  • 相机（Camera）：场景中的相机，代替人眼去观察，场景中只能添加一个。

我们定义了一个初始化方法init()，会在页面加载完成后调用。

// 页面加载成功后调init()方法window.onload = init;

我们来看下init()方法的具体内容：

/** * 初始化方法 */function init() { scene = new THREE.Scene(); // 透视相机 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 15; camera.position.y = 16; camera.position.z = 13; camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x000000, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); var cubeGeometry = new THREE.BoxGeometry(10. * Math.random(), 10. * Math.random(), 10. * Math.random()); // 立方体材质：网格法线材质 var cubeMaterial = new THREE.MeshNormalMaterial(); // 网格模型：立方体 var cute = new THREE.Mesh(cubeGeometry, cubeMaterial); scene.add(cute); document.body.appendChild(renderer.domElement); renderer.render(scene, camera);}

完整代码：

<!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>WebGL渲染器入门示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script> <style> body { margin: 0; overflow: hidden; } </style></head><body> <!-- three.js代码 --> <script> // ########## 全局变量 ########## // 渲染器 var renderer; // 场景 var scene; // 摄像机 var camera; /** * 初始化方法 */ function init() { scene = new THREE.Scene(); // 透视摄像机 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 15; camera.position.y = 16; camera.position.z = 13; camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x000000, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); var cubeGeometry = new THREE.BoxGeometry(10. * Math.random(), 10. * Math.random(), 10. * Math.random()); // 立方体材质：网格法线材质 var cubeMaterial = new THREE.MeshNormalMaterial(); // 网格模型：立方体 var cute = new THREE.Mesh(cubeGeometry, cubeMaterial); scene.add(cute); document.body.appendChild(renderer.domElement); renderer.render(scene, camera); } // 页面加载成功后调init()方法 window.onload = init; </script></body></html>

官网地址：https://threejs.org/docs/index.html

相关文章