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

news2024/11/19 3:40:52

文章目录

    • 需求
    • 分析
      • 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>
  • js
// 创建场景、相机、渲染器等基本组件
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 = this
            const onProgress = function (xhr) {
                if (xhr.lengthComputable) {
                    const percentComplete = xhr.loaded / xhr.total * 100
                    console.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
            })
            //将渲染器挂载到dom
            container.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>

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

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

相关文章

电脑和手机连接酒店的wifi,网络不通导致charles无法抓手机的包

查看苹果手机&#xff0c;连wifi后的ip地址 电脑去ping 手机的ip地址&#xff0c;发现ping不通 解决方案&#xff1a; 应该是酒店wifi的问题&#xff0c;让朋友开个手机热点&#xff0c;电脑和我的手机都连这个热点&#xff0c;就可以抓包了

13.Golang中面向对象的多态及基本要素

目录 概述实践多态实现代码结果 基本要素 结束 概述 Golang中类的表示与封装继承 用这种方式并不能实现多态 需要结合 interface 来实现。 实践 多态实现 代码 package mainimport "fmt"type AnimalIF interface {// 这两个方法&#xff0c;实现类&#xff0c;必…

python笔记10

1、继承 继承是面向对象编程中的一个重要概念&#xff0c;它允许一个类&#xff08;子类&#xff09;继承另一个类&#xff08;父类&#xff09;的属性和方法。通过继承&#xff0c;子类可以重用父类的代码&#xff0c;并且有机会添加新的属性和方法&#xff0c;或者重写父类的…

【C++】一题掌握空指针

今天看见一道面试题&#xff0c;比较有意思&#xff0c;这一分享出来&#xff1a; 1.下面程序能编译通过吗&#xff1f; 2.下面程序会崩溃吗&#xff1f;在哪里崩溃 class A {public:void PrintA(){cout<<_a<<endl;}void Show(){cout<<"Show()"&…

.ui文件相关

目录 ui类生成过程&#xff1a; 提问&#xff1a; 等以后自己熟练了用代码写这些样式内容&#xff0c;尽量用代码写&#xff0c;原因很简单&#xff1a; 用代码写的可以直接修改代码&#xff0c;但是在设计界面修改的东西&#xff0c;电脑没有QC这玩意&#xff0c;还真不好改…

ChatGPT4 比 ChatGPT3.5 强在了那里?

刚开始的时候我还在纠结&#xff0c;一个月20 刀的ChatGPT4 &#xff0c;到底值不值这个价钱&#xff1f;使用过后发现&#xff0c;诶嘛真香。因为 GPT4 比 GPT3.5 多了太多功能&#xff0c;特别是识图能力&#xff0c;用好的话效率翻倍。 1. 看图写代码 ChatGPT4 相比 ChatG…

【极数系列】Flink集成DataSource读取集合数据(07)

文章目录 01 引言02 简介概述03 基于集合读取数据3.1 集合创建数据流3.2 迭代器创建数据流3.3 给定对象创建数据流3.4 迭代并行器创建数据流3.5 基于时间间隔创建数据流3.6 自定义数据流 04 源码实战demo4.1 pom.xml依赖4.2 创建集合数据流作业4.3 运行结果日志 01 引言 源码地…

用ASM HEMT模型提取GaN器件的参数

标题&#xff1a;Physics-Based Multi-Bias RF Large-Signal GaNHEMT Modeling and Parameter Extraction Flow (JEDS 17年) 模型描述 该模型的核心是对表面势&#xff08;ψ&#xff09;及其随施加的栅极电压&#xff08;Vg&#xff09;和漏极电压&#xff08;Vd&#xff09…

【数据结构1-3】集合

有时候&#xff0c;我们并不关心数据之间的前后关系&#xff0c;也不关心数据的层次关系。一些确定元素只是单纯的聚集在一起&#xff0c;这样的元素聚集体被称为集合。 当希望知道某个数据是否存在一个集合中&#xff0c;或者两个元素是否在同一个集合中时&#xff0c;就需要使…

JVM系列——对象管理

JVM对象分布 对象头 第一类是用于存储对象自身的运行时数据&#xff0c;如哈希码&#xff08;HashCode&#xff09;、GC 分代年龄、锁状态标志、线程持有的锁、偏向线程 ID、偏向时间戳等 另外一部分是类型指针&#xff0c;即对象指向它的类型元数据的指针&#xff0c;Java 虚…

敲黑板啦!CSGO游戏搬砖项目操作注意事项

CSGO游戏搬砖项目怎么赚钱的&#xff0c;利润在哪&#xff1f; 1.两个平台之间币种不一样&#xff0c;就存在一个汇率差&#xff0c;两平台装备价格也不一样&#xff0c;汇率差-价格差利润。 CSGO游戏搬砖项目具体有哪些操作步骤&#xff1f; 1、准备一台电脑&#xff0c;配置…

Git学习,基础,安装,配置,笔记总结

Git安装与常用命令 本教程里的git命令例子都是在Git Bash中演示的,会用到一些基本的linux命令,在此为大家提前列举: ls/ll 查看当前目录 cat 查看文件内容 touch 创建文件 vi vi编辑器(使用vi编辑器是为了方便展示效果,学员可以记事本、editPlus、notPad++等其它编 辑…

C#使用OpenCvSharp4库读取电脑摄像头数据并实时显示

一、OpenCvSharp4库 OpenCvSharp4库是一个基于.Net封装的OpenCV库&#xff0c;Github源代码地址为&#xff1a;https://github.com/shimat/opencvsharp&#xff0c;里面有关于Windows下安装OpenCvSharp4库的描述&#xff0c;如下图所示&#xff1a; 二、C#使用OpenCvSharp4库…

React 组件生命周期-概述、生命周期钩子函数 - 挂载时、生命周期钩子函数 - 更新时、生命周期钩子函数 - 卸载时

React 组件生命周期-概述 学习目标&#xff1a; 能够说出组件的生命周期一共几个阶段 组件的生命周期是指组件从被创建到挂在到页面中运行&#xff0c;在到组件不用时卸载组件 注意&#xff1a;只有类组件才有生命周期&#xff0c;函数组件没有生命周期(类组件需要实例化&…

监听项目中指定属性数据,点击或模块显示时

当项目中&#xff0c;需要获取某个页面上、某个标签上、有指定自定义属性时&#xff0c;需要在点击该元素时进行公共逻辑处理&#xff0c;或该元素在显示的时候进行逻辑处理&#xff0c;这时可以定义一个公共的方法&#xff0c;在每个页面引用&#xff0c;并写入数据即可 &…

Win11系统连接带HDMI接口的显示器后,电脑没有声音如何调试

解决这个问题的方法很简单&#xff0c;没有那么复杂。之所以使用HDMI接口连接了显示器后没声音&#xff0c;原因就是HDMI接口是包含音频视频两种信号的接口。当电脑的HDMI接口被使用时&#xff0c;系统就会默认从HDMI设备输出声音信号了&#xff0c;而此时如果HDMI设备没有声音…

基本控件(二)QMainWindow主窗口相关 以及 手写控件的方法 (按F2)

探究过程 先创建个QMainWindow项目。 鼠标点击选中QMainWindow之后按F2&#xff0c;就会进入其最一开始的定义的头文件中。 来到qmainwindow.h头文件中&#xff0c;可以清楚看到这些继承关系&#xff1a; 同样的操作&#xff0c;来到QWidget的定义之处&#xff1a; UI设计界面…

操作符详解(下)

目录 下标访问[ ]、函数调用() [ ] 下标引用操作符 函数调用操作符 结构成员访问操作符 结构体成员的直接访问 操作符的属性&#xff1a;优先级、结合性 优先级 结合性 整型提升 算术转换 下标访问[ ]、函数调用() [ ] 下标引用操作符 操作数&#xff1a;一个数组…

Matlab处理excel数据

我们新建个excel文档&#xff0c;用Matlab读取里面的内容&#xff0c;计算和判断里面的计算结果是否正确&#xff0c;并打印到另一个文档当中。 新建文档 新建输入文档&#xff0c;文件名TestExcel 编写脚本 [num,txt] xlsread(TestExcel.xlsx); SNcode num(:,1);%从序号中…

github连不上

github连不上 错误提示解决方案steam 采用Hosts加速 错误提示 fatal: unable to access ‘https://github.com/Ada-design/qianduan.git/’: Failed to connect to github.com port 443 after 21073 ms: Couldn’t connect to server 解决方案 下载steam https://steampp.ne…