WebGL笔记_Three.js之加载并渲染obj模型(五)

最新推荐文章于 2024-07-07 11:29:46 发布

-yanhui-

最新推荐文章于 2024-07-07 11:29:46 发布

阅读量4.3k

点赞数 4

分类专栏： WebGL 文章标签： threejs 渲染

本文链接：https://blog.csdn.net/xyh930929/article/details/81635064

版权

WebGL 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

下面是一个通过threejs加载一个obj模型的例子。后面将介绍每个变量都是什么意思。

<body>
<div id="info">

</div>

<script src="../build/three.js"></script>
<script src="js/loaders/OBJLoader.js"></script>

<script>

    var container;//盛放画布的容器

    var camera, scene, renderer; //相机，场景，渲染器

    init();//将上面声明的变量进行初始化
    render();//调用渲染模型

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 250;

        //场景
        scene = new THREE.Scene();

        //环境光
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        scene.add( ambientLight );

        //点光源
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
        camera.add( pointLight );
        scene.add( camera );

        //加载贴图
        var textureLoader = new THREE.TextureLoader();
        var texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );

        //加载obj模型
        var loader = new THREE.OBJLoader();

        loader.load( 'models/obj/male02/male02.obj', function ( object ) {

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {
                    child.material.map = texture;
                }

            } );

            object.position.y = - 95;
            scene.add( object );

        });

        //初始化渲染器
        renderer = new THREE.WebGLRenderer();
        //设置像素值
        renderer.setPixelRatio( window.devicePixelRatio );
        //设置渲染范围为屏幕的大小
        renderer.setSize( window.innerWidth, window.innerHeight );
        //将画布放入dom的div中
        container.appendChild( renderer.domElement );
    }

    function render() {
        requestAnimationFrame( render );
        renderer.render( scene, camera );
    }

</script>

</body>