计算机图形学作业--渲染图像

最新推荐文章于 2024-07-03 15:10:08 发布

碳水爱好者！

最新推荐文章于 2024-07-03 15:10:08 发布

阅读量670

点赞数

文章标签： 3d javascript 开发语言

本文链接：https://blog.csdn.net/weixin_51333478/article/details/125133365

版权

应用的技术

WebGL是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML元素中使用。
Three.js是一款 webGL 框架，由于其易用性被广泛应用，它以简单、直观的方式封装了 3D 图形，也能用简单的代码实现三维场景的渲染。在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。

思路

   首先，构建如图的3D多面体模型，然后通过添加了周期渲染，

让多面体模型旋转起来
Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为场景、相机和渲染(即它内置了图形编程常用的一些对象种类)
在这里插入图片描述

代码实现

场景

/**
   * 创建场景对象Scene
   */
  var scene = new THREE.Scene();
  /**
   * 创建网格模型
   */
  // 创建一个多面体几何对象Geometry
  //THREE.IcosahedronGeometry(radius)  radius:用来设置多面体的半径
  var geometry = new THREE.IcosahedronGeometry(60);

  //THREE.MeshLambertMaterial  材质用来渲染看上去暗淡不光亮的表面，该材质会对场景中的光源产生反应
  var material = new THREE.MeshLambertMaterial({
    color: 	'#3CB371'                             //'#EB193D'//粉红色    //蓝色0x0000ff
  });

  //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh);                               //网格模型添加到场景中
  /**
   * 光源设置
   */
  //点光源  0xffffff表示白色
  var point = new THREE.PointLight(0xffffff);         //,1,30000,100
  point.position.set(400, 200, 300);                  //点光源位置
  scene.add(point);                                    //点光源添加到场景中

  //环境光  0x444444表示中等暗度的灰色阴影
  var ambient = new THREE.AmbientLight(0x444444);
  scene.add(ambient);

点光源介绍

 Three.PointLight( color, intensity, distance, decay )
 color - 点光源的颜色(默认为0xffffff白色)
 intensity - 点光源的强度(默认强度为1)
 distance - 点光源的距离(默认为0)意味着光的强度不会因为距离而减弱
 decay - 随着点光源的距离，光源强度衰减程度(默认为1)

颜色:白色;强度:1;照射距离:3000;衰减程度:1
在这里插入图片描述
颜色:白色;强度:2;照射距离:3000;衰减程度:1

颜色:白色;强度:1;照射距离:30000;衰减程度:1

颜色:白色;强度:1;照射距离:3000;衰减程度:100

环境光介绍

 Three.AmbientLight(color, intensity) 
 color - 点光源的颜色(默认为0xffffff白色)
 intensity - 点光源的强度(默认强度为1)

点光源+环境光
在这里插入图片描述
环境光

环境光源由于是四面八方的，所以并不会产生阴影。只有环境光的场景是不真实存在的，因为颜色无法凸显出来，上图例给予解释。通常，该光源不是场景中的唯一光源，因为它会将场景中的所有物体渲染为相同的颜色，它通常与其他光源同时使用，目的是弱化阴影或给场景中添加额外的颜色。
相机

  var width = window.innerWidth;//窗口宽度
  var height = window.innerHeight; //窗口高度
  var k = width / height; //窗口宽高比
  var s = 200;//三维场景显示范围控制系数，系数越大，显示的范围越大
  //创建相机对象
  var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  camera.position.set(200, 300, 200); //设置相机位置
  camera.lookAt(scene.position); //设置相机方向

正投影相机的介绍

OrthographicCamera( left, right, top, bottom, near, far )
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，
                 一般情况会设置一个很小的值。 默认值0.1

渲染

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xEE82EE, 1);//设置背景颜色
  document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  //执行渲染操作   指定场景、相机作为参数
  // renderer.render(scene, camera);
  // 渲染函数
  function render() {
    renderer.render(scene,camera); //执行渲染操作
    mesh.rotateY(0.01);            //每次绕y轴旋转0.01弧度
  }
  //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
  //设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿
  setInterval(render,20);

通过周期渲染旋转动画，每执行一次渲染器对象WebGLRenderer的渲染方法.render() 浏览器就会渲染出一帧图像并显示在Web页面上，这就是说你按照一定的周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。也就是说只要一边旋转立方体，一边执行渲染方法.render()重新渲染，就可以实现立方体的旋转效果。
renderer.render(scene,camera)执行渲染操作指定场景、相机作为参数，mesh.rotateY(0.01)每次渲染都绕y轴旋转0.01弧度。
setInterval() 方法会不停地调用函数间隔20ms周期性调用函数render,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次。设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿，所以调用函数的周期不易过大。