Three.js 三维模型(一)

news2024/12/23 14:51:46

简介

今天主要给搭建介绍下three.js的基本使用,本篇是基于笔者在16年给做的一个项目的demo版进行讲解的,笔者当时采用Html5和JS进行编写的。可能大家会问有没有vue、React 、angular版的。这些笔者后面有时间的时候一定会给大家介绍。

其实编程的本源在于提炼属于自己的哲学思想,不授予任何技术和编程语言的限制。就像给你时间你可以用英语或者世界上任何一种语言写出一篇精美的文章。但是文章的精美并不是他用什么语言编写的,而是他的中心思想。我们要把复杂的问题简单化,删繁就简。

代码片段

  • 首先,当用户访问网页时,该网页将加载Three.js库以及其他相关脚本文件,包括DDSLoader.js、MTLLoader.js、OBJLoader.js、tween.min.jsOrbitControls.js。这些文件为Three.js的功能提供了必要的支持。
  • 在页面的<body> 标签中,我们创建一个<div>元素,其id属性设置为"container",作为Three.js渲染结果的容器。
  • 在JavaScript部分,我们定义了变量camera、scene和renderer,用于存储相机、场景和渲染器的实例。mouseX和mouseY变量用于存储鼠标的位置。
  • 接下来,我们定义了init()函数,用于初始化Three.js场景。函数首先获取容器元素,并创建一个透视相机。相机被放置在(0, 0,
    450)的位置,其fov属性设置为460度,远近平面分别为1和20000。然后,我们创建一个场景,并设置其背景颜色为灰色(0xcccccc)。环境光源和点光源被添加到场景中。
  • 在加载模型的过程中,我们定义了一个回调函数onProgress,用于跟踪模型加载的进度。首先,使用MTLLoader加载模型的材质文件(MTL文件),并在加载完成后预加载材质。然后,使用OBJLoader加载模型的几何体文件(OBJ文件),并将之前加载的材质应用到模型上。加载完成后,将模型添加到场景中。
  • 然后,我们创建一个WebGL渲染器,并设置其输出编码和像素比。将渲染器的DOM元素添加到之前创建的容器中。
  • 为了实现相机的交互控制,我们使用OrbitControls来创建一个控制器,并绑定到相机和渲染器的DOM元素上。控制器允许用户通过鼠标拖拽和滚动来控制相机的位置和视角。
  • 最后,我们定义了onWindowResize()函数,用于在窗口大小变化时调整相机和渲染器的尺寸。该函数更新相机的宽高比并更新渲染器的大小。
  • 最后,我们定义了animate()函数,使用requestAnimationFrame()递归地调用该函数来更新和渲染场景。在每一帧中,渲染器将呈现场景和相机的内容。
  • 在页面加载完成后,我们调用init()函数进行初始化,并开始动画循环调用animate()函数。
  • 这样,当用户访问该网页时,将显示一个包含3D模型的Three.js场景,并允许用户通过鼠标交互来控制相机的位置和视角。
  • 请注意,为了使代码正常运行,你需要确保在相应的目录中有正确的资源文件(如模型文件、材质文件等)和脚本文件。
<!DOCTYPE html>
<html lang="en">

<head>
    <title>侍女佣</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="./css/main.css">
</head>

<body>

  

    <script src="./js/three.js"></script>
    <script src="./js/DDSLoader.js"></script>
    <script src="./js/MTLLoader.js"></script>
    <script src="./js/OBJLoader.js"></script>
    <script src="./js/tween.min.js"></script>
    <script src="./js/OrbitControls.js"></script>

    <script>
        // 创建变量来存储相机、场景和渲染器
        var camera, scene, renderer;

        // 存储鼠标位置的变量
        var mouseX = 0, mouseY = 0;

        // 窗口的一半宽度和高度
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        // 初始化函数
        function init() {
            // 创建一个容器元素,并将其添加到页面中
            const container = document.createElement('div');
            document.body.appendChild(container);

            // 创建透视相机,并设置位置
            camera = new THREE.PerspectiveCamera(460, window.innerWidth / window.innerHeight, 1, 20000);
            camera.position.z = 450;

            // 创建场景,并设置背景颜色
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xcccccc);

            // 创建环境光源并添加到场景中
            const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
            scene.add(ambientLight);

            // 创建点光源并将其添加到相机中,再将相机添加到场景中
            const pointLight = new THREE.PointLight(0xffffff, 1);
            camera.add(pointLight);
            scene.add(camera);

            // 加载模型的回调函数
            const onProgress = function (xhr) {
                if (xhr.lengthComputable) {
                    const percentComplete = xhr.loaded / xhr.total * 100;
                    console.log(Math.round(percentComplete, 2) + '% downloaded');
                }
            };

            // 使用MTLLoader加载材质文件
            new THREE.MTLLoader()
                .setPath('./model/sny/')
                .load('sny.mtl', function (materials) {
                    materials.preload();

                    // 使用OBJLoader加载OBJ文件并应用之前加载的材质
                    new THREE.OBJLoader()
                        .setMaterials(materials)
                        .setPath('./model/sny/')
                        .load('sny.obj', function (object) {
                            object.position.y = -5;
                            scene.add(object);
                        }, onProgress);
                });

            // 创建WebGL渲染器,并设置相关参数
            renderer = new THREE.WebGLRenderer();
            renderer.outputEncoding = THREE.sRGBEncoding;
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);

            // 将渲染器的DOM元素添加到容器中
            container.appendChild(renderer.domElement);

            // 创建OrbitControls来控制相机
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.minDistance = 100;
            controls.maxDistance = 2000;

            // 监听窗口大小变化事件,触发onWindowResize函数
            window.addEventListener('resize', onWindowResize);
        }

        // 当窗口大小变化时调整相机和渲染器的尺寸
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // 递归地调用animate函数,更新和渲染场景
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        // 初始化并开始动画循环
        init();
        animate();
    </script>

</body>

</html>

效果图展示

以下是基于vscode的live server运行的结果,细节可以根据api自己调整。
在这里插入图片描述

注意:在开发three.js的过程中一定要注意兼容性的问题,目前最新版本兼容性会有问题,建议采用稳定版本

到此笔者的讲解完毕,需要js文件包的请到本页下载或者联系笔者。谢谢大家的支持

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

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

相关文章

牌桌玩家越来越少?国产替代进程加速,中国企业要做好选择

现在“国产替代”这四个字热度很高。 可以说我们现在关注的问题&#xff0c;技术引进、自主创新、中国制造、卡脖子、全球竞争等&#xff0c;都可以用国产替代作为线索串联起来&#xff01; 其实这也不是21世纪之后中国刚刚遇到的问题。这是过去一百年中国人一直在奋斗的目标…

机器人动力学与控制学习笔记(十七)——基于名义模型的机器人滑模控制

十七、滑模控制器设计原理 滑模运动包括趋近运动和滑模运动两个过程。系统从任意初始状态趋向切换面&#xff0c;直到到达切换面的运动称为趋近运动&#xff0c;即趋近运动为的过程。根据滑模变结构原理&#xff0c;滑模可达性条件仅保证由状态空间任意位置运动点在有限时间内到…

NLP领域再创佳绩!阿里云机器学习平台 PAI 多篇论文入选 ACL 2023

近期&#xff0c;阿里云机器学习平台PAI主导的多篇论文在ACL 2023 Industry Track上入选。ACL是人工智能自然语言处理领域的顶级国际会议&#xff0c;聚焦于自然语言处理技术在各个应用场景的学术研究。该会议曾推动了预训练语言模型、文本挖掘、对话系统、机器翻译等自然语言处…

Trimble RealWorks处理点云数据(九)之点云分类后将地面导入Arcgis生成DEM

效果 步骤 1、las导入Trimble RealWorks 2、对点云数据预处理 可以参考这篇文章 TrimbleRealWorks点云数据预处理 我这边是把点云做了分类,而后将地面数据导出las 点云做为三维数据,后续步骤在arcscene中操作,能实时显示出来 3、arcscene创建las数据集

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(7 月 10 日论文合集)

文章目录 一、分割|语义相关(6篇)1.1 Unsupervised Segmentation of Fetal Brain MRI using Deep Learning Cascaded Registration1.2 Tranfer Learning of Semantic Segmentation Methods for Identifying Buried Archaeological Structures on LiDAR Data1.3 To pretrain or …

Vue2----Uniapp自定义弹窗

对于擅长后端的程序员&#xff0c;在编写前端时常常回去找库&#xff0c;比如elementUI&#xff0c;uview之类&#xff0c;但是往往这些库较为冗杂&#xff0c;有些功能比较强大&#xff0c;基本用不到&#xff0c;不好理解。这时候&#xff0c;如果可以自定义组件可能会对开发…

C++ STL常见算法

目录 1 各种常见算法的用法 1.1 非可变序列算法 1.2 可变序列算法 1.3 Partitions 1.4 排序算法 1.5 查找算法 1.6 集合算法 1.7 堆算法 1.8 最大最小值算法 1.9 其他算法 1 各种常见算法的用法 STL算法部分主要由头文件<algorithm>,<numeric>,<func…

uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)

1.获取信息: //获取状态栏高度(px) this.statusBarHeight uni.getSystemInfoSync().statusBarHeight; //获取小程序胶囊信息 this.menuButtonInfo uni.getMenuButtonBoundingClientRect() 如下: 2.动态设置style样式: <view:style"{ paddingTop: menuButtonIn…

Oracle-RAC集群安装root.sh报错问题

问题背景: 在redhat 7.8上安装Oracle11G RAC集群&#xff0c;在节点一执行root.sh脚本时发生错误Disk Group OCRDG creation failed with the following message:ORA-15018: diskgroup cannot be created 问题分析: 从报错信息来看错误是在执行创建OCRDG磁盘组时失败&#xff0…

Python读取指定的TXT文本文件并从中提取指定数据的方法

本文介绍基于Python语言&#xff0c;遍历文件夹并从中找到文件名称符合我们需求的多个.txt格式文本文件&#xff0c;并从上述每一个文本文件中&#xff0c;找到我们需要的指定数据&#xff0c;最后得到所有文本文件中我们需要的数据的合集的方法。 首先&#xff0c;我们来明确一…

进度网络图详解

关键路径&#xff1a;总工期最长的那一条路径&#xff1a;可能不止一条。&#xff08;1条或多条&#xff09; 虚工作&#xff1a;不占用任何时间和资源的&#xff0c;只是为了让逻辑关系更加明确&#xff0c;网络图更加美观。 最早开始时间&#xff08;ES&#xff09;- 左上 最…

BT 种子,磁力链接是个啥?

[科普向] BT 种子、磁力链接到底是什么&#xff1f; BitTorrent 我们平时所说的 BT 种子&#xff0c;实际上指的是由 BitTorrent 协议所生成的一个包含资源信息的文件。与传统的网络传输协议不同&#xff0c;BitTorrent 协议是一种以 Peer-To-Peer&#xff08;P2P&#xff09…

【KingbaseES】查看表空间大小

查询单表空间大小 SELECT sys_size_pretty(sys_tablespace_size(sys_default))查看所有表空间大小&#xff08;不包含系统表空间&#xff0c;包含默认表空间&#xff09; SELECT oid,spcname AS "Name",sys_size_pretty(sys_tablespace_size(spcname)) AS "Lo…

2. SpringBoot快速回顾(@value读取配置文件)

目录 1.定义配置文件2. 定义Controller类3. 测试4. 优化4.1 封装实体类4.3 定义controller类4.2 测试 本文将介绍如何使用value读取配置文件的内容。 在实际项目中&#xff0c;往往会在配置文件中写项目部署需要配置的环境信息&#xff08;数据库驱动&#xff0c;数据库账号密码…

mysql离线安装

MySQL离线安装 进行MySQL离线安装包,当前安装版本为MySQL8.0.32 下载页面&#xff1a;https://downloads.mysql.com/archives/community/ 下载地址&#xff1a;https://downloads.mysql.com/archives/get/p/23/file/mysql-5.7.36-1.el7.x86_64.rpm-bundle.tar 将下载完成的安…

【Linux】关于Linux系统挂载大于2TB磁盘的问题

之前在Linux系统挂载文件系统的时候&#xff0c;我已经习惯了使用 fdisk 命令来对磁盘进行分区。fdisk 常用的几个指令有&#xff1a; m 显示命令帮助菜单&#xff1b; n 创建新的分区&#xff1b; p 显示分区信息&#xff1b; t 修改分区类型&#xff08;一般设置为8e&…

Transformer原理理解

本文介绍Transformer的基本原理&#xff0c;主要记录一下自己的学习过程。 论文&#xff1a;https://arxiv.org/abs/1706.03762 参考&#xff1a; http://jalammar.github.io/illustrated-transformer/https://zhuanlan.zhihu.com/p/338817680https://blog.csdn.net/longxin…

2023年05月份青少年软件编程Python等级考试试卷三级真题(含答案)

2023-05 Python三级真题 题数&#xff1a;38 分数&#xff1a;100 测试时长&#xff1a;60min 一、单选题(共25题&#xff0c;共50分) 1. 请选择&#xff0c;下面代码运行之后的结果是&#xff1f;&#xff08; &#xff09;&#xff08;2分&#xff09; a 2 b 4 try:…

声网 Agora音视频uniapp插件跑通详解

一、前言 在使用声网SDK做音视频会议开发时, 通过声网官方论坛 了解到,声网是提供uniapp插件的,只是在官方文档中不是很容易找到。 插件地址如下: Agora音视频插件 Agora音视频插件(JS) 本文讲解如何跑通演示示例 二、跑通Demo 2.1 环境安装: 参考: 2. 通过vue-…

Mellanox ConnectX-6-dx智能网卡 openvswitch 流表卸载源码分析

Mellanox ConnectX-6-dx智能网卡 具备流表卸载能力。智能网卡的部署方式兼容当前服务器ovs部署方式。而DPU bluefield 2&#xff0c;其要求ovs从服务器上转移到DPU上&#xff0c;这影响现有上层neutron架构&#xff0c;改造量大。 前置信息 OFED代码版本&#xff1a;Linux In…