当前位置：首页 > news >正文

Threejs 展示——obj 格式模型导入

news 文章来源：https://blog.csdn.net/qq_53810245/article/details/135842377 2024/11/28 21:35:03

文章目录

- 需求
- 分析
- - 1. HTML版本
  - 2. Vue 版本

需求

导入obj 格式的模型数据

在这里插入图片描述

分析

.obj：Wavefront OBJ 格式，是一种广泛使用的三维模型文件格式。
预览 .obj格式文件的软件可点此下载
需要准备两种格式的数据，如下所示

1. HTML版本

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js OBJ Loader</title><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/three.js/r130/three.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/three.js/r130/loaders/OBJLoader.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/stats.js/r17/Stats.min.js"></script><script src="./main.js"></script>
</body>
</html>

// 创建场景、相机、渲染器等基本组件
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 添加灯光和物体到场景中
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
const loader = new THREE.OBJLoader();
loader.load(// 模型文件路径'./model.obj',// 加载完成后的回调函数function (object) {scene.add(object);},// 加载过程中的回调函数function (xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},// 加载失败时的回调函数function (error) {console.error(error);}
);// 添加性能统计器
const stats = new Stats();
document.body.appendChild(stats.dom);// 渲染场景
function render() {requestAnimationFrame(render);renderer.render(scene, camera);stats.update();
}
render();

在该示例中，我们首先创建了基本的场景、相机和渲染器，并将其添加到页面中。接着，我们使用THREE.OBJLoader加载器加载模型文件。加载完成后，我们将其添加到场景中。

需要注意的是，在加载模型文件之前，你需要确保OBJLoader加载器已经被引入。在本示例中，我们使用了CDN方式引入了Three.js和OBJLoader.js文件，你也可以通过其他方式进行引入。当然，也可以将代码放置到同一个文件中，避免多次引入。

2. Vue 版本

<template><div id="three-canvas"></div>
</template>
<script>
// import { Color, MOUSE, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { AmbientLight, Color, MOUSE, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";export default {name: "index",data () {return {camera: null,  //相机对象scene: null,  //场景对象renderer: null,  //渲染器对象mesh: null,  //网格模型对象Mesh}},mounted () {this.init()this.$nextTick(() => {this.createModel()})},methods: {createModel () {let tht = thisconst onProgress = function (xhr) {if (xhr.lengthComputable) {const percentComplete = xhr.loaded / xhr.total * 100console.log(Math.round(percentComplete, 2) + '% downloaded')}}new MTLLoader().setPath('/static/obj/').load('male02.mtl', function (materials) {console.log("MTLLoader", materials)materials.preload()new OBJLoader().setMaterials(materials).setPath('/static/obj/').load('male02.obj', function (obj) {obj.position.set(5, 5, 5)obj.scale.set(0.1, 0.1, 0.1)tht.scene.add(obj)}, onProgress)})},init () {let container = document.getElementById('three-canvas')this.renderer = new WebGLRenderer({//开启抗锯齿antialias: true})//将渲染器挂载到domcontainer.appendChild(this.renderer.domElement)this.renderer.setSize(container.offsetWidth, container.offsetHeight, true)//实例化场景this.scene = new Scene()this.scene.background = new Color('#88B9DD')//实例化相机this.camera = new PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 1000)//设置相机位置this.camera.position.set(50, 50, 50)//设置相机看先中心点this.camera.lookAt(new Vector3(0, 0, 0))//设置相机自身方向this.camera.up = new Vector3(0, 1, 0)//初始化轨道控制器let orbitControls = new OrbitControls(this.camera, this.renderer.domElement)//设置鼠标功能键orbitControls.mouseButtons = {//左键无功能LEFT: null,//中键缩放MIDDLE: MOUSE.DOLLY,//右键旋转RIGHT: MOUSE.ROTATE}//添加环境光const ambientLight = new AmbientLight('rgb(255,255,255)', 0.8)this.scene.add(ambientLight)let animate = () => {this.renderer.render(this.scene, this.camera)requestAnimationFrame(animate)}animate()},}
}
</script>
<style scoped>
#three-canvas {/* width: 100%; *//* height: 600px; *//* overflow: hidden; *//* background-color: #88B9DD; */
}
</style>

Threejs 展示——obj 格式模型导入

文章目录需求分析1. HTML版本2. Vue 版本需求导入obj 格式的模型数据分析 .obj：Wavefront OBJ 格式，是一种广泛使用的三维模型文件格式。预览 .obj格式文件的软件可点此下载需要准备两种格式的数据，如下所示 1. HTML版本 html <!…...

编程日记 2024/1/27 15:04:41

深入浅出 diffusion(3)：pytorch 实现 diffusion 中的 U-Net

导入python包 import mathimport torch import torch.nn as nn import torch.nn.functional as F silu激活函数 class SiLU(nn.Module): # SiLU激活函数staticmethoddef forward(x):return x * torch.sigmoid(x) 归一化设置 def get_norm(norm, num_channels, num_groups)…...

编程日记 2024/1/27 15:01:39

C#使用RabbitMQ-2_详解工作队列模式

简介 🍀RabbitMQ中的工作队列模式是指将任务分配给多个消费者并行处理。在工作队列模式中，生产者将任务发送到RabbitMQ交换器，然后交换器将任务路由到一个或多个队列。消费者从队列中获取任务并进行处理。处理完成后，消费者可以向…...

编程日记 2024/1/27 15:00:38

Day37 56合并区间 738单调递增的数字 968监控二叉树

56 合并区间给出一个区间的集合，请合并所有重叠的区间。示例 1: 输入: intervals [[1,3],[2,6],[8,10],[15,18]]输出: [[1,6],[8,10],[15,18]]解释: 区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6]. class Solution { public:vector<vector<int>>…...

编程日记 2024/1/27 14:56:34

【Android】在WSA安卓子系统中进行新实验性功能试用与抓包（2311.4.5.0）

前言在根据几篇22和23的WSA抓包文章进行尝试时遇到了问题，同时发现新版Wsa的一些实验性功能能优化抓包配置时的一些步骤，因而写下此篇以作记录。 Wsa版本：2311.40000.5.0 本文出现的项目： MagiskOnWSALocal MagiskTrustUserCer…...

编程日记 2024/1/27 14:53:30

【服务器】服务器的管理口和网口

服务器通常会有两种不同类型的网络接口，即管理口（Management Port）和网口（Ethernet Port），它们的作用和用途不同。一、管理口管理口通常是用于服务器管理的网络接口，也被称为外带网卡或带外接…...

编程日记 2024/1/27 14:51:28

一个小例子，演示函数指针

结构体里经常看到函数指针的写法，函数指针其实就是函数的名字。但是结构体里你要是直接把一个函数摆上去，那就变成成员变量，就会发生混乱 1. 函数指针 #include <unistd.h> #include <stdio.h>struct Kiwia{void (*func)(int )…...

编程日记 2024/1/27 14:50:27

python12-Python的字符串之使用input获取用户输入

input()函数用于向用户生成一条提示，然后获取用户输入的内容。由于input0函数总会将用户输入的内容放入字符串中，因此用户可以输入任何内容，input()函数总是返回一个字符串。例如如下程序。 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2024/01# @Author : Lao…...

编程日记 2024/1/27 14:49:26

【代码随想录-数组】移除元素

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结 jav…...

编程日记 2024/1/27 14:47:24

springboot事务管理

/*spring事务管理注解:Transactional位置:业务(service)层的方法上、类上、接口上作用:将当前方法交给spring进行事务管理，方法执行前，开启事务:成功执行完毕，提交事务:出现常，回滚事务需要在配置文件是加上开启spring事务yml文件…...

编程日记 2024/1/27 14:42:20

数据结构——链式二叉树（2）

目录 🍁一、二叉树的销毁 🍁二、在二叉树中查找某个数，并返回该结点 🍁三、LeetCode——检查两棵二叉树是否相等 🌕（一）、题目链接：100. 相同的树 - 力扣（LeetCode&a…...

编程日记 2024/1/27 14:41:19

spring-boot-starter-validation常用注解

文章目录一、使用二、常用注解三、Valid or Validated ？四、分组校验1. 分组校验的基本概念2. 定义验证组3. 应用分组到模型4. 在控制器中使用分组5. 总结一、使用要使用这些注解，首先确保在你的 Spring Boot 应用的 pom.xml 文件中添加了 spring-bo…...

编程日记 2024/1/27 14:40:18

AF700 NHS 酯，AF 700 Succinimidyl Ester，一种明亮且具有光稳定性的近红外染料

AF700 NHS 酯，AF 700 Succinimidyl Ester，一种明亮且具有光稳定性的近红外染料，AF700-NHS-酯，具有水溶性和 pH 值不敏感性您好，欢迎来到新研之家文章关键词：AF700 NHS 酯，AF 700 Succinimid…...

编程日记 2024/1/27 14:35:14

C#常见内存泄漏

背景在开发中由于对语言特性不了解或经验不足或疏忽，往往会造成一些低级bug。而内存泄漏就是最常见的一个，这个问题在测试过程中，因为操作频次低，而不能完全被暴露出来；而在正式使用时，由于使用次数增加&…...

编程日记 2024/1/27 14:33:12

Xmind安装到指定目录

Xmind安装到指定目录默认情况下安装包自动引导安装在C盘（注册表默认位置） T1:修改注册表，比较麻烦 T2:安装时命令行指定安装位置，快捷省事 1）下载安装包（exe可执行文件） 2）安装…...

编程日记 2024/1/27 14:31:09

[GXYCTF2019]BabyUpload1

尝试各种文件，黑名单过滤后缀ph，content-type限制image/jpeg 内容过滤<?，木马改用<script languagephp>eval($_POST[cmdjs]);</script> 上传.htaccess将上传的文件当作php解析蚁剑连接得到flag...

编程日记 2024/1/27 14:30:09

SpringBoot之分页查询的使用

背景在业务中我们在前端总是需要展示数据，将后端得到的数据进行分页处理，通过pagehelper实现动态的分页查询，将查询页数和分页数通过前端发送到后端，后端使用pagehelper，底层是封装threadlocal得到页数和分页数并动态…...

编程日记 2024/1/27 14:29:08

【shell-10】shell实现的各种kafka脚本

kafka-shell工具背景日志 log一.启动kafka->(start-kafka)二.停止kafka->(stop-kafka)三.创建topic->(create-topic)四.删除topic->(delete-topic)五.获取topic列表->(list-topic)六. 将文件数据录入到kafka->(file-to-kafka)七.将kafka数据下载到文件-&g…...

编程日记 2024/1/27 14:24:04

【模型压缩】模型剪枝详解

参考链接：https://zhuanlan.zhihu.com/p/635454943 https 文章目录 1. 前言1.1 为什么要进行模型剪枝1.2 为什么可以进行模型剪枝2. 剪枝方式的几种分类2.1 结构化剪枝和非结构化剪枝2.1.1 结构化剪枝2.1.2 非结构化剪枝2.2 静态剪枝与动态剪枝2.2.1 静态剪枝2.2.2 动态剪枝…...

编程日记 2024/1/27 14:23:03

Log4j2-01-log4j2 hello world 入门使用

拓展阅读 Log4j2 系统学习 Logback 系统学习 Slf4j Slf4j-02-slf4j 与 logback 整合 SLF4j MDC-日志添加唯一标识分布式链路追踪-05-mdc 等信息如何跨线程? Log4j2 与 logback 的实现方式日志开源组件（一）java 注解结合 spring aop 实现自动输…...

编程日记 2024/1/27 14:22:01

Mysql-日志介绍日志配置

环境部署 docker run -d -p 3306:3306 --privilegedtrue -v $(pwd)/logs:/var/lib/logs -v $(pwd)/conf:/etc/mysql/conf.d -v $(pwd)/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD654321 --name mysql mysql:5.7运行指令的目录下新建好这些文件： 日志类型日…...

编程日记 2024/1/27 14:15:55

计算机网络的体系结构的各层在整个过程中起到什么作用？

ps：本文章的图片内容来源都是来自于湖科大教书匠的视频，声明：仅供自己复习，里面加上了自己的理解这里附上视频链接地址：1.6 计算机网络体系结构（4）—专用术语_哔哩哔哩_bilibili 目录 &#x…...

编程日记 2024/1/27 14:14:54

如何在业务代码中优雅的使用策略模式？

策略模式介绍假设你正在开发一个电商平台，其中涉及到商品的折扣策略。优惠策略有很多种可能，如领取优惠券抵扣、返现促销、拼团优惠等。最初的实现可能会在购物车类中嵌入各种折扣逻辑，导致代码的可维护性和扩展性下降。下面代码在业务开…...

编程日记 2024/1/27 14:13:53

“docker-credential-desktop.exe“: executable file not found in $PATH 错误解决

"docker-credential-desktop.exe": executable file not found in $PATH 错误解决 1. 错误信息和解决方法 1. 错误信息和解决方法错误信息， error getting credentials - err: exec: "docker-credential-desktop.exe": executable file not …...

编程日记 2024/1/27 14:12:52

openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs

文章目录 openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs概述笔记END openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_…...

编程日记 2024/1/27 14:11:51

长虹智能电视6000iD、6080iD、3000iD、U2系列等 ZLM61HiPJ机芯升级刷机方法，附刷机数据

机芯：ZLM61HiPJ 适用机型：UD39B6000iD、UD42B6000iD、UD50B6000iD、UD55B6000iD、UD42C6000iD、UD42C6080iD、UD49C6000iD、UD49C6080iD、UD55C6000iD、UD55C6080iD、UD50C6000iD、UD58C3000iD、42U2 LE42C19S-UD、LE50C29SD-UD、 UD49C6000iD(LJM2W)、…...

编程日记 2024/1/27 14:10:50

六、VTK创建平面vtkPlaneSource

vtkPlaneSource创建位于平面中的四边形数组先看看效果图： vtkPlaneSource 创建一个 m x n 个四边形数组，这些四边形在平面中排列为规则平铺。通过指定一个原点来定义平面，然后指定另外两个点，这两个点与原点一起定义平面的两个轴。这些轴不必是正交的 - 因此您可以创建平行…...

编程日记 2024/1/27 14:05:46

LiveGBS流媒体平台GB/T28181常见问题-如何配置使用自己已有的redis服务替换redis版本升级redis版本

LiveGBS如何配置使用自己已有的redis服务替换redis版本升级redis版本 1、Redis服务2、如何切换REDIS?2.1、停止启动REDIS2.2、配置信令服务2.3、配置流媒体服务2.4、启动 3、搭建GB28181视频直播平台 1、Redis服务在LivGBS中Redis作为数据交换、数据订阅、数据发布的高速缓存…...

编程日记 2024/1/27 14:03:45

stm32产品架构

文章目录前言一、pandas是什么？二、使用步骤 1.引入库2.读入数据总结前言起因是我在看野火的ucosiii，然后他是基于i.mx芯片。然后我就很疑惑i.mx是什么芯片，看了下好像是ARM-M7(或者叫ARMCM7)架构的芯片。然后我又疑惑ARM-M7又是什么架…...

编程日记 2024/1/27 13:58:41

数据结构——双链表

双链表中节点类型的描述： 双链表的初始化（带头结点） 、双链表的插入操作后插操作 InsertNextDNode(p, s): 在p结点后插入s结点按位序插入操作： 思路：从头结点开始，找到某个位序的前驱结点&#xff…...

编程日记 2024/1/27 13:51:33

建设高流量网站/长春网站开发

文章目录一、eBPF编程接口1.1 系统调用bpf(2)1.2 eBPF的系统调用命令1.3 eBPF的程序类型1.4 eBPF使用的数据结构（Map映射）1.5 eBPF辅助函数/BPF API的作用？有哪些？1.6 eBPF并发控制1.7 eBPF的sysfs接口1.8 BTF、CO-RE是BPF工具的未…...

编程日记 2024/11/28 19:28:12

杭州网站建设专家/网推软件有哪些

方法一： 求余数 x%2 0 为偶数方法二： 位运算 & x & 1 0为偶数。原因：在计算机系统中，数值一律用补码来表示和存储。正整数的补码和原码相同。二进制转十进制时，可以表示成a*2^nb*2^n-1.....。其中最后一位…...

编程日记 2024/11/28 16:34:31

扬州品牌网站设计/网络营销活动案例

每到节假日，景区就会满是游客，在售票、入园等位置出现排长队的情况。随着科技的发展，大数据、人工智能等技术逐渐在旅游行业落地应用，如人脸识别进入景区应用，提升旅客的旅行体验。那么人脸识别系统在景区应用&#xf…...

编程日记 2024/11/28 14:52:29

php做网站要用到的技术/seo属于什么职位类型

var testString "There are 3 cats but 4 dogs."; var expression /\d/g; var digitCount testString.match(expression).length; //特殊选择器中的一种就是数字选择器\d，意思是被用来获取一个字符串的数字。 //在JavaScript中, 数字选择器类似于: /\d…...

编程日记 2024/11/28 10:24:32

已有域名怎么做网站/市场调研的方法有哪些

方法一： srand(time(NULL));array->removeAllObjects(); this->removeAllChildren(); init();方法二：CCDirector::sharedDirector()->replaceScene(HelloWorld::scene());从本场景切换到本场景，但是不能在init()函数中。。转载于:h…...

编程日记 2024/11/28 10:16:23

wordpress怎么上传/搜狗搜索网

vim文本编辑及文件查找详解vim编辑器深入讲解vim编辑器高效用法进阶文件查找命令企业级应用Linux特殊权限及facl扩展vim编辑器深入讲解 vim编辑器文本编辑器：文本：纯文本，ASCII text；Unicode；文本编辑种类&#xff…...

编程日记 2024/11/28 9:24:55

文章目录

需求

分析

1. HTML版本

2. Vue 版本

相关文章：