Threejs项目结构以及模块设计

1.理解模块结构设计

我们主要有两个模块分别是组件和系统，组件一般指放置到相机、场景、灯光，在场景中的任何东西模块，例如立方体、模型文件、新建新圆球型、灯光等组件，在系统模块一般指放置到渲染器和大小调整器。来看看threejs目录结构是怎样的？如下：这个是场景中的组件：

javascript 复制代码

components/camera.js //相机模块
components/cude.js // 立方体模块
components/scene.js //场景模块 
system/renderer.js //渲染器模块 
system/Resizer.js //调整器模块

可以看到场景中的组件，这样目录结构比较清晰。

1.1 组件：相机模块

javascript 复制代码

import { PerspectiveCamera } from 'https://unpkg.com/three@0.127.0/build/three.module.js'; 
//camera相机组件 
function createCamera() {   
    // perspectiveCamera=透视投影相机  
    const camera = new PerspectiveCamera(   
        35, // fov 视野   
        1, // 宽高的比例     
        0.1, // 剪切面附近    
        100, // 远剪切面   );  
    // 定位相机=相机位置，把相机往后移，可以看到场景。   
    camera.position.set(0, 0, 10);  
    return camera;
} 
//出口创建相机的方法 
export { createCamera };

1.2 组件：立方体等模块

javascript 复制代码

import { BoxBufferGeometry, Mesh, MeshBasicMaterial } from 'https://unpkg.com/three@0.127.0/build/three.module.js';
// cude立方体组件
function createCube() {  
    // 创建几何体   
    const geometry = new BoxBufferGeometry(2, 2, 2);   
    // 创建一个默认的(白色)基本材质  
    const material = new MeshBasicMaterial();   
    // 创建一个包含几何和材料的网格   
    const cube = new Mesh(geometry, material);  
    return cube; 
} 
//出口到创建立方体 
export { createCube };

1.3组件：场景模块

javascript 复制代码

import { Color, Scene } from 'https://unpkg.com/three@0.127.0/build/three.module.js';
// scene场景组件 
function createScene() {  
    // 创建一个场景  
    const scene = new Scene(); 
    // 背景颜色为天空蓝  
    scene.background = new Color('skyblue'); 
    return scene;
}
export { createScene };

1.4系统：调整器模块

javascript 复制代码

class Resizer {  
    // 系统：调整器   
    constructor(container, camera, renderer) {    
        // 设置相机的宽高比    
        camera.aspect = container.clientWidth / container.clientHeight;    
        // 更新相机的截锥    
        camera.updateProjectionMatrix(); 
        // 更新渲染器和画布的大小 
        renderer.setSize(container.clientWidth, container.clientHeight); 
        // 设置像素比率(用于移动设备)     
        renderer.setPixelRatio(window.devicePixelRatio);  
    }
} 
export { Resizer };

1.5系统：渲染器

javascript 复制代码

import { WebGLRenderer } from 'https://unpkg.com/three@0.127.0/build/three.module.js';
// 系统：渲染器
function createRenderer() { 
    //渲染器  
    const renderer = new WebGLRenderer();   
    return renderer; 
} 
export { createRenderer };

2.主场景文件

创建在目录下sceneMain.js主入口文件，例如：

javascript 复制代码

// 组件模块 import { createCamera } from './components/camera.js'; import { createCube } from './components/cube.js'; import { createScene } from './components/scene.js'; 
// 系统模块 
import { createRenderer } from './systems/renderer.js'; import { Resizer } from './systems/Resizer.js'; 
// 这些变量是模块作用域的:我们不能访问它们 
// 从模块外部 
let camera; 
let renderer; 
let scene;
class World {  
    constructor(container) {     
    // 一般在World.render方法中访问，然后同时保存相机、场景和渲染器的成员变量 
    camera = createCamera();  
    scene = createScene();    
    renderer = createRenderer();  
    // 就是把画布添加到容器中，canvas会创建一个元素并存储在renderer     container.append(renderer.domElement);    
    // 创建立方体并将其添加到场景中    
    const cube = createCube();    
    scene.add(cube);    
    const resizer = new Resizer(container, camera, renderer);
    }   
    render() {  
        // 绘制一个单独的帧     
        renderer.render(scene, camera); 
    } 
} 
export { World };

3.主入口文件main.js

javascript 复制代码

import { World } from './World/World.js';
// main主入口 
function main() {  
    // 获取DOM的元素canvas  
    const container = document.querySelector('#scene-container'); 
    // 创建一个World应用程序的实例  
    const world = new World(container);
    // 渲染的场景  
    world.render();
} 
main();

使用模块设计主要是来构建代码，需要了解拆分应用程序的想法。

4.练习题

咱们先来下练习场景中的状态。

4.1 简单题

问题：更改场景背景颜色。可以输入任何标准颜色名称，例如红色和绿色等，以及一些不常见的颜色名称，例如蓝宝石、深蓝色等。

解题：首先要关注是如何修改场景中的背景颜色，首先找到components/scene.js

javascript 复制代码

// 背景颜色  
scene.background = new Color('red'); //这里需要修改颜色即可 
//修改后背景颜色 
scene.background = new Color('green');

效果图：

4.2 一般题

问题：(1)将把立方体更改为其他一些形状，例如球体、三角形或者圆环；

(2)添加第二个立方体并使用移动它mesh.position.set(x,y,z);

解题：首先找到components/cube.js，立方体组件，同时修改几何体的形状：

javascript 复制代码

// 创建几何体   
const geometry = new BoxBufferGeometry(2, 2, 2); //这里需要修改形状即可
//修改后几何体的形状,选圆形 
const geometry = new CircleGeometry(1, 35);

效果图：

解题：如何添加第二个立方体和使用移动它？首先采用再新建第二个模块cube2.js文件： components/cube2.js

javascript 复制代码

import { BoxBufferGeometry, CircleGeometry, Mesh, MeshBasicMaterial } from 'https://unpkg.com/three@0.127.0/build/three.module.js';
/**  
cude立方体组件
*/ 
function createCube2() {   
    // 创建几何体   
    const geometry2 = new CircleGeometry(2, 35); 
    //圆形   
    // 创建一个默认的(白色)基本材质  
    const material = new MeshBasicMaterial();   
    // 创建一个包含几何和材料的网格 
    const cube2 = new Mesh(geometry2, material);   
    // 移动它，向X沿移为10   
    cube2.position.set(10, 0, 0);  
    return cube2; 
} 
export { createCube2 };

然后在sceneMain.js添加部分cube2的代码如下：

javascript 复制代码

import { createCube2 } from './components/cube2.js'
const cubes = createCube2();
scene.add(cubes);

这样完成引入了第二个立方体的组件文件。

效果图：

4.3 困难题

问题：向HTML页面添加一个按钮，并延迟渲染场景，直到单击该按钮。

解题：首先在index.html内添加一个按钮：

html 复制代码

<button type="button" id="btn">点击按钮</button>

然后在main.js底部添加代码：

javascript 复制代码

//点击触发按钮
document.getElementById('btn').onclick = main();

当点击button按钮的时候，就触发main()方法并延迟渲染场景。