<Three.js>（第一节）环境搭建

最新推荐文章于 2024-03-30 11:19:26 发布
VIP文章 最新推荐文章于 2024-03-30 11:19:26 发布
阅读量8k 收藏 12
点赞数 2
分类专栏： threejs 页游 图形学与3D游戏 文章标签： 3d引擎 threejs webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxiqilin/article/details/51911225
版权

Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目，下载地址：https://github.com/mrdoob/three.js/

1、搭建一个本地服务器。（本人用的是另外一台mac电脑的自带本地服务器）

2、下载three.js库。https://github.com/mrdoob/three.js/

准备好前面的操作后，接下来是创建一个项目的过程。

第一步：新建一个项目文件夹“Threejs”

第二步：在Threejs文件夹内新建一个html文件（index.html）。该文件是通过浏览器进入游戏的入口。

第三步：在Threejs文件夹内新建一个libs文件夹，用来存放three.js库和需要用到的其他库。

第四步：在Threejs文件夹内新建一个images文件夹，用来存放需要素材。

第五步：在Threejs文件夹内新建一个js文件夹，用来存放我们开发项目写的脚本。

这里写图片描述

html文件：

<!DOCTYPE html>
<html>
最低0.47元/天 解锁文章
夕阳-晨曦
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
适用于three.js显示pcd模型文件，找不到pcd文件
threejs-webpack:基于webpack的基本应用程序环境
05-10
threejs-webpack 基于webpack的基本threejs R91应用程序环境 入门指南 npm install 发展 npm run dev 命令行界面 npm run build npm start
汇总：五个开源的Three.js项目
最新发布
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
03-30 1642
汇总：五个开源的Three.js项目。Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。其应用场景广泛，包括网页游戏、数据可视化、虚拟现实（VR）、增强现实（AR）、艺术展示和教育工具等，几乎覆盖了所有需要在网页中展示3D内容的领域。
three.js和高德地图结合引入obj格式模型.zip
06-27
效果演示：https://blog.csdn.net/liuhao9999/article/details/125477396?spm=1001.2014.3001.5501 three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型-----------------
three.js加载gltf模型
09-17
three.js加载gltf模型的完整demo，使用vue开发的，比较简单，便于理解
使用three.js搭建室内场景
05-21
使用three.js搭建室内场景 不使用模型倒入，完全使用three.js接口搭建场景 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/82801737
ThreeJS环境搭建
qq_41014870的博客
02-20 897
ThreeJs是一款基于WebGL封装的在浏览器中运行的 3D 库，你可以用它来创造你所需要的一系列3D场景，如最近比较火的数字孪生、元宇宙可视化等等，如果你想深入学习Three.js，那么就跟着我的文章一起学习就好了。
初识 ThreeJS （ThreeJS 相关环境搭建）
两个月亮
01-23 4046
ThreeJS 是基于WebGL 封装的一个易于使用且轻量级的 3D 库，ThreeJS 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，同时也极大地提高了性能。，如果你希望可以快速的使用 ThreeJS 官网提供的这些功能（你还可以获取例子中的源码用于学习），可以将 ThreeJS 网站的项目文件下载到本地并对其进行搭建。当然你也可以通过终端的提示，通过访问链接。在完成上述操作后，使用如下命令安装该项目可能缺少的依赖项（第三方模块或插件），这些依赖项被记录在项目中的。
详解Three.js环境搭建与一个简单例子
Zhou_LC的博客
12-12 2353
一、环境准备 1.开发工具选用WebStorm，因为我因为WebStorm自带了一个本地服务器，而Three.js的很多特性需要在服务器端才能展现。 2.打开调用three.js的html的网页文件时，需要借助WebStorm提供的本地服务器，如图所示，通过点击右上角浏览器图标而打开网页文件。 二、文件结构 三、例子展示 例子参考自：《Three.js开发指南》（Jos Dirksen著） 四、源码展示 html文件： <!DOCTYPE html> <html>
如何安装和使用three.js
热门推荐
热爱技术，享受生活
09-17 1万+
Three.js 是一款基于 JavaScript 的开源 3D 图形库，用于创建和显示各种三维场景、对象和特效。它提供了丰富的功能和 API，使开发者能够轻松地在浏览器中渲染复杂的 3D 图形。Three.js 提供了一套简化的接口和工具，包括相机、几何体、材质、光源等，以及各种渲染技术，如阴影、透明度、纹理映射等。通过使用 Three.js，开发者可以通过编写少量的代码来创建交互式的、高性能的 3D 场景，无需深入了解底层的 WebGL 技术。
第二版three.js搭建一个3D库房,3D密集架,3D档案室
11-05
3D库房第一版，适合3D库房学习使用，绝对可以使用，一些复杂逻辑去除，只保留任何都可以看懂的模块，不会使用，请移步到查看：https://blog.csdn.net/ACCPluzhiqi/article/details/121166155
Three.js实战常用技巧
04-27
分享课程——Three.js实战常用技巧视频教程，课程一共12章，140多节，结合了很多实战案例，课程主要针对three.js实际开发中常用的一些技巧进行讲解，提供有配套的源码和文档资料下载！希望对那些想提升Three.js技能的朋友有所帮助！
threejs-3d-viewer:3D 查看器 - 由 Threejs 提供支持。 asp.net 上带有打字稿项目的 Angular 种子
06-14
Threejs-示例 3D 查看器 - 由 Threejs 提供支持。 asp.net 123 上带有打字稿项目的 Angular 种子
Three.js资源
u014291990的博客
11-28 4709
Three.js资源 本文是Three.js电子书的学前内容 Three.js库github链接：https://github.com/mrdoob/three.js Three.js官网：https://threejs.org/ Threejs中文文档 Threejs中文文档：http://www.yanhuangxueyuan.com/threejs/docs/index.html Three...
ThreeJs 加载人物模型， 在ios 上显示的时候，偶尔会出现人物贴图加载不出来， 导致模型变成了黑色的
york_饭的博客
04-11 1403
原文链接： 查询了很久， 添加这个参数就好了 注意 ： 在mac 上会导致这个判断是false 状态， 所以要直接看到效果，可以直接把里面的代码提出来 //修复部分纹理随机黑色问题 const IS_IOS = /^(iPad|iPhone|iPod)/.test(window.navigator.platform) || (/^Mac/.test(window.navigator.platform) &&amp
（一）ThreeJS本地环境搭建
轮回的秋
11-14 2059
threeJS API、编辑器、示例代码部署在外网节点，访问不稳定。
Three.JS教程1 环境搭建、场景与相机
编程圈子-谢厂节的博客
01-17 1125
Three.js 是一款基于JavaScript的开源3D图形库，它简化了在Web上创建复杂的3D场景和动画的过程。Three.js 由Ricardo Cabello（也称为mr.doob）于2010年创建，最初是为了填补WebGL技术在那个时候的不足而设计的。随着WebGL的普及和浏览器性能的提升，Three.js逐渐成为Web上3D图形编程的事实标准之一。官网地址： https://threejs.org/
Three.js入门以及案例（全方位解析）
随便写写
01-31 1066
Three.js入门以及案例（全方位解析）之后还会出更多threejs的内容
const intersects: THREE.Intersection<THREE.Mesh<THREE.SphereGeometry, THREE.MeshStandardMaterial>>[] = raycaster.intersectObjects(objectsToTest)的vue2写法是什么
03-07
对于这个问题，我可以回答。在 Vue2 中，你可以将这个代码放在 Vue 实例的 methods 中，然后在模板中调用这个方法。具体的代码如下： ``` methods: { testIntersection() { const intersects = this.raycaster....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值