序言

本章介绍地面的加载。

目录结构

资源目录里面的结构不变，点击传送门快速查看。

|__src|__assets|__js|    |__base     基础类文件夹|     |__Camera.js 相机类|   |__geometries   定制的物体类文件夹|  |__materials    材质类文件夹|     |__Floor.js 地面材质 【新增】|  |__passes   合成器通道文件夹|   |__utils    工具类文件夹|     |__Sizes.js  画布大小控制类|       |__EventEmitter.js 基础事件处理器|     |__Time.js  动画刷新|   |__world    精灵类文件夹|     |__index.js 精灵类 【新增--包含所有精灵的加载 控制】|     |__Floor.js 地面类 【新增--处理地面】| |__Application.js   初始化游戏的文件 【新增了对setWorld的设置，加入场景】|__index.js       入口|__index.css      小项目，样式一丢丢

代码一览

新增了两个文件处理地面。

world/index.js代码

import * as THREE from "three";
import Floor from "./Floor.js";export default class {constructor(){this.container = new THREE.Object3D();this.container.matrixAutoUpdate = false;//设置地面this.setFloor();}setFloor(){this.floor = new Floor();this.container.add(this.floor.container)}
}

world/Floor.js代码

import * as THREE from "three";
import FloorMaterial from "../materials/Floor.js";export default class Floor {constructor(){this.container = new THREE.Object3D();this.container.matrixAutoUpdate = false;this.geometry = new THREE.PlaneBufferGeometry(2, 2, 10, 10);this.material = new FloorMaterial();this.mesh = new THREE.Mesh(this.geometry, this.material);this.mesh.frustumCulled = false;  //是否在渲染物体之前，检查每一帧的物体是否在摄像机的视锥体中this.mesh.matrixAutoUpdate = false;  //是否计算每一帧的位移、旋转（四元变换）和缩放矩阵，并重新计算matrixWorld属性this.container.add(this.mesh);}updateMaterial(){}
}

materials/Floor.js代码

import * as THREE from "three";export default function () {const uniforms = {tBackground: { value: null },};const shaderVertex = `#define GLSLIFY 1varying vec2 vUv;void main() {vUv = uv;vec3 newPosition = position;newPosition.z = 1.0;gl_Position = vec4(newPosition, 1.0);}`;//这里片元着色器内直接上了测试颜色--灰色，方便当下看到效果。没问题后，可以移除gl_FragColor = vec4(0,0,0,0.1)，打开上一行的注释。const shaderFragment = `#define GLSLIFY 1uniform sampler2D tBackground;varying vec2 vUv;void main() {vec4 backgroundColor = texture2D(tBackground, vUv);//gl_FragColor = backgroundColor;gl_FragColor = vec4(0,0,0,0.1);}`;const material = new THREE.ShaderMaterial({wireframe: false,  //是否将几何体渲染为线框transparent: false,  //定义此材质是否透明uniforms,  //指定要传递给shader代码的uniformsvertexShader: shaderVertex,  //顶点着色器的GLSL代码fragmentShader: shaderFragment,  //片元着色器的GLSL代码});return material;
}

Application.js代码

import React from 'react';
...
import World from './world/index';export default class Application extends React.Component {componentDidMount(){...//设置精灵this.setWorld();...this.test();}...setWorld(){this.world = new World();this.scene.add(this.world.container);}test(){this.time.on("tick", () => {this.renderer.render(this.scene, this.camera.instance)  });}...
}

代码解读

world/index.js 是整个游戏中所有精灵的入口，这里将引入其它精灵。
world/Floor.js 是地面的实现，这里创建了一个3d容器，将平面放入。
而地面需要的材质引入了materials/Floor.js。最终在Application.js中，引入world/index.js，实例化设置即可。
test方法中可以只保留渲染更新，其它都可以移除了。

运行结果

屏幕中被灰色区域占据。

Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】相关推荐

Threejs系列--9游戏开发--沙漠赛车游戏【基础场景渲染】
Threejs系列--9游戏开发--沙漠赛车游戏[基础场景渲染] 序言准备工作目录结构代码一览 index.js代码 index.css代码 Camera.js代码 Sizes.js代码 App ...
Threejs系列--22游戏开发--沙漠赛车游戏【布置游戏开始场景】
Threejs系列--22游戏开发--沙漠赛车游戏[布置游戏开始场景] 序言目录结构代码一览 index.js代码 Objects.js代码 Materials.js代码 materials/Fl ...
Threejs系列--10游戏开发--沙漠赛车游戏【基础事件处理器】
Threejs系列--9游戏开发--沙漠赛车游戏[基础事件处理器] 序言目录结构代码一览 Time.js代码 EventEmitter.js代码 Sizes.js代码 Application.js ...
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】
Threejs系列--16游戏开发--沙漠赛车游戏[loading与start切换效果] 序言目录结构新增依赖代码一览 world/index.js代码代码解读运行结果序言本章将使页面中 ...
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
Threejs系列--14游戏开发--沙漠赛车游戏[纹理贴图之loading加载] 序言目录结构代码一览 world/index.js代码 Application.js代码代码解读运行结果序 ...
Threejs系列--18游戏开发--沙漠赛车游戏【loading资源加载进度条】
Threejs系列--18游戏开发--沙漠赛车游戏[loading资源加载进度条] 序言目录结构代码一览 AreaFloorBorderBufferGeometry.js代码 AreaFloorB ...
Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】
Threejs系列--13游戏开发--沙漠赛车游戏[使用效果合成器添加高级效果] 序言目录结构代码一览 Blur.js代码 Glows.js代码 Application.js代码代码解读运行结 ...
unity 通过resouce加载图片_Unity游戏开发笔记-资源管理之资源加载
资源加载是游戏中非常重要也非常繁琐的的一部分,不合理的资源管理,必定回给游戏的内存带来非常大的压力,尤其是一些重度游戏,不但资源特别多,引用关系特别复杂.维护一个不会内存泄漏而且加载效率高的资源加载框 ...
微信小游戏开发（9）- 分包加载
随着小游戏的玩法越来越丰富,开发者对于扩大包大小的需求越来越强烈,所以微信推出了小游戏分包加载这一个功能. 所谓的分包加载,即把游戏内容按照一定的规则拆分成几个包,在首次启动时先下载必要的包,这个必要 ...

Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】

Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】

序言

目录结构

代码一览

world/index.js代码

world/Floor.js代码

materials/Floor.js代码

Application.js代码

代码解读

运行结果

Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】相关推荐

最新文章

热门文章