three.js尝试渲染gbl模型成功!(三)

参照教程:https://cloud.tencent.com/developer/article/2276766?areaSource=102001.5&traceId=88k805RaN_gYngNdKvALJ
(作者:九仞山)

通过最近两天查three.js入门教程了解到 这玩应支持包括 .obj、.gltf等类型的模型结构。
glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的、可扩展的格式,这种格式既高效又与现代web技术高度互操作。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// GLTF加载器(GLTFLoader),用于载入glTF 2.0资源的加载器。
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// OrbitControls是THREEJS中最常用的一个控制器,可以帮助我们实现以目标为焦点的旋转缩放。

(上面这方法 我还是报错 OrbitControls从cdn里引还行 GLTFLoader 可能是地址错还是咋的 也不成)
虽然名字为GLTFLoader,但实际上glb文件也是能加载的

有个模型素材网站 外国地 有免费和收费模型下载
https://sketchfab.com/search?features=downloadable&type=models

在这里插入图片描述
不要钱地就会有下载按钮
在这里插入图片描述
选择要下载的格式
在这里插入图片描述
这里先尝试glb (别问为啥 问就是找的教程里用的这格式 )
下载完长这样 给他复制到 项目里
在这里插入图片描述
gltf文件
gltf文件全称Graphics Language Transmission Forma(图形语言传输格式),是一种三维模型格式,用于传输和加载3D场景和模型;其号称是图形界的JPEG,能够实现快速的模型数据交换。

gltf文件核心是JSON文件,一个gltf文件可传输一个或多个场景, 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机等信息。

加载gltf文件
下面通过代码实现加载一个gltf格式的文件到场景中,首先还是需要创建场景、相机、渲染器等初始化代码,具体步骤查看前面章节,代码如下

<!DOCTYPE html>
<html lang="en"><head><title>three.js 3d model text</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {background-color: #bfe3dd;color: #000;}a {color: #2983ff;}</style></head><body><div id="container"></div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';// 定义变量let scene,camera,rendererlet axesHelperlet hesLight,dirLight,sportLight let controls       // 初始化场景initScene()// 初始化辅助轴initAxesHelper()// 初始化灯光initLight()// 初始化meshinitMesh()// 初始化相机initCamera()// 初始化渲染器initRenderer()// 循环动画animate()// 初始化轨道控制器initControls()window.addEventListener('resize',function() { camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth,window.innerHeight)})function initScene() {scene = new THREE.Scene()scene.background = new THREE.Color(0xffffff)}function initAxesHelper() {// axesHelper = new THREE.AxesHelper(5)// scene.add(axesHelper)}function initLight() {//     hesLight = new THREE.HemisphereLight(0xffffff,0xffffff)//     hesLight.intensity = 0.8//     scene.add(hesLight)//     dirLight = new THREE.DirectionalLight()//     dirLight.position.set(5,5,5)//     scene.add(dirLight)//     sportLight = new THREE.SpotLight(0xffffff)//     sportLight.position.set(0,10,10)//      scene.add(sportLight)               const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 2);directionalLight.position.set(10, 10, 10)scene.add(directionalLight);}function initMesh() {}function initCamera() {camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,100)camera.position.set(1.5,1.5,1.5)}function initRenderer() {renderer = new THREE.WebGLRenderer({antialias:true})renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth,window.innerHeight) document.body.appendChild(renderer.domElement) }function initControls() { controls = new OrbitControls(camera, renderer.domElement)}function animate() {requestAnimationFrame(animate)renderer.render(scene,camera)}const loader = new GLTFLoader()//   loader.load( 'models/gltf/chinese_house.glb',function(gltf) {loader.load( 'models/gltf/cute_character.glb',function(gltf) {console.log(gltf);  scene.add(gltf.scene)})//解决加载gltf格式模型纹理贴图和原图不一样问题renderer.outputEncoding = THREE.sRGBEncoding;</script></body></html>

因为我OrbitControls GLTFLoader 鼠标控制器和模型加载器引入一直报错 最后复制的官网案例文件可以成功渲染

import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

在这里插入图片描述
第一个3D模型就渲染出来了 !!!
谁的嘴角比AK还难压我不说
在这里插入图片描述

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

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

相关文章

微服务-网关

在微服务架构中&#xff0c;每个服务都是一个可以独立开发和运行的组件&#xff0c;而一个完整的微服务架构由一系列独立运行的微服务组成。其中每个服务都只会完成特定领域的功能&#xff0c;比如订单服务提供与订单业务场景有关的功能、商品服务提供商品展示功能等。各个微服…

2.SpringBoot利用Thymeleaf实现页面的展示

什么是Thymeleaf&#xff1f; Thymeleaf是一个现代服务器端Java模板引擎&#xff0c;适用于Web和独立环境&#xff0c;能够处理HTML&#xff0c;XML&#xff0c;JavaScript&#xff0c;CSS甚至纯文本。 Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为实现这…

斐讯E1拆机焊接TTL救砖

从老家的柜子里翻出来一台斐讯E1&#xff0c;老家在用的是斐讯K2P&#xff0c;300M宽带&#xff0c;房间和大部分位置wifi5足够跑满了&#xff0c;一直懒得升级&#xff0c;也足够用了。 不过发现部分位置信号比较弱&#xff0c;都不到50M&#xff0c;考虑插上E1做个AP中继&…

106. 跑步锻炼(结果填空)

public class Main { public static void main(String[] args) { int startYear 2000; int startMonth 1; int startDay 1; // 周六 int endYear 2020; int endMonth 10; int endDay 1; // 周四 int totalDistance 0; // 计算开始日期到结束日期之间的每一天 …

Spring与SpringBoot的区别

Spring是一个开源的Java应用程序框架&#xff0c;旨在简化企业级Java应用程序的开发。它提供了一个轻量级的容器&#xff0c;用于管理应用程序中的各个组件&#xff08;如依赖注入、AOP等&#xff09;&#xff0c;并提供了丰富的功能和模块&#xff0c;用于处理数据库访问、事务…

Acwing.4009 收集卡牌(期望dp)

题目 小林在玩一个抽卡游戏&#xff0c;其中有 n种不同的卡牌&#xff0c;编号为 1到 n。 每一次抽卡&#xff0c;她获得第 i种卡牌的概率为 pi。 如果这张卡牌之前已经获得过了&#xff0c;就会转化为一枚硬币。 可以用 k枚硬币交换一张没有获得过的卡。 小林会一直抽卡&…

智能面试——录音及播放下载js-audio-recorder — post请求,formdata传参

录音插件 js-audio-recorder bug&#xff1a;本地调试调取不起来麦克风 浏览器配置安全域名 chrome://flags/Insecure origins treated as secure输入域名即可电脑需要连接上耳机 <template><div class"BaseRecorder"><div class"BaseRecorder-r…

【UE5 C++】各个头文件的含义

#pragma once 预处理程序指令 作用&#xff1a;保护同一个文件不会被多次包含&#xff0c;使得头文件只会被编译一次&#xff0c; #include “CoreMinimal.h” 包含了一套来自UE4的核心编程环境的普遍存在类型 #include “GameFramework/GameModeBase.h” 基于GameModeBas…

应急响应-挖矿脚本检测指南威胁情报样本定性文件清除入口修复

一、演示案例-挖矿样本-Win&Linux-危害&定性 危害&#xff1a;CPU拉满&#xff0c;网络阻塞&#xff0c;服务器卡顿等 定性&#xff1a;威胁情报平台上传解析分析&#xff0c;文件配置查看等windows样本 linux样本 二、演示案例-Linux-Web安全漏洞导致挖矿事件 某公司…

Harmony鸿蒙南向驱动开发-Watchdog

看门狗&#xff08;Watchdog&#xff09;&#xff0c;又称看门狗计时器&#xff08;Watchdog timer&#xff09;&#xff0c;是一种硬件计时设备。一般有一个输入、一个输出&#xff0c;输入叫做喂狗&#xff0c;输出连接到系统的复位端。当系统主程序发生错误导致未及时清除看…

【带源码】如何开发一个视频打赏,付费观看视频的系统?

【带源码】如何开发一个视频打赏&#xff0c;付费观看视频的系统&#xff1f;开发指南来了 最近非常火爆的视频打赏系统&#xff0c;有用户端&#xff0c;管理端&#xff0c;代理端 风口来了&#xff0c;系统部署简单&#xff0c;需要详细部署教程的可以留下评论哦&#xff01…

Calico IPIP和BGP TOR的数据包走向

IPIP Mesh全网互联 文字描述 APOD eth0 10.7.75.132 -----> APOD 网关 -----> A宿主机 cali76174826315网卡 -----> Atunl0 10.7.75.128 封装 ----> Aeth0 10.120.181.20 -----> 通过网关 10.120.181.254 -----> 下一跳 BNODE eth0 10.120.179.8 解封装 --…

“FM”、“AM”信号如何解调?

同学们大家好&#xff0c;今天我们继续学习杨欣的《电子设计从零开始》&#xff0c;这本书从基本原理出发&#xff0c;知识点遍及无线电通讯、仪器设计、三极管电路、集成电路、传感器、数字电路基础、单片机及应用实例&#xff0c;可以说是全面系统地介绍了电子设计所需的知识…

蓝桥杯 每日2题 day4

碎碎念&#xff1a;好难好难&#xff0c;&#xff0c;发呆两小时什么也写不出来&#xff0c;&#xff0c;&#xff0c;周六大寄了 10.阶乘约数 - 蓝桥云课 (lanqiao.cn) 暴力跑了两个小时没出来结果&#xff0c;&#xff0c;去看题解要用数学&#xff1a;约数定理&#xff0c…

pygame发射子弹后绘制射线

import pygame import sys import mathpygame.init()screen pygame.display.set_mode((800, 600)) pygame.display.set_caption("Rotate and Shoot Bullets")# 定义子弹类 class Bullet:def __init__(self, x, y, angle):self.x xself.y yself.angle angleself.s…

经典本地影音播放器纯净无广告版

MPC-BE&#xff08;Media Player Classic Black Edition&#xff09;是来自 MPC-HC&#xff08;Media Player Classic Home Cinema&#xff09;的俄罗斯开发者重新编译优化后的一款经免费的经典全能影音播放器&#xff0c;纯净无广告&#xff0c;启动速度快&#xff0c;占用消耗…

功能测试如何到自动化测试,看这篇就够了。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号&#xff1a;互联网杂货铺&#xff0c;回复1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 本帖不仅给大家介绍自动化测试&#xff0c;更会提供大…

MATLAB 点云体素滤波 (58)

MATLAB 体素滤波 (58) 一、基本原理二、算法实现1.代码数据的海量性始终是点云处理时需要面临的一个大问题,严重的时间消耗和内存占用影响了点云处理的发展,当然了,点云数量主要应该看项目的实际需求,若是对细节要求较高,那么点云数量不可过少,但是要求过低时,我们就可…

@2024/4/1—力扣—两数相除

代码实现&#xff1a; 思路&#xff1a;用减法模拟除法 // 用减法模拟除法 int func(int a, int b) { // a、b均为负数int ans 0;while (a < b) { // a的绝对值大于等于b&#xff0c;表示此时a够减int t b;int count 1; // 用来计数被减的次数// t > INT_MIN / 2:防止…

seo调优

SEO 网站地图&#xff1a;sitemap.xmlrobots.txtxxx.com/www.xxx.com 解析到服务器&#xff0c;xxx.com 301 到 www.xxx.comhttps百度站点管理标题描述关键词标签语义化内链外链死链链接html结尾友情链接前端架构 注意&#xff1a;已收录链接&#xff0c;禁止改变链接地址 ro…