THREE.js<模型的紋理貼圖切換>

效果圖：

202006162310.gif

想詳細了解3D模型的導入逸寓，可參考之前的文章母谎。點擊查看

??知識點：

OBJLoader 模型文件加載器，點擊查看剧防；

 <!-- 引入obj模型加載庫OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>

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窗口區(qū)域滾動條 */
        }

        .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>
    /**
     * 創(chuàng)建場景對象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); //點光源添加到場景中
    //環(huán)境光
    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; //三維場景顯示范圍控制系數峭拘，系數越大俊庇，顯示的范圍越大
    //創(chuàng)建相機對象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //設置相機位置
    camera.lookAt(scene.position); //設置相機方向(指向的場景對象)
    /**
     * 創(chuàng)建渲染器對象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //設置渲染區(qū)域尺寸
    renderer.setClearColor(0xffffff, 1); //設置背景顏色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas對象

    // 渲染函數
    function render() {
        renderer.render(scene, camera); //執(zhí)行渲染操作
        if (OBJ) {
            OBJ.rotation.x += 0.01;//每次繞y軸旋轉0.01弧度
        }
        requestAnimationFrame(render); //請求再次執(zhí)行渲染函數render，渲染下一幀
    }
    render();
    //創(chuàng)建控件對象  相機對象camera作為參數   控件可以監(jiān)聽鼠標的變化鸡挠，改變相機對象的屬性
    var controls = new THREE.OrbitControls(camera);
</script>

</html>

最后編輯于：2020.06.16 23:26:45

?著作權歸作者所有,轉載或內容合作請聯系作者