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

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


文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.AWDLoader AWD模型加载器
  • 二、🍀导入AWD格式的模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

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

1.1 ☘️THREE.AWDLoader AWD模型加载器

THREE.AWDLoader用于加载和处理AWD格式3D模型文件的扩展。

AWD三维文件:
AWD是一种用于三维场景的二进制格式,通常与AWD引擎一起使用。这个加载程序不支持压缩的AWD文件。

AWD三维模型特点

  • 二进制格式:AWD是一种二进制格式,这意味着它以二进制代码的形式存储三维模型数据,与文本格式(如OBJ、STL等)相比,二进制格式通常具有更高的加载效率和更小的文件大小。
  • 与Away3D引擎兼容:AWD格式是专门为Away3D引擎设计的,因此与Away3D引擎具有良好的兼容性。使用Away3D引擎可以轻松地加载、渲染和交互AWD格式的三维模型。
  • 高效性:由于采用了二进制格式和针对Away3D引擎的优化,AWD三维模型在加载、渲染和交互方面表现出较高的效率。这使得AWD格式适用于需要实时渲染和交互的三维应用场景,如游戏、虚拟现实等。

应用场景

  • 游戏开发:在游戏开发中,AWD三维模型可以用于创建游戏中的角色、道具、场景等元素。由于AWD格式具有高效性和易于编辑的特点,因此非常适合用于游戏开发中的三维建模和渲染任务。
  • 虚拟现实:在虚拟现实应用中,AWD三维模型可以用于构建虚拟场景和物体。通过加载AWD格式的三维模型,可以为用户提供更加真实、沉浸式的虚拟现实体验。
  • 建筑可视化:在建筑可视化领域,AWD三维模型可以用于展示建筑设计方案、室内装修效果等。通过调整模型的方向、大小和纹理等参数,可以呈现出逼真的建筑场景和细节。
  • 工业设计:在工业设计中,AWD三维模型可以用于创建产品原型、模拟装配过程等。使用AWD格式可以方便地导出和导入三维模型数据,以便在不同软件之间进行协作和数据交换。

二、🍀导入AWD格式的模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene
  • 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
  • 4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3,设置平行光源的位置,scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight,设置spotLight的位置信息,场景scene中添加spotLight。
  • 5、加载几何模型:创建THREE.AWDLoader加载器loader,loader调用load方法加载‘PolarBear.awd’模型。在load回调函数中,回调函数获取网格对象model,循环model的child,设置child的材质为漫反射材质THREE.MeshLambertMaterial,设置model的范围大小,场景scene中添加model。具体代码参考代码样例。
  • 6、加入THREE.OrbitControls交互控件,加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>导入AWD格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/AWDLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器,设置渲染器大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));var orbit = new THREE.OrbitControls(camera);var dir1 = new THREE.DirectionalLight();dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight();dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight();dir3.position.set(30, 30, -30);scene.add(dir3);// 添加聚光灯光源,设置光源位置var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var group;var gui = new dat.GUI();var loader = new THREE.AWDLoader();var group = new THREE.Object3D();loader.load("../assets/models/awd/PolarBear.awd", function (model) {model.traverse(function (child) {if (child instanceof THREE.Mesh) {child.material = new THREE.MeshLambertMaterial({color: 0xaaaaaa});}});model.scale.set(0.1, 0.1, 0.1);scene.add(model);});render();function render() {stats.update();orbit.update();if (group) {group.rotation.y += 0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

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

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

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

相关文章

【OAA 】面向对象分析:从概念到实践

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 我们都知道Java是一门面向对象的开发语言&#xff0c;在软件开发的广袤天地中&#xff0c;面向对象分析&#xff08;Object-Oriented Analysis&#xff0c;简称…

【Axios使用手册】如何使用axios向后端发送请求并进行数据交互

axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 Node.js。它支持请求和响应拦截、取消请求、自动转换 JSON 数据等功能&#xff0c;非常适合在现代 JavaScript 应用中进行网络请求。以下是对 axios 的详细讲解&#xff0c;包括安装、基本用法、高级功能等。…

jvm结构介绍

JVM结构概述 Java虚拟机&#xff08;JVM&#xff09;是Java程序的运行环境&#xff0c;它负责将Java字节码转换为机器码并执行。JVM的结构主要包括类加载子系统、运行时数据区、执行引擎、本地接口以及垃圾收集器。 1. 类加载子系统&#xff08;Class Loader Subsystem&#xf…

Nginx常用配置之详解(Detailed Explanation of Common Nginx Configurations)

Nginx常用配置详解(图文全面总结) Nginx Nginx 是一款轻量级的高性能 HTTP、 和反向代理服务器。 Nginx&#xff0c;被广泛用于负载均衡、静态文件服务、和代理.........等。 Nginx&#xff0c;以高并发、低内存占用、和高可用性著称&#xff0c;大部分的大厂以及公司都在使…

【逐步补充中】springboot集成netty中遇到的问题总结

问题1&#xff1a;LengthFieldBasedFrameDecoder解码失败&#xff0c;再次尝试解码 如果无需再次尝试解码&#xff0c;可以在抛错时调用&#xff0c; in.resetReaderIndex(); public class TcpMessageDecoderHandler extends LengthFieldBasedFrameDecoder {private static f…

Win11+WLS Ubuntu 鸿蒙开发环境搭建(二)

参考文章 penHarmony南向开发笔记&#xff08;一&#xff09;开发环境搭建 OpenHarmony&#xff08;鸿蒙南向开发&#xff09;——标准系统移植指南&#xff08;一&#xff09; OpenHarmony&#xff08;鸿蒙南向开发&#xff09;——小型系统芯片移植指南&#xff08;二&…

