学习threejs,导入OBJ格式的模型

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.OBJLoader OBJ模型加载器
  • 二、🍀利用THREE.OBJLoader加载obj模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入OBJ格式的模型,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.OBJLoader OBJ模型加载器

THREE.OBJLoader 是 Three.js 中用于OBJ格式模型加载的加载器。此加载器内部使用FileLoader进行加载文件。
创建方法:
ObjectLoader( manager : LoadingManager )manager — 加载器所使用的loadingManager,默认值为THREE.DefaultLoadingManager.创建一个新的ObjectLoader。
参数说明
crossOrigin:如果设置了,在开始加载前, 将为图片分配 crossOrigin 属性,其值为 crossOrigin, 默认为"anonymous"。
manager:将要被加载的纹理的路径或者URL,详情请参考.setTexturePath。 默认值为空字符串。

二、🍀利用THREE.OBJLoader加载obj模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源,初始化THREE.PointLight点光源,设置点光源位置,设置点光源投影,scene添加点光源。
  • 5、加载几何模型:创建THREE.AxesHelper坐标辅助工具,创建THREE.OBJLoader加载器加载pinecone.obj模型文件,生成mesh物体,scene场景加入mesh和THREE.AxesHelper坐标辅助工具。
  • 6、加入controls控制,加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn35(导入OBJ格式的模型)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/loaders/OBJLoader.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xffffff)renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 50)camera.lookAt(new THREE.Vector3(0, 0, 0))}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.PointLight(0xffffff)light.position.set(0, 0, 100)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var loader = new THREE.OBJLoader()loader.load('data/model/pinecone.obj', (loadedMesh) => {var material = new THREE.MeshLambertMaterial({color: 0x5C3A21})loadedMesh.children.forEach(child => {child.material = materialchild.geometry.computeFaceNormals()child.geometry.computeVertexNormals()})loadedMesh.scale.set(100, 100, 100)scene.add(loadedMesh)})}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initControls()initStats()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下:
在这里插入图片描述

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

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

相关文章

动态规划 —— 路径问题-下降路径最小和

1. 下降路径最小和 题目链接&#xff1a; 931. 下降路径最小和 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/minimum-falling-path-sum/description/ 2. 算法原理 状态表示&#xff1a;以莫一个位置位置为结尾 dp[i&#xff0c;j]表示&#xff1a;到…

ubuntu20.04 加固方案-设置限制su命令用户组

一、编辑/etc/pam.d/su配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/pam.d/su文件。 vim /etc/pam.d/su 二、添加配置参数 在打开的配置文件的中&#xff0c;添加以下参数&#xff1a; auth required pam_wheel.so 创建 wheel 组 并添加用户 …

ElementUI学习笔记

一、ElementUI概述 官网&#xff1a;https://element.eleme.cn/#/zh-CN &#xff08;一&#xff09;定义 Element&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是基于Vue的一个UI框架&#xff0c;该框架基于Vue开发了很多相关组件&#xf…

JS面试八股文(四)

&#x1f60a;JS面试八股文&#xff08;四&#xff09; 31.精灵图和base64的区别是什么&#xff1f;32.svg格式了解多少&#xff1f;33.了解过JWT吗&#xff1f;34.npm的底层环境是什么&#xff1f;35.HTTP协议规定的协议头和请求头有什么&#xff1f;36.说一下浏览器的缓存策略…

Android平台RTSP|RTMP播放器高效率如何回调YUV或RGB数据?

技术背景 我们在做Android平台RTSP、RTMP播放器的时候&#xff0c;经常遇到这样的技术诉求&#xff0c;开发者希望拿到播放器解码后的YUV或RGB数据&#xff0c;投递给视觉算法&#xff0c;做AI分析&#xff0c;本文以ffmpeg和大牛直播SDK的SmartPlayer为例&#xff0c;介绍下相…

深度学习常见面试题及答案(41~45)

关注公众号&#xff1a;『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v&#xff1a;codebiubiubiu滴滴我 文章目录 41、解释一下神经网络中的激活函数的作用是什么&#xff1f;常见的激活函数有哪些&#xff1f;一、激活函数的作用二、常见的激活…

Ethernet 系列(5)-- 物理层测试::PMA Test::MDI

车载以太网物理层PMA &#xff08;Physical Media Attachment--物理媒质接入层&#xff09;主要评估车载以太网的电气特性&#xff0c;针对PMA测试方面&#xff0c;OPEN联盟于2014年6月发布“ BroadR-Reach Physical Layer Transceiver Specification For Automotive Applicati…

史上最清晰的uniap安卓ios热更新,附带每一步截图,亲测可用

