我要评论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...
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论