Three.js+React实现3D开放世界小游戏

前言 大家好,这里是 CSS 魔法使--alphardex. 之前在逛国外网站的时候,发现有些网站的文字是刻在3D图形上的,并且能在图形上运动,视觉效果相当不错,于是笔者就也想用three.js来尝试复现出这种效果 上图只是所有效果的其中之一,接下来让我们一起开干吧~ 准备工作 笔者自行封装的three.js模板:Three.js Starter 读者可以点击右下角fork一份后再开始本项目 本项目需要用到位图字体,可以直接复制demo的HTML里的font字体代码 一个注意点:three-bm

背景 虎年

目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球

目录 背景 效果 实现 资源引入 DOM结构 设置状态 网格背景 场景初始化 创建材质 创建文字模型 创建几何体模型 鼠标事件监听 背景色切换 后期渲染 动画 缩放适配 双击全屏 总结 背景 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontL

目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

目录 背景 效果 实现 素材制作 资源引入 场景初始化 创建漫画主体 创建Boom背景 镜头控制.缩放适配.动画 总结 背景 逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子,于是仿照他们的例子,使用 Three.js + React 技术栈,将二维漫画图片转化为三维视觉效果.本文包含的内容主要包括:THREE.Group 层级模型.MeshPhongMaterial 高光网格材质.正弦余弦函数 创建模型移动轨迹等. 效果 实现效果如下图所示:页面主要有背景图.漫画图片

目录 背景 效果 设计 实现 加载资源 页面结构 数据初始化 场景初始化 创建世界 创建星空 创建地形 加载进度管理 创建基地模型 创建阿狸模型 控制阿狸运动 动画更新 页面缩放适配 添加游戏逻辑 毛玻璃效果 总结 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏

目录 背景 效果 实现 引入资源 页面DOM结构 场景初始化 添加光源 加载进度管理 创建地面 创建冬奥吉祥物冰墩墩 创建奥运五环 TorusGeometry 圆环面 MeshLambertMaterial 非光泽表面材质 创建旗帜 创建树木 MeshDepthMaterial 深度网格材质 custromMaterial 自定义材质 创建雪花 Points 粒子 PointsMaterial 点材质 材质属性 .blending 材质属性 .sizeAttenuation Three.js 向

目录 背景 效果 实现 素材准备 资源引入 页面结构 场景初始化 海 天空 虹 岛 鸟 交互点 动画 总结 背景 深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落……本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及 Three.

我的世界小游戏使用方法: 移动 前进:W,后退:S,向左:A,向右:D,环顾四周:鼠标,跳起:空格键,切换飞行模式:Tab; 选择建筑材料 砖:1,草:2,沙子:3,删除建筑:鼠标左键单击,创建建筑块:鼠标右键单击 ESC退出程序. 完整程序包请通过文末地址下载,程序运行截图如下: from __future__ import division import sys import math import random import time from collections import deq

其实逻辑和2维版本完全一样,就不进行详细解说了,直接看效果: 效果: 目前界面还不咋好看,期待大家的优化 还是键盘↑↓←→操作嗷 完整代码: function game20483D global squaremap global colorlist global fontsizelist global baseX baseY baseZ global barHdl textHdl global txtBest txtScore global best fig=figure('units','pi

目录 棋盘绘制 棋子的绘制 在点击 canvas 的时候获取相对于棋盘数据的坐标点 是否结束 悔棋功能 总结 这里的五子棋只做一些基础的功能,对于相对专业的规则不做处理. 那么该五子棋实现的规则和功能如下: 整体功能采用canvas实现 行列都规定 20 个数量,那么棋子的行列数量是 20 + 1 棋盘数据采用稀疏数组格式 棋子:0 为黑色,1 为白色 可以悔棋 胜负结束判断 棋盘绘制 <template> <div class="gobang"> <ca

目录 1.棋盘和棋子的绘制. 2.轮流下棋的点击事件 3.获胜条件判断 3.1横轴获胜 3.2数轴获胜 3.3正斜轴获胜 3.4反斜轴获胜 4.悔棋功能 总结 1.棋盘和棋子的绘制. let arr = [ [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {},