我用Three.js创作游戏（一）

背景 Three.js是一种历史较为悠久的开源技术，准确来说它是一个 JavaScript 的 3D 库而不是一个游戏引擎。但是我们可以用它来制作各种的3D 效果和游戏。

功能 Three.js主要具有以下功能点：

能够创建各种各样的三维几何图形。
可以在三维场景下创建动画。
可以为物体增加纹理和材质。
可以使用各种光源来装饰场景。
能够通过三维模型软件加载物体。
为三维场景添加高级的后期处理效果。
使用自定义的着色器。
创建点云（粒子系统）等等。

例子如此效果相信小伙伴们也对此颇感兴趣吧，今天咱从基础学起，做个小小的案例，效果图如下：

首先在自定义项目的文件夹下，使用npm install three@0.106.2引入three.js文件，然后创建html与js文件，html链入three.js与自己的js文件即可，js编写场景代码，代码如下：

var scene = new THREE.Scene();//创建场景

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//创建相机

var renderer = new THREE.WebGLRenderer();//创建渲染器

renderer.setSize(window.innerWidth,window.innerHeight);//设置大小

document.body.appendChild(renderer.domElement);//把渲染器追加到浏览器

renderer.render(scene,camera);

var g = new THREE.BoxGeometry(1,1,1);//创建盒子

var material = new THREE.MeshBasicMaterial({color: 0x44c1ff});//创建材质

var cube = new THREE.Mesh(g,material);

scene.add(cube);

camera.position.z = 10;

renderer.render(scene,camera);

//同步动画

function animate(){

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene,camera);

}

animate();

//浏览器缩放响应

window.onresize = function(){

renderer.setSize(window.innerWidth,window.innerHeight);

camera.aspect = window.innerWidth/window.innerHeight;

camera.updateProjectionMatrix();

}

我用Three.js创作游戏（一）相关推荐

前端每日实战：164# 视频演示如何用原生 JS 创作一个数独训练小游戏（内含 4 个视频）...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mQYobz 可交互视频此视频是可 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
Blender与UE5完美结合全流程创作游戏资产视频教程
Blender到虚幻引擎5 Blender to Unreal Engine 5 MP4 |视频:h264,1280×720 |音频:AAC,44100 Hz 语言:英语+中英文字幕(根据原英文字幕机 ...
java五子棋悔棋代码_小猿圈前端编写JS五子棋游戏
前段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏,今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏,想玩的小伙伴记得自己运行一下呦. JS五子棋游戏代码: 五子棋 canvas { dis ...
虚幻引擎 js开发游戏_通过编码3游戏学习虚幻引擎4-5小时免费游戏开发视频课程
虚幻引擎 js开发游戏 One of the most widely used game engines is Unreal Engine by Epic Games. On the freeCode ...
c语言a 寻路算法,JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
本文实例讲述了JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法.分享给大家供大家参考,具体如下: 完整实例代码如下: A*寻路算法 #stage { border: 1px solid lig ...
全球最大多人在线创作游戏Roblox暂时关闭官方称将尽快恢复运行
10月31日消息,据网友爆料,世界最大的多人在线创作游戏Roblox近日突然下线. Roblox官网只留下了一张图片,图片显示,"正在让事情变得更好,稍后就会回来". 10月29日 ...
Pomelo：网易开源基于 Node.js 的游戏服务端框架
Pomelo 是基于 Node.js 的高性能.分布式游戏服务器框架.它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发.Pomelo 不但适用 ...
html5 游戏算法,JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...

我用Three.js创作游戏（一）

我用Three.js创作游戏（一）相关推荐

最新文章

热门文章