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()方法并延迟渲染场景。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek