【WebGL】茶壶和纹理

lishichengyan

于 2017-12-28 21:29:55 发布

阅读量1k

点赞数

分类专栏：图形学

本文链接：https://blog.csdn.net/lishichengyan/article/details/78926593

版权

该博客探讨了如何在WebGL中实现茶壶模型的纹理混合，并通过键盘控制不同纹理的切换。文中提供了运行效果展示及详细代码。

摘要由CSDN通过智能技术生成

实验目的是实现混合纹理以及用键盘控制纹理切换

运行效果：

代码：

<!--
Project Name: 实验6-？？？-？？？
Author: ？？？
Student ID: ？？？
Description: 实验6的WebGL版
Date: 2017.12.09
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实验6</title>
        <script src="js/three.min.js"></script>
        <script src="js/OBJLoader.js"></script>     
        <script src="js/DDSLoader.js"></script>
        <script src="js/MTLLoader.js"></script>
        <script src="js/OBJMTLLoader.js"></script>
        <script src="js/Detector.js"></script>
        <script src="js/stats.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer;
            var mouseX=0,mouseY=0;
            var windowHalfX=window.innerWidth/2;
            var windowHalfY=window.innerHeight/2;
            var isTextureChanged=false;//是否改变桌面纹理
            var legDist=45;//桌腿之间的距离
            
            //初始化Three绘制canvas
            function initThree(){ 
                width=document.getElementById('canvas-frame').clientWidth;
                height=document.getElementById('canvas-frame

最低0.47元/天解锁文章