FHLP_WEB_3D之three.js代码模块化

基于Demo01的代码模块化

1、scene文件中主要由两部分构成，分别是index.js以及mesh.js

index.js文件中主要包含场景配置

// 引入Three.js
import * as THREE from '../../three.js-r123/build/three.module.js';

import {mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7} from './mesh.js';
/**
* 创建场景对象Scene
 */
var scene = new THREE.Scene();
scene.add(mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7);//网格模型添加到场景中
/**
* 光源设置
*/
// 平行光1
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
// 平行光2
var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight2.position.set(-400, -200, -300);
scene.add(directionalLight2);
//环境光
var ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);
var axesHelper = new THREE.AxesHelper(600);
scene.add(axesHelper);

export { scene };

mesh.js文件中主要包含网格模型的配置

// 引入Three.js
import * as THREE from '../../three.js-r123/build/three.module.js';


/**
 * 创建网格模型
 */
var geometry1 = new THREE.BoxGeometry(500, 500, 2); //创建一个立方体几何对象Geometry
// 材质对象Material
var material = new THREE.MeshLambertMaterial({
    color: 0x008000,//材质颜色
}); 
var mesh1 = new THREE.Mesh(geometry1, material); //网格模型对象Mesh
   
// 长方体
var geometry2 = new THREE.BoxGeometry(100, 100, 40);
var material2 = new THREE.MeshLambertMaterial({
    color: 0x190FF
});
var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
mesh2.position.set(200,20,20);//设置mesh2模型对象的xyz坐标为120,0,0
 
// 长方体
var geometry3 = new THREE.BoxGeometry(100, 100, 40);
var material3 = new THREE.MeshLambertMaterial({
    color: 0x190FF
});
var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
mesh3.position.set(200,180,20);//设置mesh2模型对象的xyz坐标为120,0,0
 
// 长方体
var geometry4 = new THREE.BoxGeometry(100, 100, 40);
var material4 = new THREE.MeshLambertMaterial({
    color: 0x190FF
});
var mesh4 = new THREE.Mesh(geometry4, material4); //网格模型对象Mesh
mesh4.position.set(200,-180,20);//设置mesh2模型对象的xyz坐标为120,0,0

// 长方体
var geometry5 = new THREE.BoxGeometry(100, 100, 40);
var material5 = new THREE.MeshLambertMaterial({
    color: 0x190FF
});
var mesh5 = new THREE.Mesh(geometry5, material5); //网格模型对象Mesh
mesh5.position.set(-200,20,20);//设置mesh2模型对象的xyz坐标为120,0,0

// 圆柱体
var geometry6 = new THREE.CylinderGeometry(50, 50, 100, 100);
var material6 = new THREE.MeshLambertMaterial({
    color: 0xFFD700
});
var mesh6 = new THREE.Mesh(geometry6, material6); //网格模型对象Mesh
mesh6.position.set(-200,180,50);//设置mesh2模型对象的xyz坐标为120,0,0

// 圆柱体
var geometry7 = new THREE.CylinderGeometry(50, 50, 100, 100);
var material7 = new THREE.MeshLambertMaterial({
    color: 0xFFD700
});
var mesh7 = new THREE.Mesh(geometry7, material7); //网格模型对象Mesh
mesh7.position.set(-200,-180,50);//设置mesh2模型对象的xyz坐标为120,0,0


export {mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7}

2、RendererCamera.js文件主要完成照相机以及渲染器的配置

// 引入Three.js
import * as THREE from '../three.js-r123/build/three.module.js';
// 引入Three.js扩展库
import { OrbitControls } from '../three.js-r123/examples/jsm/controls/OrbitControls.js';

 // width和height用来设置Three.js输出Canvas画布尺寸，同时用来辅助设置相机渲染范围
 var width = window.innerWidth; //窗口文档显示区的宽度
 var height = window.innerHeight; //窗口文档显示区的高度
 /**
 * 相机设置
 */
 var k = width / height; //Three.js输出的Canvas画布宽高比
 var s = 200; //控制相机渲染空间左右上下渲染范围，s越大，相机渲染范围越大
 //THREE.OrthographicCamera()创建一个正投影相机对象
 // -s * k, s * k, s, -s, 1, 1000定义了一个长方体渲染空间，渲染空间外的模型不会被渲染
 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
 camera.position.set(200, 300, 200); //相机在Three.js坐标系中的位置
 camera.lookAt(0, 0, 0); //相机指向Three.js坐标系原点
 /**
  * 创建渲染器对象
  */
 var renderer = new THREE.WebGLRenderer({
   antialias: true, //开启锯齿
 });
 renderer.setPixelRatio(window.devicePixelRatio);//设置设备像素比率,防止Canvas画布输出模糊。
 renderer.setSize(width, height); //设置渲染区域尺寸
 renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

 //创建控件对象  控件可以监听鼠标的变化，改变相机对象的属性
 // 旋转：拖动鼠标左键
 // 缩放：滚动鼠标中键
 // 平移：拖动鼠标右键
 var controls = new OrbitControls(camera, renderer.domElement);
 // onresize 事件会在窗口被调整大小时发生
 window.onresize = function () {
     // 重置渲染器输出画布canvas尺寸
     renderer.setSize(window.innerWidth, window.innerHeight);
     // 重置相机投影的相关参数
     k = window.innerWidth / window.innerHeight;//窗口宽高比
     camera.left = -s * k;
     camera.right = s * k;
     camera.top = s;
     camera.bottom = -s;
     // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
     // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
     // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
     camera.updateProjectionMatrix();
 };

export { renderer, camera };

3、RenderLoop.js文件完成循环渲染功效

import { scene } from './scene/index.js'//Three.js三维场景
import { renderer, camera } from './RendererCamera.js'//渲染器对象和相机对象


// 渲染循环
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();

export {renderer}

4、index.html程序的主入口,负责相关js文件，将Three.js渲染结果Canvas画布插入到body元素中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Three.js代码模块化</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script type="module">
    import {renderer} from './RenderLoop.js'
    //Three.js渲染结果Canvas画布插入到body元素中
    document.body.appendChild(renderer.domElement);
  </script>
</body>

</html>