Three.js 三维模型(一)

这篇具有很好参考价值的文章主要介绍了Three.js 三维模型(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

今天主要给搭建介绍下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 三维模型(一),javascript,开发语言,ecmascript

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

到此笔者的讲解完毕,需要js文件包的请到本页下载或者联系笔者。谢谢大家的支持文章来源地址https://www.toymoban.com/news/detail-570272.html

到了这里,关于Three.js 三维模型(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(128)
  • 除了three.js,还有许多其他前端开发语言和库可以用于创建3D可视化大屏

    hello老铁们...本人熟悉html5,vue对bootsrap,uniapp,layui,element,vite,antd,echarts,jq响应式尤其擅长,ui设计等技能,如果ui前端工作中有遇到烦恼可私信关注评论我们共同交流进步!谢谢       随着前端技术的飞速发展,3D可视化已经成为许多应用场景中不可或缺的一部分。在

    2024年03月15日
    浏览(72)
  • Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案

    目录 机房效果展示 可能出现的问题及解决方法 Three. js服务器运行环境搭建及文件配置 使用Node.js搭建本地服务器 文件配置  Blender材质处理 Blender导出GLTF模型出现材质丢失 Three.js玻璃材质制作  Blender导出glTF格式模型 Three. js模型显示场景的设置 总结   机房正面图: 机房背面

    2024年02月05日
    浏览(95)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(54)
  • WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月04日
    浏览(62)
  • three js模型旋转

    如何让立方体模型旋转到指定的面 父页面 效果:

    2024年02月15日
    浏览(41)
  • three.js添加3d模型

    three官方的几何体也就那么几个,想要生成各种各样的模型,其难度十分之大,这时引入外部模型也不失为一种选择。具体引入办法如下。 虽然名字为GLTFLoader,但实际上glb文件也是能加载的。 其中需要注意的是调节相机参数与相机位置,否则很有可能导致场景中看不见任何东

    2024年02月04日
    浏览(92)
  • Three.js--》实现3d踢球模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理加载模型 使用Cannon-es实现物理世界 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用

    2024年02月11日
    浏览(55)
  • three.js 载入 3D 模型的方法

    three.js 载入 3D 模型的方法有很多种。以下是其中的一些: 1. OBJLoader模型加载器 2. GLTFLoader模型加载器 3. FBXLoader模型加载器 4. ColladaLoader模型加载器 以上是几种常用类型的三维模型的加载器及其使用方法,可以根据需要使用相应的模型加载器来加载模型。

    2024年02月16日
    浏览(61)
  • Three.js--》实现3d字体模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载字体模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月07日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包