Threejs加载外部glb文件模型不显示

最新推荐文章于 2024-06-04 17:31:45 发布

kk7521

最新推荐文章于 2024-06-04 17:31:45 发布

阅读量8.8k

点赞数 5

文章标签： three.js

本文链接：https://blog.csdn.net/kk7521/article/details/113309726

版权

文章目录

一、问题代码
- 1、主页面代码
- 2、js代码
二.问题分析
三、后期补充
总结

一、问题代码

1、主页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>军营展示</title>zhuyemian
  <!--引入three.js三维引擎-->
  <script src="../build/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/JunYing2.js"></script>
  <script>

  </script>
  <style>
    body { margin: 0;overflow: hidden;}
  </style>
</body>
</html>

2、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.25, 1000);//透视摄像机
camera.position.set(500,100,0);//设置相机位置
camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load( '../model/YQnew.glb', function ( glb ) {
	console.log(glb.scene);
	glb.scene.position.set(0,0,25)
	scene.add(glb.scene);
}, undefined, function ( error ) {
	console.error( error );
} );
// 创建渲染对象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
junying.appendChild(renderer.domElement)
// 执行渲染操作
function animate() {
  renderer.render(scene,camera);//执行渲染操作
}
animate();

二.问题分析

通过上面的代码，引入的模型数据可以打印出来，但是模型没有显示，把引入的外部模型换成自己代码生成的模型可以正常显示
例如：把代码中的

var loader = new THREE.GLTFLoader();
loader.load( '../model/YQnew.glb', function ( glb ) {
	console.log(glb.scene);
	glb.scene.position.set(0,0,25)
	scene.add(glb.scene);
}, undefined, function ( error ) {
	console.error( error );
} );

替换为

   // 立方体网格模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({
  color:0x0000ff,
    specular:0x4488ee,
    shininess:12
}); //材质对象Material
var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
scene.add(mesh1); //网格模型添加到场景中

模型可以正常显示，模型有数据打印，那么问题就定位到渲染处，在函数animate()中加入requestAnimationFrame( animate );模型可以正常显示，然后把requestAnimationFrame( animate );注释，添加一个定时器，设置为2秒，2秒后模型展示。

function animate() {
  // requestAnimationFrame( animate );
  renderer.render(scene,camera);//执行渲染操作
}
animate();
setInterval("animate()",2000);

三、后期补充

又遇到一种情况。。。。。无数据打印，模型不显示，原因是：
模型需要放在public的static下面
在这里插入图片描述
并且引入路径要写成如下图的格式

总结

记录学习中遇到的问题，原因有以下几种：
1.threejs引入外部模型第一次调用render()不会加载模型，需要加入requestAnimationFrame()进行周期性渲染。

后期补充内容：
2.缺少灯光
3.文件存放路径问题
4.模型使用draco做过压缩处理，代码中加载模型需要加入draco解压方法

kk7521

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
9
评论
Threejs加载外部glb文件模型不显示

文章目录一、问题代码1、主页面代码2、js代码二.问题分析总结一、问题代码1、主页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>军营展示</title>zhuyem
复制链接

扫一扫