美文网首页
THREE.js<模型的纹理贴图切换>

THREE.js<模型的纹理贴图切换>

作者: 誰在花里胡哨 | 来源:发表于2020-06-16 23:21 被阅读0次
    效果图:
    202006162310.gif
    想详细了解3D模型的导入,可参考之前的文章。点击查看

    🎈知识点:

    1. OBJLoader 模型文件加载器,点击查看
     <!-- 引入obj模型加载库OBJLoader.js -->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    
    1. MTLLoader 材质文件加载器,点击查看;
    <!-- 引入obj模型材质加载库MTLLoader.js -->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
    

    🎈文件:

    image.png
    🎈代码如下:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                /* 隐藏body窗口区域滚动条 */
            }
    
            .switchPanel {
                width: 100%;
                position: fixed;
                bottom: 8%;
                z-index: 99;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .chartlet {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
                margin: 20px;
                position: relative;
                transition: 0.3s;
            }
    
            .chartlet:hover {
                box-shadow: 0px 2px 5px #525151;
            }
    
            .chartlet img {
                width: 100%;
                transform-origin: 5% 95%;
                position: absolute;
                bottom: 0;
                transform: scale(4);
            }
        </style>
        <!--引入three.js三维引擎-->
        <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
        <!-- 引入threejs扩展控件OrbitControls.js -->
        <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
        <!-- 引入obj模型加载库OBJLoader.js -->
        <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
        <!-- 引入obj模型材质加载库MTLLoader.js -->
        <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
    </head>
    
    <body>
        <div class="switchPanel">
            <div class="chartlet" onclick="changeMap('texture1')">
                <img src="./texture1.png" alt="">
            </div>
            <div class="chartlet" onclick="changeMap('texture2')">
                <img src="./texture2.png" alt="">
            </div>
            <div class="chartlet" onclick="changeMap('texture3')">
                <img src="./texture3.png" alt="">
            </div>
        </div>
    </body>
    
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
    
        var OBJ;
    
        /**
         * OBJ和材质文件mtl加载
         */
        var OBJLoader = new THREE.OBJLoader();//obj加载器
        var MTLLoader = new THREE.MTLLoader();//材质文件加载器
    
        MTLLoader.load('./material.mtl', function (materials) {
    
            // 返回一个包含材质的对象MaterialCreator
            console.log(materials);
    
            //obj的模型会和MaterialCreator包含的材质对应起来
            OBJLoader.setMaterials(materials);
            OBJLoader.load('./model.obj', function (obj) {
                scene.add(obj);//返回的组对象插入场景中
                obj.children[0].scale.set(5, 5, 5);//网格模型缩放
                OBJ = obj.children[0] //赋值,方便更换纹理贴图
                console.log(OBJ)
            })
        })
    
        // 更换纹理贴图方法
        function changeMap(img) {
            // 更换纹理贴图
            var texture = new THREE.TextureLoader().load(img + '.png');
            OBJ.material.map = texture
        }
        
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        // scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 1);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xffffff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    
        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
            if (OBJ) {
                OBJ.rotation.x += 0.01;//每次绕y轴旋转0.01弧度
            }
            requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化,改变相机对象的属性
        var controls = new THREE.OrbitControls(camera);
    </script>
    
    </html>
    

    相关文章

      网友评论

          本文标题:THREE.js<模型的纹理贴图切换>

          本文链接:https://www.haomeiwen.com/subject/lcidxktx.html