WebGl中文网学习three.js之纹理案例

最新推荐文章于 2022-11-17 17:39:33 发布

晓不点

最新推荐文章于 2022-11-17 17:39:33 发布

阅读量214

点赞数

分类专栏： 3D

本文链接：https://blog.csdn.net/qq_44187211/article/details/117403469

版权

3D 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纹理</title>
    <style>
        body {
            margin: 0px;
            background-color: #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="../js/three.js"></script>
    <script>
        var camera, scene, renderer;
        var mesh;
        init();
        animate();
        function init() {
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            camera = new THREE.PerspectiveCamera(70, window.innerWidth /window.innerHeight, 1, 1000);
            camera.position.z = 400;
            scene = new THREE.Scene();

            var geometry = new THREE.PlaneGeometry(800, 500);
            var material;

            var loader = new THREE.TextureLoader();
            loader.load(
                '../textures/4.jpg',
                function (texture) {
                    var material = new THREE.MeshBasicMaterial({
                        map: texture
                    });
                    mesh = new THREE.Mesh(geometry, material);
                    scene.add(mesh);
                },
                function (xhr) {
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                },
                function (xhr) {

                }
            )

            window.addEventListener('resize', onWindowResize, false);
        }

        function onWindowResize(){
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

在这里插入图片描述
纹理重复和环绕


<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #FFFFFF;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../js/three.js"></script>
<script src="../js/dat.gui.js"></script>

<script>
    var camera, scene, renderer;
    var mesh;
    var texture;
    init();
    animate();
    function init() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z =400;
        scene = new THREE.Scene();

        var geometry = new THREE.PlaneGeometry(500, 300,1,1);

        texture = THREE.ImageUtils.loadTexture("../textures/2.jpg", null, function(t) {});

        var material = new THREE.MeshBasicMaterial({map: texture});
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        window.addEventListener('resize', onWindowResize, false);
        createUI();

    }
    var para;
    function createUI() {
        var parameter = function() {
            this.repeat = 1;
            this.wrap = 1;
        };
        para = new parameter();
        var gui = new dat.GUI();
        gui.add(para, "repeat", 1,5).name("纹理重复");
        gui.add(para, "wrap", 1,3).name("纹理环绕").step(1);
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth /window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        change();
        requestAnimationFrame(animate);
        renderer.render(scene,camera);
    }
    function change() {
        texture.repeat.x = texture.repeat.y = para.repeat;
        if(para.wrap ==1) {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        }else if(para.wrap == 2) {
            texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
        }else if(para.wrap ==  3) {
            texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
        }
        texture.needsUpdate = true;
    }

</script>

</body>
</html>