Threejs加载OBJ模型

作者：Monodyee | 2024-02-16 18:09:12
踩
threejs加载obj模型
threejs加载OBJ模型代码


<!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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/95939