通过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

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

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

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