| 分享three.js 的简单实例 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1401 回帖数 0 |
 |
lanlan123 等级 ☆ 楼主 发表于 2019/10/12 13:20:02 编 辑 |
|
|
three.js 的简单实例 三大主件: 渲染器、场景、相机 思想核心: 相机获取到场景内显示的内容, 然后再通过渲染器渲染到画布上面 渲染器: 实例化渲染器的同时生成的一个 Canvas 画布, 之后将这个画布添加到了 DOM 当中 场景: 场景只是一个容器, 显示的内容需要进行添加, 添加一个内容称作一个网格, 每个网格基本上包括几何体和材质, 网格也称之为模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>three</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } </style> </head> <body onload="init()"> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript" src="js/stats.min.js"></script> <script type="text/javascript" src="js/dat.gui.min.js"></script> <script> //声明一些全局变量 var renderer, camera, scene, geometry, material, mesh, stats, rotate = true; //初始化渲染器 function initRenderer() { renderer = new THREE.WebGLRenderer(); //实例化渲染器 renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高 document.body.appendChild(renderer.domElement); //添加到dom } //初始化场景 function initScene() { scene = new THREE.Scene(); //实例化场景 } //初始化相机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机 camera.position.set(0, 0, 15); //初始化的坐标 } //创建模型 function initMesh() { geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体 material = new THREE.MeshNormalMaterial(); //创建材质 mesh = new THREE.Mesh(geometry, material); //创建网格 scene.add(mesh); //将网格添加到场景 } //运行动画 function animate() { requestAnimationFrame(animate); //循环调用函数 //判断是否可以旋转 if(rotate) { mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度 mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度 } stats.update(); //更新性能检测框 renderer.render(scene, camera); //渲染界面 } //性能检测框 function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //创建调试框 function initGui() { //控制参数初始值 controls = { positionX: 0, positionY: 0, positionZ: 0, rotate: true }; gui = new dat.GUI(); //实例化对象 gui.add(controls, "positionX", -10, 10).onChange(updatePosition); gui.add(controls, "positionY", -5, 5).onChange(updatePosition); gui.add(controls, "positionZ", -10, 10).onChange(updatePosition); function updatePosition() { mesh.position.set(controls.positionX, controls.positionY, controls.positionZ); } gui.add(controls, "rotate").name("旋转").onChange(function(e) { rotate = e; }); } //初始化函数，页面加载完成是调用 function init() { initRenderer(); initScene(); initCamera(); initMesh(); initStats(); initGui(); animate(); } </script> </body> </html> 更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |