<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>threejs加载obj模型</title>
<script src="./js/three.js"></script>
<script src="./js/OBJLoader.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#webgl {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<div id="webgl"></div>
<script>
// 获取渲染容器
let webgl = document.getElementById("webgl");
// 获取渲染容器的宽高
let webglWidth = webgl.offsetWidth;
let webglHeight = webgl.offsetHeight;
// 创建场景
let scene = new THREE.Scene();
// 设置环境光（十六进制颜色）
let ambient = new THREE.AmbientLight(0x444444);
// 将环境光添加到场景中
scene.add(ambient);
// 设置点光源（十六进制颜色）
let point = new THREE.PointLight(0xffffff);
// 设置点光源的位置（x轴, y轴, z轴）
point.position.set(400, 200, 300);
// 将点光源添加到场景中
scene.add(point);
// 创建透视相机（角度, 宽高比, 最近距离, 最远距离）
let camera = new THREE.PerspectiveCamera(60,webglWidth/webglHeight,0.1,2000);
// 设置相机的位置（x轴, y轴, z轴）
camera.position.set(100, 100, 100);
// 将相机指向场景中心
camera.lookAt(scene.position);
// 创建渲染器
let renderer = new THREE.WebGLRenderer();
// 设置渲染器的初始颜色（十六进制颜色, 透明度）
renderer.setClearColor(0xEEEEEE,1);
// 设置渲染器大小（标签宽度, 标签高度）
renderer.setSize(webglWidth,webglHeight);
// 将渲染器添加到渲染容器中（渲染器元素）
webgl.appendChild(renderer.domElement);
// 创建渲染函数
function render(){
// 渲染场景和相机（场景, 相机）
renderer.render(scene,camera);
}
// 调用渲染函数
render();
// 设置窗口变化自适应调整事件
window.onresize = function(){
// 重新获取渲染容器的宽高
webglWidth = webgl.offsetWidth;
webglHeight = webgl.offsetHeight;
// 重置渲染器canvas画布大小
renderer.setSize(webglWidth,webglHeight);
// 重置相机显示范围的宽高比
camera.aspect = webglWidth/webglHeight;
// 更新相机的投影矩阵
camera.updateProjectionMatrix();
// 重新调用渲染函数
render();
};
// 创建 OBJ 模型加载器
let loader = new THREE.OBJLoader();
// 加载 OBJ 文件
loader.load('./img/鹤.OBJ', function(obj) {
// 加载纹理贴图
let texture = new THREE.TextureLoader().load('./img/he.png',function(){
render(); // 加载成功后重新调用渲染函数
});
// 给 OBJ 模型设置纹理贴图
obj.children[0].material = new THREE.MeshBasicMaterial({ map: texture });
// 将 OBJ 模型添加到场景中
scene.add(obj);
// 设置 OBJ 模型居中
obj.children[0].geometry.center();
// 设置 OBJ 模型缩放大小
obj.children[0].scale.set(100, 100, 100);
})
</script>
</body>
</html>threejs加载OBJ模型效果
原创作者：吴小糖
创作时间：2022-10-11