学习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…

kettle8.3 Oracle连接运行一段时间后:Socket read timed out

前言 一段SQL在Oracle连接运行大约需要450s。因为业务需要我得运行18次&#xff0c;之前使用kettle8.3默认连接池的方法发现只能运行到一半然后就报错&#xff1a;Socket read timed out。网上的大多不清不楚 解决办法 在数据库连接-选项里添加 useSSL:true useCompression…

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…

这个世界并不是掌握在那些嘲笑者的手中,而恰恰掌握在能够经受得住嘲笑与批评仍不断往前走的人手中。

这个世界并不是掌握在那些嘲笑者的手中&#xff0c;而恰恰掌握在能够经受得住嘲笑与批评仍不断往前走的人手中。

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

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;…

【Linux】文件切割排序 cut sort

文章目录 Linux文件切割命令&#xff1a;cut1. cut命令的基本用法2. cut命令的选项和参数3. cut命令的实际应用案例 Linux文件排序命令&#xff1a;sort1. sort命令的基本用法2. sort命令的选项和参数3. sort命令的实际应用案例 常见问题和解决方案1. cut和sort命令的联合使用2…

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…

微信小程序元素水平居中或垂直居中

最近在做一个微信小程序的项目&#xff0c;其中涉及到css样式实现将<navigator>标签内的图片和文本元素垂直排列&#xff0c;并水平居中。在尝试实现的过程中&#xff0c;将元素在标签内的所有排列情况都顺带实现了。上代码&#xff1a; index.wxml <navigator url&…

unity中的材质(material)贴图(texture)着色器(shader)介绍

TOC 在unity中&#xff0c;材质&#xff08;material&#xff09;、贴图&#xff08;texture&#xff09;和着色器&#xff08;shader&#xff09;是构建和渲染3D对象外观的基本概念 材质(material) 定义&#xff1a;材质是一个用于定义物体外观的资源&#xff0c;它将材质属性…

在模式的学习中发现了之前没有留意过的点

在模式的学习中发现了之前没有留意过的点 init 和 new 方法 通常我们在类中使用__init__方法来初始化对象, new()方法用于创建实例&#xff0c;类实例化之前会首先调用&#xff0c;它是class的方法&#xff0c;是个静态方法。而__init__()方法用户初始化实例&#xff0c;该方…