关于three.js载入js格式模型的问题

最新推荐文章于 2024-01-16 16:27:55 发布
最新推荐文章于 2024-01-16 16:27:55 发布
阅读量1.4k 收藏
点赞数
分类专栏： three.js 文章标签： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq563969790/article/details/76034186
版权

先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src=".\three.js"></script>
    <script src="OrbitControls.js"></script>

    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>

    <script type="text/javascript">
        var renderer;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;

            renderer = new THREE.WebGLRenderer({
                antialias : true
            });

            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);
        }

        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

            camera.position.x = 0;
            camera.position.y = 500;
            camera.position.z = 0;

//            camera.up.x = 0;
//            camera.up.y = 0;
//            camera.up.z = 1;

            camera.lookAt({
                x: 0,
                y: 0,
                z: 0
            })

        }

        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        var light;
        function initLight() {
            scene.add(new THREE.AmbientLight(0x333333));
        }

        //load .js document
        var jsLoader;
        function loaderjs() {
            jsLoader = new THREE.JSONLoader();

            jsLoader.load( 'convert_js/2032_2.js', function( geometry ,materials) {

                var material = new THREE.MeshFaceMaterial(materials[0]);
                var object = new THREE.Mesh(geometry, material);

                object.scale.set(1, 1, 1);
                object.position.set(100,0,0);
                scene.add(object);
            } );
        }


        //load binary model

        function render () {
            renderer.render(scene, camera);
        }

        function animation () {

            requestAnimationFrame(animation);
            render();

        }

        function threeStart() {
            initThree(); //创建渲染器并设置渲染参数
            initCamera();
            initScene();
            initLight();
            loaderjs();
            //renderer.clear();
            animation();
            var controls = new THREE.OrbitControls(camera);  //camera control
            controls.addEventListener('change', render);

        }

    </script>
</head>

<body οnlοad="threeStart();">
    <div id="canvas-frame"></div>
</body>
</html>

以上基于最新版three.js，经测试，能正确载入js文件。

但是依然存在问题：需要实时渲染requestanimationframe同时加入控件orbitcontrol才能再浏览器中显现。求大神答疑。
摇扇子的诸葛亮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js和高德地图结合引入obj格式模型.zip
06-27
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
threeJs入门 js引入
Bruce_byan的博客
02-07 3173
threeJs引入初始化及完整代码展示
【three.js-01】.如何引入three.js
weixin_64461654的博客
10-26 852
1.在.html文件中引入three.js就像前端经常使用的jquery.js一样引入即可。原文链接：https://blog.csdn.net/m0_69757621/article/details/134051049。npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本。-- //引入three.js本地包 -->-- //引入three.js -->2.http绝对地址远程加载。// 引入three.js。// 比如安装148版本。
vue引用three.js详细步骤
铁血猪刚鬣的博客
10-27 6161
three.js： 官网 效果预览： 先去官网找想要引入的模板 首先先下载依赖 npm install three --save 然后是贴官方代码，需要修改的地方主要是window.innerWidth改为dom元素的container.clientWidth，添加this 详细代码如下 1.官方代码引入 import * as THREE from '../build/three.module.js'; import { OrbitControls } from './jsm/controls/O
ThreeJs 学习之旅(十七)—Imported models(导入模型)
Florenza的博客
05-24 1173
初始代码: import './style.css' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import * as dat from 'dat.gui' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoad...
vue3使用three.js引入3D模型文件
最新发布
m0_56023096的博客
01-16 1398
模糊原因：原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题，我们的canvas绘制出来后图片因为高清屏设备的影响，导致图片变大，然而我们在浏览器的渲染窗口并没有变大，因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。PerspectiveCamera(透视摄像机): 模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。下载好后，解压，放进项目文件的public目录。
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js加载json三维模型.zip
11-14
three.js加载json格式的三维模型
three.js加载gltf模型
09-17
three.js加载gltf模型的完整demo，使用vue开发的，比较简单，便于理解
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Three.js 三维模型（一）
weixin_43114209的博客
07-10 1万+
今天主要给搭建介绍下three.js的基本使用，本篇是基于笔者在16年给做的一个项目的demo版进行讲解的，笔者当时采用Html5和JS进行编写的。可能大家会问有没有vue、React 、angular版的。这些笔者后面有时间的时候一定会给大家介绍。其实编程的本源在于提炼属于自己的哲学思想，不授予任何技术和编程语言的限制。就像给你时间你可以用英语或者世界上任何一种语言写出一篇精美的文章。但是文章的精美并不是他用什么语言编写的，而是他的中心思想。我们要把复杂的问题简单化，删繁就简。
Three.js模型优化，减面压缩加载。
weixin_50350691的博客
07-03 1289
之前用的Draco压缩glb，比较好用，压缩后在chorm浏览器开发模式里面的子父物体集合也能和blender相对应，但是和小程序里不太适配，后改用EXT_meshopt_compression算法压缩glb，效果和Draco差不多，但是网格文件被压缩混乱，子父物体找不到，对后期找相应部件模块影响很大，只做展示或者其他方法也能用。1.模型文件比较精细的手动删除不需要部分，然后通过精简修改器减面操作，可最大限度压缩模型文件内存，对模型子 父集合调整好，动画调整到NLM通道，正常导出glb文件。
threejs开发中加载模型的方法 - 将fbx模型转换成 → gltf模型 → glb文件 → 页面获取解析模型（以及模型格式的转换）
weixin_44870969的博客
06-23 2154
将fbx文件转换成gltf格式的模型文件
vue使用threeJs导入obj模型，并添加标注
hzqzzz的博客
08-03 8742
vue使用threeJs导入obj模型，并添加标注
使用 three.js 加载基本三维模型 | 大帅老猿threejs特训
u011617265的博客
12-31 2126
接下来，我们可以使用 OrbitControls 插件来控制相机的位置和视角，并使用 GLTFLoader 插件来加载三维模型文件。总的来说，使用 three.js 制作三维动画非常方便，它提供了丰富的插件和 API，让我们能够快速上手。为了让我们的场景更加逼真，我们还可以使用 RGBELoader 插件来加载环境贴图，并将它设置为场景的背景。但是，使用 three.js 这个强大的 JavaScript 库，可以让你轻松地制作出精美的三维动画。这样，我们就可以轻松地制作出精彩的三维动画了。
vue-three.js基础篇（一）——引入
不确定因素的博客
07-12 2537
Three官网Three.js是基于原生WebGL封装运行的三维引擎，是一款运行在浏览器中的 3D 引擎，说到数字化与可视化，就得说到数字孪生，而3D模型在浏览器展示就是其中的一环，就是数字模型设计。使用CAD工具开发出满足技术规格的产品虚拟原型，精确记录产品的各种物理参数，以可视化的方式展示出来，并通过一系列验证手段来检验设计的精准程度。这边3D建模使用的是3DMAX，主要支持转化能在three中展示的类型有fbx、3ds、obj、stl、dae。 three的使用需要安装以下内容 创......
从引入开始学习Three.js
Blue54的博客
03-24 763
【代码】从引入开始学习Three.js。
3D模型汇总----骨骼模型
热门推荐
baizhengbiao的专栏
08-31 1万+
3D模型的格式有很多，每个公司或软件都可以自己定义自己的格式，或公开或不公开。如max，obj， x（微软），fbx（被Autodesk收购），dae，md2（Quake2），ms3d(MilkShap3D)，mdl（魔兽3）等等。MD2是Quake2里的模型文件格式，带有顶点动画；OBJ是一种文本格式存储的模型文件格式，只能存储静态模型；MS3D模型文件格式，全称MilkShape 3D，是一种
three.js中加载模型与模型动画
NOSaac的博客
08-09 1415
本文部分内容为Three.js Journey课程的学习笔记。有些格式专用于一种软件。有些已知非常轻，但有时缺乏具体数据。众所周知，有些几乎包含您可能需要的所有数据，但它们很重。有些格式是开源的，有些格式不是，有些是二进制的，有些是 ASCII 的，等等。如果需要精确的数据并且无法找到软件支持的适当格式，您甚至可以轻松创建自己的格式。
three.js加载fbx格式模型
04-12
你好，关于你的问题，我可以回答。使用three.js加载fbx格式模型的方法如下： 1. 引入three.js及FBXLoader库文件。 2. 创建场景、相机、渲染器等基本元素。 3. 创建FBXLoader实例。 4. 通过FBXLoader实例的load方法加载fbx格式的模型文件。 5. 将模型添加到场景中。 希望这能帮到你！ 话说，知道怎么儿子叫爸爸吗？叫：“爸爸，你在说什么呢？”

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值