使用Three.js开发一个3D案例Demo

使用Three.js开发一个3D案例

最近在找工作,发现好多招聘要求都需要会Three.js,以前接触比较多的是2D开发,也就是平面开发,用到的做多的技术就是d3.js,现在3D开发已经成为了大势所趋,所以就学习下Three.js。这是一个简单的demo。

工程目录结构

这是我的工程目录结构:
在这里插入图片描述

教程

第一步,准备一个空文件夹

创建一个空文件夹demo

第二步,npm初始化

在该文件夹下执行npm init,初始化工程。

在这里插入图片描述

第三步,安装three.js包

在项目根目录下执行下面命令:

npm install three@0.148.0 --save

在这里插入图片描述

第四步,敲代码环节

在根目录下创建index.html,然后跟着敲…

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="container"></div>
</body>
<script src="./node_modules/three/build/three.js"></script><script>const scene = new THREE.Scene()const geometry = new THREE.BoxGeometry(100, 100, 100)//创建一个材质对象Materialconst material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000设置材质颜色为红色});const mesh = new THREE.Mesh(geometry, material)  // 网格模型对象meshmesh.position.set(0, 10, 0)scene.add(mesh)// 实例化一个透视投影相机对象const camera = new THREE.PerspectiveCamera()// 相机在Three.js三维坐标系中的位置camera.position.set(200, 200, 200)// 相机观察目标指向Three.js 3D空间中的某个位置camera.lookAt(0, 0, 0)  // 坐标原点camera.lookAt(0, 0, 0) // y轴上位置10camera.lookAt(mesh.position)  // 指向mesh对应的位置// 定义相机输出画布的尺寸(单位:像素px)const width = 600const height = 600// 30:视场角度, width/height: Canvas 画布宽高比, 1:近裁截面,3000:远裁截面// const camera = new THREE.PerspectiveCamera(20, width / height, 1, 3000)// 创建渲染器对象const renderer = new THREE.WebGLRenderer()// 设置 three.js 渲染区域的尺寸renderer.setSize(width, height)renderer.render(scene, camera)document.body.appendChild(renderer.domElement)document.getElementById('container').appendChild(renderer.domElement);</script></html>
第五步,运行

创建本地静态服务器,在项目根目录下执行:

live-server

(PS:我这块用的是live-server,也可以用其它的,根据自己的环境来)

效果

来看看效果,创建的是一个长方体。
在这里插入图片描述

(PS: 我这块用的是live-server,也可以用其它的,根据自己的环境来)

总结

做过2D平面开发和有点数学基础的都知道,二维坐标系只有X轴,Y轴,3D开发就是比2D开发多了一个Z轴,使用三维坐标构建几何世界。还有就是把我们2D可视化的元素换成立体的几何元素,比如:矩形换成了长方体,圆换成了球体…还有圆锥体,圆柱体等。所以说,技术本身并不复杂,难的是对其技术本身的理解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/832828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

typescript综合练习1(展开音乐播放列表)

Playlist Soundness What’s up, friend?! I’m so pumped you’re joining us. We’ve got a sick project we could totally use your help on! See, someone’s giving us amazing recommendations for songs to play. But they’re not just coming in as songs. Someti…

AtCoder Beginner Contest 336 D题 Pyramid

D题&#xff1a;Pyramid 标签&#xff1a;动态规划、前缀和题意&#xff1a;金字塔型序列&#xff1a; 1 、 2... k − 1 、 k 、 k − 1...2 、 1 1、2...k-1、k、k-1...2、1 1、2...k−1、k、k−1...2、1。给定一个长度为 n n n的序列 a i a_i ai​&#xff0c;可以进行重复…

MySQL入门学习-关系型数据库.数据库

MySQL是一种关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;也是一种开源数据库。关系型数据库是一种以表格形式存储数据的数据库&#xff0c;数据之间通过键值关联起来。 一、MySQL具有以下特点&#xff1a; 1. 可扩展性&#xff1a; MySQL可以在不同的操作…

物料厘不清?企业如何做好“物料管理”

物料包括原材料、半成品、成品、辅助用品以及生产过程中必然产生的边角余料、废料等。在制造企业中&#xff0c;各个部门的业务流程几乎都要用到物料&#xff1a; 销售和订单录入部门要通过物料确定客户定制产品的构形&#xff1b; 计划部门要根据物料来计划物料和能力的需求…

js遍历数组将数组中属性名相同的属性值组成新的数组再转化成字符串并换行(js换行和html换行不同)

{label: 告警结果,display:true, html:true,formatter:(row)>{let list ""if(row.funRes&&row.funRes.length){let propName value; list row.funRes.map(obj > {return <span style"vertical-align: text-top;padding-right: 2px;">…

使用Flink SQL实时入湖Hudi/Hive

文章目录 1 Hudi 简介2 COW和MOR3 接入COW模式Hudi表4 使用Flink SQL查看新接表5 使用Hive查看新接表6 总结 1 Hudi 简介 Hudi是一个流式数据湖平台&#xff0c;使用Hudi可以直接打通数据库与数据仓库&#xff0c;连通大数据平台&#xff0c;支持对数据增删改查。Hudi还支持同…

如何应对访问国外服务器缓慢的问题?SDWAN组网是性价比之选

访问国外服务器缓慢通常由以下原因造成&#xff1a; 1、政策限制&#xff1a;我国管理互联网&#xff0c;限制部分国外网站和服务器&#xff0c;以维护国家安全稳定。 2、技术障碍&#xff1a;国内与国际互联网的网络架构和协议存在差异&#xff0c;可能导致数据传输不兼容。 …

数据结构——图的基础知识与其表示

一&#xff1a;定义 由顶点的集合和边的集合组成&#xff1b;常以 G(V,E) 表示&#xff0c;G 代表图&#xff0c;V代表 顶点的集合&#xff0c;E代表边的集合&#xff1b; 如图&#xff1a; 在G1图中&#xff0c;有 0~4 五个顶点&#xff0c;有 0-1&#xff0c;0-2&…

Tomcat同时支持http及https

Tomcat同时支持http及https 1、Tomcat同时支持http及https2、Springboot同时支持http及https 1、Tomcat同时支持http及https <Connector port"8443" protocol"org.apache.coyote.http11.Http11NioProtocol" maxThreads"150" SSLEnabled"…

V23 中的新功能:LEADTOOLS 展示了它的 EXCEL-lence

LEADTOOLS (Lead Technology)由Moe Daher and Rich Little创建于1990年&#xff0c;其总部设在北卡罗来纳州夏洛特。LEAD的建立是为了使Daher先生在数码图象与压缩技术领域的发明面向市场。在过去超过30年的发展历程中&#xff0c;LEAD以其在全世界主要国家中占有的市场领导地位…

苹果自研大语言模型“Ajax“ 助力iOS 18升级;Stack Overflow与OpenAI建立API合作伙伴关系

&#x1f989; AI新闻 &#x1f680; 苹果自研大语言模型"Ajax" 助力iOS 18升级 摘要&#xff1a;苹果公司预计通过自研大语言模型Ajax来为iOS 18和Siri带来重大升级&#xff0c;但不计划推出类似ChatGPT的AI聊天机器人。Ajax模型基于Google的Jax框架&#xff0c;并…

深度学习之基于YOLOv5目标检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着深度学习技术的快速发展&#xff0c;目标检测在多个领域中的应用日益广泛&#xff0c;包括…

filezilla 上传文件到服务器

1. 下载windows ftp客户端 https://filezilla-project.org/index.php 点击左侧的 Download FileZilla Client All platforms 默认安装。 2. 双击打开 filezilla 按图中填写&#xff0c;并上传。 主机名: 10.20.89.* 用户名: zhuzh 密码: *** 端口: 22 点击 快速连接&#…

中电金信:金Gien乐道 | 4月要闻速览,精彩再回顾

中国电子党组副书记、总经理李立功一行调研中电金信 4月10日&#xff0c;中国电子党组副书记、总经理李立功一行赴中电金信进行调研&#xff0c;深入听取了中电金信经营发展情况、研发工作及“源启”行业数字底座平台的汇报&#xff0c;并参观了公司展厅和科技研发场所&#xf…

定性分析和定量分析

目录 一、什么是定性分析和定量分析 二、定性分析和定量分析的区别 三、常用分析方法 3.1 常用定性分析方法 3.2 常用定量分析方法 一、什么是定性分析和定量分析 定性研究方法是根据社会现象或事物所具有的属性和在运动中的矛盾变化&#xff0c;从事物的内在规定性来研究…

hadoop---基于Hive的数据仓库相关函数机制及其优化方案

Hive相关函数&#xff08;部分&#xff09;&#xff1a; if函数: 作用: 用于进行逻辑判断操作 语法: if(条件, true返回信息,false返回信息) 注意: if函数支持嵌套使用 select if(aa,’bbbb’,111) fromlxw_dual; bbbb select if(1<2,100,200) fromlxw_dual; 200nvl函数:…

矿山机械自动化中的激光雷达技术探索

在矿山机械自动化技术的快速发展中&#xff0c;激光雷达技术作为其关键组成部分&#xff0c;正发挥着越来越重要的作用。本文将深入探讨激光雷达在矿山机械自动化中的应用&#xff0c;以及其所面临的挑战与未来发展趋势。 一、激光雷达在矿山机械自动化中的应用 激光雷达技术…

Java中的maven的安装和配置

maven的作用 依赖管理 方便快捷的管理项目依赖的资源&#xff0c;避免版本冲突问题 统一项目管理 提供标准&#xff0c;统一的项目结构 项目构建 标准跨平台&#xff08;Linux、windows、MacOS&#xff09;的自动化项目构建方式 maven的安装和配置 在maven官网下载maven Ma…

SAP-ABAP-搜索帮助03

一、搜索帮助有两种&#xff1a; 1、外键/检查表&#xff1a;基于个表的&#xff0c;数据有效性检测。 2、SE11手工创建搜索帮助&#xff1a;基于数据元素的&#xff0c;纯帮助&#xff0c;无校验。 二、创建搜索帮助 1、外键/检查表 例如学员考勤表&#xff0c;包括学院的…

2015-2016 ACM-ICPC Southwestern Europe Regional Contest (SWERC 15) A.Promotions

Promotions 题目描述 The Fair Inc. administration decided to promote the best employees and limited the number of promotions to a fixed interval [A, B]. The directors compared the employees’ performance and their evaluations resulted in a consistent prec…