通过three.js玩转车展项目

1.项目搭建

1.1 创建文件夹

mkdir 文件名

1.2 初始化package.json

npm init -y

1.3 安装打包工具并配置相关依赖

npm i parcel -d

在package.json中打包路径和指令
在这里插入图片描述

1.4 安装three.js

npm i three -d

2.项目搭建

2.1 新建index.html,并再index.html引入car.js,在car.js开始初始化

2.2 在car.js中初始化场景、相机、渲染器器、以及轨道控制器,此时在运行效果如下:

在这里插入图片描述
具体实现:
代码实现

2.3 初始化载入汽车模型和初始化灯光,在init里面调用即可

在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.4 建立多个光带来回移动,并照亮汽车

在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.5 监听视口变化,视口变化时,及时更新相机的宽高比和渲染器的尺寸

在这里插入图片描述

2.6 初始化地板

在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.7 初始化四周墙壁,来使得场景更加真实

在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.9 初始化车身、玻璃的基础材质,通过遍历车的模型节点,区分出什么是车身、玻璃和车门,通过GUI图形用户界面可分别实现车身颜色、玻璃颜色的替换、以及车门开关和车内外视角的转变。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.10 聚光灯初始化,使场景更加真实

在这里插入图片描述
运行效果如下:
在这里插入图片描述

2.11 监听点击事件,判断光线穿过了什么物体,从而实现开关车门的交互

在这里插入图片描述
运行效果如下:
在这里插入图片描述

3. 项目源码地址:

点击跳转源码

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

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

相关文章

从流星雨启程:Python和Pygame下载与安装全过程

文章目录 一、前言二、下载安装过程1.官网下载安装包2.安装python过程第一步第二步第三步第四步第五步安装完成 3.简单测试Python3.1 检查 Python 版本号3.2 打开 Python 解释器3.3 输入你的第一个代码3.4 运行 Python 脚本 4.安装Pygame4.1 cmd命令安装Pygame4.2 pip升级4.3 安…

实战:朴素贝叶斯文本分类器搭建与性能评估

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

Java 快速入门

简介 跨平台性:Java 最大的优势之一就是跨平台性,即一份 Java 程序可以在多平台上运行,而无需重写。 简单易学:Java 的语法和面向对象的开发方式非常简单易学。 安全性:Java 对于安全性的处理非常慎重,对…

接口测试和功能测试

本文主要分为两个部分: 第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者之前的区别与联系。但该部分只交代了怎么做和如何做?并没有解释为什么要做? 第二部分&#xf…

wifi驱动打开双模式

双模式 3.1 开启双模式 在Makefile添加EXTRA_CFLAGS -DCONFIG_CONCURRENT_MODE 重新编译(make之后发现不正常工作,需要make clean清理一下)。 再用sudo rmmod 8821cu.ko,重新启动。出现wlan1: 出现问题&#xff1…

助力打造清洁环境,基于轻量级DETR(DEtectionTRansformer)开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题,公共环境下垃圾投放点都会有固定的值班时间,但是考虑到实际扔垃圾的无规律性,往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题,有些容易扩散的垃圾比…

2024年PMP考试新考纲-PMBOK第七版-项目绩效域真题解析

如何一次性通过PMP考试,取得3A等级的PMP证书?华研荟根据十多年的培训和辅导,以及数千名学员的建议是: 先把PMBOK第六版、第七版和敏捷实践指南的三本官方教材研读一遍(如果觉得自己看书慢,可以看讲解视频&…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)Dispatcher模块的实现思路和定义

(四)Dispatcher模块的实现思路 关于dispatcher,它应该是反应堆模型里边的核心组成部分,因为如果说这个反应堆模型里边有事件需要处理,或者说有事件需要检测,那么是需要通过这个poll、epoll 或者 select来完…

Spring Boot3 Web开发技术

前期回顾 springboot项目常见的配置文件类型有哪些?哪种类型的优先级最高 yml properties yaml 读取配置文件里的数据用什么注解? value restful风格 RESTful 风格与传统的 HTTP 请求方式相比,更加简洁,安全,能隐…

Kind创建k8s - JAVA操作控制

kind 简介kind 架构安装 Kind (必备工具)docker官网kubectl官网kind官网校验安装结果 关于kind 命令 安装一个集群查看当前 Kubernetes 集群中的节点信息。查看当前命名空间下中的Pod(容器实例)的信息。使用 kind create cluster 安装,关于安…

MYSQL一一函数一一流程函数

咱今天讲的是MySQL函数中的流程函数,会有3小题和一个综合案例帮助大家理解 流程函数是很常用的一类函数,可以在SQL语句中实现条件筛选,从而提高语句的效率 小题: ①if语句: select if(flash,ok,error); //如果…

Java之Atomic 原子类总结

Java之Atomic 原子类总结 Atomic 原子类介绍 Atomic 翻译成中文是原子的意思。在化学上,我们知道原子是构成一般物质的最小单位,在化学反应中是不可分割的。在我们这里 Atomic 是指一个操作是不可中断的。即使是在多个线程一起执行的时候,一…

【Java】你掌握了多线程吗?

【文末送书】今天推荐一本Java多线程编程领域新书《一本书讲透Java线程》 摘要 互联网的每一个角落,无论是大型电商平台的秒杀活动,社交平台的实时消息推送,还是在线视频平台的流量洪峰,背后都离不开多线程技术的支持。在数字化转…

FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势

FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势 本章节主要参考书籍《Xilinx Zynq-7000 嵌入式系统设计与实现 基于ARM Cortex-A9双核处理器和Vivado的设计方法 (何宾,张艳辉编著)》 本章节主要讲述FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势,学习笔…

LeetCode刷题--- 优美的排列

个人主页:元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​​​​http://t.cs…

UGUI Panel的显示和隐藏优化

unity UI如何开启(显示)或者关闭(隐藏)Panel界面,相信大家都是知道的,但是如何做最好呢? 可能大家一般开启/关闭界面的方法就是直接SetActive吧。这样做通常是可以的,简答快速地解决…

排序算法--------计数排序

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 ​🎂 作者介绍: 🎂🎂 🎂 🎉🎉&#x1f389…

【Unity】万人同屏高级篇, 自定义BRGdots合批渲染,海量物体目标搜索

博文介绍了最基本的实现原理,有些老板懒得折腾,所以特意熬了几个秃头的夜把RVO、BRG、GPU动画、海量物体目标搜索等高度封装成了开箱即用的插件。 划重点!!此方案是绕开Entities(ECS),不用写一行ECS代码,现…

关于个人Git学习记录及相关

前言 可以看一下猴子都能懂的git入门,图文并茂不枯燥 猴子都能懂的git入门 学习东西还是建议尽可能的去看官方文档 权威且详细 官方文档 强烈建议看一下GitHub漫游指南及开源指北,可以对开源深入了解一下,打开新世界的大门! …

【Jmeter、postman、python 三大主流技术如何操作数据库?】

前言 1、前言 只要是做测试工作的,必然会接触到数据库,数据库在工作中的主要应用场景包括但不限于以下: 功能测试中,涉及数据展示功能,需查库校验数据正确及完整性;例如商品搜索功能 自动化测试或性能测试…