uniap安卓ios热更新 插件市场导入到你的项目里1新建项目如图2关联服务空间项目3然后运行起来&#xff0c;将代码上传到托管中心4 新建一个应用项目5 发版测试 官方文档&#xff0c;我是看了几遍没看懂 自己弄一遍回头来看终于懂了&#xff0c;若果对你有用&#xff0c;点个赞就…

Vue生成名片二维码带logo并支持下载

一、需求 生成一张名片&#xff0c;名片上有用户信息以及二维码&#xff0c;名片支持下载功能&#xff08;背景样式可更换&#xff0c;忽略本文章样图样式&#xff09;。 二、参考文章 这不是我自己找官网自己摸索出来的&#xff0c;是借鉴各位前辈的&#xff0c;学以致用&am…

零基础学西班牙语,柯桥专业小语种培训泓畅学校

No te comas el coco, seguro que te ha salido bien la entrevista. Ya te llamarn. 别瞎想了&#xff01;我保证你的面试很顺利。他们会给你打电话的。 这里的椰子是"头"的比喻。在西班牙的口语中&#xff0c;我们也可以听到其他同义表达&#xff0c;比如&#x…

【Python各个击破】numpy

简介 NumPy是一个开源的Python库&#xff0c;它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。它是大多数Python科学计算的基础&#xff0c;包括Pandas、SciPy和scikit-learn等库都建立在NumPy之上。 安装 !pip install numpy导入 import numpy as np用法 # …

一文详细讲解进销存系统(附架构图、流程、功能介绍)

企业经营的七大要素是“人、财、物、产、供、销、存”&#xff0c;进销存管理就占到了其中的多项。然而&#xff0c;许多企业在进销存管理方面面临着诸多痛点问题&#xff0c;例如库存管理混乱、采购销售流程不清晰、数据不准确等。这些问题不仅影响企业的运营效率&#xff0c;…

Error in eval(family$initialize): y值必需满足0 <= y <= 1解决

今天在使用R语言对Weekly进行交叉验证时&#xff0c;发生如下报错&#xff1a; 错误于eval(family$initialize): y值必需满足0 < y < 1 错误代码为&#xff1a; Weekly<-read.csv("Weekly.csv") set.seed(1) attach(Weekly) glm.fit1 glm(Direction~Lag…

[论文阅读] Improved Baselines with Visual Instruction Tuning

启发&#xff1a; 1、LLaVA-1.5和LLaVA以及其他大模型相比&#xff0c;做出了哪些改进&#xff1f; &#xff08;1&#xff09;使用CLIP-ViT-L-336px作为视觉编码器&#xff0c;使模型能处理336px的高分辨率图像&#xff0c;这使得模型能从图像中提取出更多细节信息。此外&am…

微积分复习笔记 Calculus Volume 1 - 4.2 Linear Approximations and Differentials

4.2 Linear Approximations and Differentials - Calculus Volume 1 | OpenStax

万圣夜,Codigger

在这个神秘的万圣节&#xff0c;让Codigger&#xff0c;一个专业的分布式操作系统&#xff0c;带领你踏入未知的编程世界&#xff01;就像变装成各种角色一样&#xff0c;Codigger也以其独特的能力和技巧&#xff0c;在数字世界中展现无穷魅力。让我们一起在这个神秘的节日里&a…

《神经网络助力战场车辆及部件损毁识别与评估》

《神经网络助力战场车辆及部件损毁识别与评估》 一、战场车辆损毁评估的重要意义二、传统战场车辆损毁评估方法&#xff08;一&#xff09;视觉评估法&#xff08;二&#xff09;仪器检测技术 三、神经网络在战场车辆损毁评估中的应用案例&#xff08;一&#xff09;射击毁伤评…

信而泰防火墙安全测试解决方案:为网络安全保驾护航

在当今数字化时代&#xff0c;网络安全至关重要。防火墙作为网络安全的第一道防线&#xff0c;其性能和可靠性直接影响到网络的安全性。信而泰提供的防火墙安全测试解决方案&#xff0c;旨在通过全面的测试流程&#xff0c;确保防火墙能够高效、准确地执行其安全任务。 针对防火…

Pinctrl子系统pinctrl_desc结构体进一步介绍

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入 input子系统专栏&#xff1a; 专栏地址&#xff1a;input子系统input角度&#xff1a;I2C触摸屏驱动分析和编写一个简单的I2C驱动程序 – 末片&#xff0c;有往期内容观看顺序 I2C子系统专栏&#xff1a;…

简单的kafkaredis学习之redis

简单的kafka&redis学习之redis 2. Redis 2.1 什么是Redis Redis是一种面向 “Key-Value” 数据类型的内存数据库&#xff0c;可以满足我们对海量数据的快速读写需求&#xff0c;Redis是一个 NoSQL 数据库&#xff0c;NoSQL的全称是not only sql&#xff0c;不仅仅是SQL&…