Android图形系统中的PDF渲染:架构、JNI、系统定制与实际应用

Android图形系统中的PDF渲染:架构、JNI、系统定制与实际应用 引言 在移动设备上,PDF文件的渲染与显示是一个常见的需求。Android系统提供了android.graphics.pdf包,用于处理PDF文件的渲染和显示。本文将深入探讨android.graphics.pdf的架构、JNI(Java Native Interface)…

babel-runtime

简介 babel-runtime 是 Babel 的一个核心库&#xff0c;主要用于在运行时提供一些 Babel 转换所需的功能。 作用 代码复用&#xff1a;babel-runtime 提供了常用的辅助函数和 polyfills&#xff0c;避免在每个文件中重复引入这些功能。支持新特性&#xff1a;帮助支持 ES6 特…

ubuntu 使用s3fs配置自动挂载对象存储

一、环境准备 1.有访问对象存储权限的AKSK 2.服务器、对象存储 二、实施步骤 sudo apt update sudo apt install s3fs echo "AK:SK" >/home/ubuntu/.passwd-s3fs ---位置自定义 chmod 600 /home/ubuntu/.passwd-s3fs ---权限必须要有 mkdir /data sudo s3fs …

聚铭网络受邀参加2024年南京市信息技术应用创新产业供需对接会

近日&#xff0c;备受瞩目的2024年南京市信息技术应用创新产业供需对接会&#xff08;‘宁工品推’信创、商用密码专场&#xff09;”在中国&#xff08;南京&#xff09;软件谷云密城圆满举办。聚铭网络作为信创领域的杰出代表厂商&#xff0c;受邀出席本次大会&#xff0c;为…

关于 AWTK 和 Weston 在旋转屏幕时的资源消耗问题

关于 AWTK 和 Weston 在旋转屏幕时的资源消耗问题&#xff0c;首先需要理解这两者旋转的本质区别及其资源开销。 AWTK的屏幕旋转&#xff1a; AWTK旋转的实现方式&#xff1a; AWTK 是一个用户界面工具包&#xff0c;它通过图形渲染系统处理所有控件和窗口的旋转。当你使用 w…

Monolith - 大规模推荐建模的深度学习框架

文章目录 一、关于 Monolith二、快速开始1、从源代码构建2、示例和教程 一、关于 Monolith github : https://github.com/bytedance/monolithDiscord Monolith 是一个用于大规模推荐建模的深度学习框架。它引入了两个对高级推荐系统至关重要的特性&#xff1a; collisionles…

RS485方向自动控制电路分享

我们都知道RS485是半双工通信&#xff0c;所以在传输的时候需要有使能信号&#xff0c;标明是发送还是接收信号&#xff0c;很多时候就简单的用一个IO口控制就好了&#xff0c;但是有一些低成本紧凑型的MCU上&#xff0c;一个IO口也是很珍贵的&#xff0c;因此&#xff0c;如果…

ElementUI中的el-select显示的不是对应label值

这个下拉框组件可以在v-model绑定的值等于option中value的值时&#xff0c;显示对应option的label 但是下面这个出了问题&#xff0c;显示的是1或2或3&#xff0c;而不是对应的label <el-select v-model"editParam.role_id" placeholder"请选择角色身份&qu…

UE5材质节点Frac/Fmod

Frac取小数 Fmod取余数 转场效果 TimeMultiplyFrac很常用 Timesin / Timecos 制作闪烁效果

图神经网络_GNN从入门到入门

文章目录 0 提出背景1 网络结构2 GNN算法2.1 算法描述2.2 举个栗子 3 GNN本质4 应用领域5 代码案例5.1 PyG的下载5.2 常用数据集介绍5.3 one demo 0 提出背景 经典的深度神经网络适用于 欧几里得数据&#xff08;Euclidean data&#xff09;&#xff0c;比如我们常常用卷积神经…

CDGA数据治理工程师-学习笔记

目录 第一章 数据管理 组织管理数据的目标&#xff1a; 数据管理的原则&#xff1a; 数据生命周期&#xff1a; 数据管理战略的组成应包括&#xff1a; 第二章 数据伦理 目标 数据伦理活动 数据处理伦理问题 贝尔蒙特 数据伦理准则 违背伦理进行数据处理的风险 建立…

AWS K8s 部署架构

Amazon Web Services&#xff08;AWS&#xff09;提供了一种简化的Kubernetes&#xff08;K8s&#xff09;部署架构&#xff0c;使得在云环境中管理和扩展容器化应用变得更加容易。这个架构的核心是AWS EKS&#xff08;Elastic Kubernetes Service&#xff09;&#xff0c;它是…

计算机网络 (16)数字链路层的几个共同问题

一、封装成帧 封装成帧是数据链路层的一个基本问题。数据链路层把网络层交下来的数据构成帧发送到链路上&#xff0c;以及把接收到的帧中的数据取出并上交给网络层。封装成帧就是在一段数据的前后分别添加首部和尾部&#xff0c;构成了一个帧。接收端在收到物理层上交的比特流后…

网页单机版五子棋小游戏项目练习-初学前端可用于练习~

今天给大家分享一个 前端练习的项目&#xff0c;技术使用的是 html css 和javascrpit 。希望能对于 刚刚学习前端的小伙伴一些帮助。 先看一下 实现的效果图 1. HTML&#xff08;HyperText Markup Language&#xff09; HTML 是构建网页的基础语言&#xff0c;它的主要作用是定…