threejs零基础搭建3D可视化汽车展厅

前置知识(最下面有完整代码)

每个代码都有注释,零基础也能看懂
中文官方文档教程

创建项目

创建空文件夹

执行如下命令初始化package.json文件

npm init -y

安装threejs包

yarn add three

安装tween.js动画库,用于做动画
tweenjs文档

yarn add @tweenjs/tween.js

安装gui调试工具

lil-gui官方文档

yarn add lil-gui

使用parcel工具打包执行项目

官方网站

yarn global add parcel-bundler

根目录下创建src/index.html

这个链接的资料,点击下载到scr文件夹内部,它是个public文件夹,将其下载下来放到scr文件夹内部

初始化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></body>
</html>

package.json里面配置启动命令(后面的是启动文件路径)

增加type:module

{"name": "demo","version": "1.0.0","description": "","type": "module","main": "index.js","scripts": {"dev": "parcel src/index.html","build": "parcel build src/index.html"},"keywords": [],"author": "","license": "ISC","dependencies": {"three": "^0.166.1"}
}

src下新建app.jsindex.html里面引入一下

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>My First Parcel App</title><style>* {padding: 0;margin: 0;}</style>
</head><body><script src="./app.js"></script>
</body></html>

使用yarn run dev启动项目

双击启动后的网址,查看页面

在这里插入图片描述

能访问到网页就说明配置正常

案例一(设置几何体及其材质)

案例代码

后续所有操作都在app.js内部写

一切物体都身处一个场景内,即使3D页面也是如此

// 引入three.js
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 引入材质纹理图片,用于设置正方体纹理
import pkq from './public/pkq1.jpg'
// 引入动画库插件
import TWEEN from '@tweenjs/tween.js'// 全局变量
let scene, camera, renderer, controls, cube// 初始化场景
function initScene () {// 创建场景scene = new THREE.Scene()
}// 初始化相机
function initCamera () {// 参数一:夹角,参数二:宽高比,参数三:近裁剪面,参数四:远裁剪面camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)// 设置相机位置(x,y,z)// camera.position.set(0, 0, 10);// 也可以// camera.position.z = 10// 设置相机方向(指向的场景)camera.lookAt(scene.position)
}// 初始化渲染器
function initWebGL () {// 设置渲染器renderer = new THREE.WebGLRenderer()// 设置渲染器的尺寸renderer.setSize(window.innerWidth, window.innerHeight)// 将渲染器添加到bodydocument.body.appendChild(renderer.domElement)
}// 添加坐标系
function initAxis () {// 参数一:场景,参数二:坐标系长度let axis = new THREE.AxesHelper(3)// 将坐标系添加到场景中scene.add(axis)
}// 添加轨道控制器(可以滑动屏幕和缩放屏幕)
function initTrackballControls () {// 参数一:相机,参数二:渲染器let trackballControls = new OrbitControls(camera, renderer.domElement)// 添加控制器scene.add(trackballControls)
}// 创建立方体
function initCube () {// 创建几何体形状let geometry = new THREE.BoxGeometry(1, 1, 1)// 设置图片纹理let texture = new THREE.TextureLoader().load(pkq)// 创建材质颜色let material = new THREE.MeshBasicMaterial({color: 'yellow',map: texture})// 创建网格cube = new THREE.Mesh(geometry, material)// 将网格添加到场景中scene.add(cube)
}// 主函数
function main () 

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

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

相关文章

电子印章生成器在线制作免费工具

电子印章生成器在线制作免费工具 电子印章生成器是一种在线工具&#xff0c;用户可以通过它快速生成各种类型的电子印章。输入文字即可制作电子印章&#xff0c;并且支持下载透明无背景的PNG格式图。可以自定义印章的文字、颜色、老化、边线等参数&#xff0c;并选择本地字体或…

第2章-数学建模

目录 一、数据类型 【函数】&#xff1a; &#xff08;1&#xff09;find()、rfind()、index()、rindex()、count() &#xff08;2&#xff09;split()、rsplit() &#xff08;3&#xff09;join() &#xff08;4&#xff09;strip()、rstrip()、lstrip() &#xff08;5&…

怎样使用 Juicer tools 的 dump 命令将.hic文件转换为交互矩阵matrix计数文件 (Windows)

创作日志&#xff1a; 万恶的生信…一个scHiC数据集没有提供处理好的计数文件&#xff0c;需要从.hic转换。Github一个个好长的文档看了好久才定位到 juicer tools 的dump命令&#xff0c;使用起来比想象中简单。 一、下载Juicer tools 注意&#xff1a;使用Juicer tools的前提…

vxe-table——实现切换页码时排序状态的回显问题(ant-design+elementUi中table排序不同时回显的bug)——js技能提升

之前写的后台管理系统&#xff0c;都是用的antdelement&#xff0c;table组件中的【排序】问题是有一定的缺陷的。 想要实现的效果&#xff1a; antv——table组件一次只支持一个参数的排序 如下图&#xff1a; 就算是可以自行将排序字段拼接到列表接口的入参中&#xff0c…

Qt实战:专栏内容介绍及目录

1、专栏介绍 Qt相比Visual Studio (VS) 的优势主要体现在跨平台能力、‌丰富的功能、‌高性能、‌现代UI设计、‌社区支持和企业支持等方面。‌ 跨平台能力&#xff1a;‌Qt 允许应用程序在多个操作系统上编译和运行&#xff0c;‌无需为每个平台编写特定的代码&#xff0c;‌…

设计模式第二天|设计模式创建型:工厂模式、抽象工厂模式、单例模式、建造者模式

