通过three.js玩转车展项目

2023-12-26 00:52
文章标签 项目 js 玩转 three 车展

本文主要是介绍通过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. 项目源码地址:

点击跳转源码

这篇关于通过three.js玩转车展项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/537571

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx