脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Threejs加载外部glb文件

使用Threejs加载外部glb文件

 更新时间：2024年04月26日 10:03:12   作者：bangbang给你两锤  
这篇文章主要介绍了使用Threejs加载外部glb文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Threejs加载外部glb文件

页面html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pb展示</title>
  <!--引入three.js三维引擎-->
  <script src="./js/three.js"></script>
  <!--引入轨道控件OrbitControls.js-->
  <script src="./js//OrbitControls.js"></script>
  <!-- 引入global加载器 -->
  <script src="./js/GLTFLoader.js"></script>
  
</head>
<body>
  <div id="junying"></div>
 
  <!-- 加载模型文件 -->
  <script src="./js/3dmodel.js"></script>
  <script>
 
  </script>
  <style>
    body { margin: 0;overflow: hidden;}
  </style>
</body>
</html>

js代码

我的命名是3dmodel.js

 
let junying = document.getElementById("junying");
//创建场景对象
let scene = new THREE.Scene();
// 设置光源
//点光源
let point = new THREE.PointLight(0xffffff);
point.position.set(500, 300, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
let light = new THREE.AmbientLight(0x444444);
scene.add(light);
//相机设置
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视摄像机
camera.position.set(0,50,350);//设置相机位置
camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load( '../glb/db.glb', function ( glb ) {
	console.log(glb.scene);
	glb.scene.position.set(120,-400,0)
	scene.add(glb.scene);
}, undefined, function ( error ) {
	console.error( error );
} );
 
// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxesHelper(250);
scene.add(axisHelper);
 
 
// 创建渲染对象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
junying.appendChild(renderer.domElement)
// 执行渲染操作
function animate() {
    requestAnimationFrame(animate)
  renderer.render(scene,camera);//执行渲染操作
}
 
//创建控件对象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
 
 
animate();
// setInterval("animate()",2000);

完美运行

其余操作正在探索中ing...

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈Javascript数组的使用

    浅谈Javascript数组的使用

    这篇文章主要介绍了浅谈Javascript数组的使用的相关资料,包括数组的大小，数组的遍历以及数组的一些方法，非常细致，需要的朋友可以参考下
    2015-07-07
  • JavaScript实现数据类型的相互转换

    JavaScript实现数据类型的相互转换

    这篇文章主要为大家详细介绍了JavaScript实现数据类型的相互转换，感兴趣的朋友可以参考一下
    2016-03-03
  • ExtJs整合Echarts的示例代码

    ExtJs整合Echarts的示例代码

    本篇文章主要介绍了ExtJs整合Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 微信公众号开发 实现点击返回按钮就返回到聊天界面

    微信公众号开发 实现点击返回按钮就返回到聊天界面

    本文分享了微信公众号开发实现点击返回按钮就返回到聊天界面的示例代码。需要的朋友一起来看下吧
    2016-12-12
  • Javascript查询DBpedia小应用实例学习

    Javascript查询DBpedia小应用实例学习

    本文则尝试利用SPARQLWrapper.js来读取DBpedia的数据，并显示出来,感兴趣的你可以参考下，或许对你有所帮助
    2013-03-03
  • 利用JS+ES6新增字符串操作方法汇总(共47种方法)

    利用JS+ES6新增字符串操作方法汇总(共47种方法)

    字符串的操作是任何一门计算机语言都必须面对的问题,下面这篇文章主要给大家介绍了关于利用JS+ES6新增字符串操作方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • javascript事件处理模型实例说明

    javascript事件处理模型实例说明

    本文主要介绍IE和火狐在添加删除事件上的区别，并给出通用的解决方法，需要的朋友可以参考下。
    2016-05-05
  • RxJS中四种Subject的用法和区别

    RxJS中四种Subject的用法和区别

    RxJS中有四种不同类型的Subject，它们分别是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文将介绍这四种Subject的用法、区别以及适用的应用场景，并提供代码示例,需要的朋友可以参考下
    2023-07-07
  • JavaScript中promise的使用解释

    JavaScript中promise的使用解释

    这篇文章主要介绍了JavaScript中promise的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • 几个比较实用的JavaScript 测试及效验工具

    几个比较实用的JavaScript 测试及效验工具

    JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者，掌握JavaScript可以增强用户的使用体验，提供交互及富客户端等功能。
    2010-04-04

最新评论