文章目录 设计模式的分类工厂模式简单工厂定义核心俗话说优点缺点具体实现 工厂模式&#xff08;Spring IOC控制反转&#xff09;定义核心**组成****俗话说****实现思路****具体实现****使用场景** 抽象工厂模式**前提概念****定义****缺点****具体实现** 单例模式**定义****俗…

Django学习第一天(如何创建和运行app)

前置知识&#xff1a; URL组成部分详解&#xff1a; 一个url由以下几部分组成&#xff1a; scheme&#xff1a;//host:port/path/?query-stringxxx#anchor scheme:代表的是访问的协议&#xff0c;一般为http或者ftp等 host&#xff1a;主机名&#xff0c;域名&#xff0c;…

《低代码指南》——Oracle APEX : AI在低代码开发中的创新应用

在低代码开发领域,我们正在目睹人工智能(AI)集成所带来的显著进展。Oracle公司最新推出的APEX 24.1版本,便是这一趋势的明显体现,其集成的AI功能旨在极大提高开发者的生产力,同时简化应用程序的创建过程。 Contents 将变革性的AI整合到低代码平台 将AI技术引入低代码平台…

二、BIO、NIO、直接内存与零拷贝

一、网络通信编程基础 1、Socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;是一组接口&#xff0c;由操作系统提供&#xff1b; Socket将复杂的TCP/IP协议处理和通信缓存管理都隐藏在接口后面&#xff0c;对用户来说就是使用简单的接口进行网络应用编程…

MySQL定时备份数据,并上传到oss

1.环境准备 1.安装阿里云的ossutil 2.安装mysql 2.编写脚本 脚本内容如下 #!/bin/bash # 数据库的配置信息&#xff0c;根据自己的情况进行填写 db_hostlocalhost db_usernameroot db_passwordroot db_namedb_root # oss 存贮数据的bucket地址 bucket_namerbsy-backup-buck…

SpringBoot:SpringBoot通过注解监测Controller接口

一、前言 在Spring Boot中&#xff0c;度量指标&#xff08;Metrics&#xff09;是监控和诊断应用性能与行为的重要工具。Spring Boot通过集成Micrometer和Spring Boot Actuator&#xff0c;提供了强大的度量指标收集与暴露功能。 二、度量指标 1. Micrometer Micrometer是一…

基于FPGA的以太网设计(2)----以太网的硬件架构(MAC+PHY)

1、概述 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成,示意图如下所示: 需要注意的是,上图是一个简化了的模型,它描述的是两台主机之间的直接连接,但在实际应用中基本都是多台主机构成的局域网,它们之间并不直接相连,而是通过交换机Switch来进行…

Linux云计算 |【第一阶段】SERVICES-DAY5

主要内容&#xff1a; 源码编译安装、rsync同步操作、inotify实时同步、数据库服务基础 实操前骤&#xff1a;&#xff08;所需tools.tar.gz与users.sql&#xff09; 1.两台主机设置SELinnx和关闭防火墙 setenforce 0 systemctl stop firewalld.service //停止防火墙 sy…

scss基本语法---嵌套、循环、条件(@for,@if),混入@mixin,继承@extend,导入@import,

scss是css预编译器&#xff0c;可以简化css代码的书写&#xff0c;并可以编译成css文件使用&#xff1b; 有关scss的安装使用可以参考&#xff1a;Sass语法---sass的安装和引用_引入sass-CSDN博客 嵌套、循环、条件&#xff08;for,if&#xff09; 嵌套 scss支持选择器的嵌套…

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换

Launcher 作为系统人机交互的首要入口&#xff0c;提供应用图标的显示、点击启动、卸载应用&#xff0c;并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板&#xff0c;以通过Launcher修改桌面背景…

python一维表转二维表

一维表转二维表 import pandas as pd # 读取数据 product_df pd.read_csv(rD:\excelFile\practice\物品属性值一维表.csv,encodingutf-8) # print(product_df)# 将一维表转变二维 s pd.Series(list(product_df[属性值]),index[product_df[物品编号],product_df[属性名]]) …

TQSDRPI开发板教程:实现PL端的UDP回环与GPSDO

本教程将完成一个全面的UDP运行流程与GPSDO测试&#xff0c;从下载项目的源代码开始&#xff0c;通过编译过程&#xff0c;最终将项目部署到目标板卡上运行演示。此外&#xff0c;我们还介绍如何修改板卡的IP地址&#xff0c;以便更好地适应您的网络环境或项目需求。 首先从Gi…

使用nginx实现一个端口和ip访问多个vue前端

前言&#xff1a;由于安全组要求&#xff0c;前端页面只开放一个端口&#xff0c;但是项目有多个前端&#xff0c;此前一直使用的是一个前端使用单独一个端口进行访问&#xff0c;现在需要调整。 需要实现&#xff1a;这里以80端口为例&#xff0c;两个前端分别是&#xff1a;p…

Zabbix监控系统:zabbix服务部署+基于Proxy分布式部署+zabbix主动与被动监控模式

一、Zabbix概述 1.1 简介 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix 能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff0c;提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(三)基变换与坐标变换;微分方程;李群和李代数;雅可比矩阵

一、基变换与坐标变换 字小,事不小。 因为第一反应:坐标咋变,坐标轴就咋变呀。事实却与我们想象的相反。这俩互为逆矩阵。 第一次读没有读明白,后面到事上才明白。 起因是多传感器标定:多传感器,就代表了多个坐标系,多个基底。激光雷达和imu标定。这个标定程序,网上,…