ThreeJs的学习：贴图（1）Face贴图

最新推荐文章于 2024-02-08 23:01:47 发布

太古时代

最新推荐文章于 2024-02-08 23:01:47 发布

阅读量2k

点赞数 1

分类专栏： Canvas与WebGL

本文链接：https://blog.csdn.net/jinold/article/details/97831606

版权

Canvas与WebGL 专栏收录该内容

20 篇文章 7 订阅

订阅专栏

参考：https://blog.csdn.net/jinold/article/details/97873523

比之前的例子，多了贴图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - indexed instancing (single box), dynamic updates</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>

    <div id="container"></div>
    <script src="js/three.js"></script>
    <script src="js/WebGL.js"></script>
    <script src="js/controls/MapControls.js"></script>

    <script>

        if ( WEBGL.isWebGLAvailable() === false ) {

            document.body.appendChild( WEBGL.getWebGLErrorMessage() );

        }

        var container;
        var camera, scene, renderer, mesh;
        var offsetAttribute, orientationAttribute;


        init();
        animate();

        function init() {

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 100;
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xf0f0f0 );
            
            controls = new THREE.MapControls( camera,container );
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
            
            var pointLight = new THREE.PointLight( 0xff4444, 1 );
            pointLight.position.set(50, 60, 100);
            pointLight.castShadow = true;
            scene.add( pointLight );
            
            //立方体
            //var cubeGeometry = new THREE.BufferGeometry();
            var cubeGeometry = new THREE.Geometry();
            //创建立方体的顶点
            var vertices = [
                new THREE.Vector3( 10, 10, 10),   //v0
                new THREE.Vector3(-10, 10, 10),  //v1
                new THREE.Vector3(-10, -10, 10), //v2
                new THREE.Vector3( 10, -10, 10),  //v3
                new THREE.Vector3( 10, -10, -10), //v4
                new THREE.Vector3( 10, 10, -10),  //v5
                new THREE.Vector3(-10, 10, -10), //v6
                new THREE.Vector3(-10, -10, -10) //v7
            ];
            cubeGeometry.vertices = vertices;  //设置立方体的各个坐标点
            // 创建立方的面，各个面的排列顺序
            // 一个Face是一个三角形，两个Face才形成一个正方形，参照BufferGeometry的例子
            var faces=[
                new THREE.Face3(0,1,2), // Face 1-1
                new THREE.Face3(0,2,3), // Face 1-2
                new THREE.Face3(0,3,4), // Face 2-1
                new THREE.Face3(0,4,5), // Face 2-2
                new THREE.Face3(1,6,7), // Face 3
                new THREE.Face3(1,7,2),
                new THREE.Face3(6,5,4), // Face 4
                new THREE.Face3(6,4,7),
                new THREE.Face3(5,6,1), // Face 5
                new THREE.Face3(5,1,0),
                new THREE.Face3(3,2,7), // Face 6
                new THREE.Face3(3,7,4)
            ];
            cubeGeometry.faces = faces;
            cubeGeometry.verticesNeedUpdate = false
            cubeGeometry.normalsNeedUpdate = false
            cubeGeometry.uvsNeedUpdate = false
            cubeGeometry.elementsNeedUpdate = false
            cubeGeometry.groupsNeedUpdate = false
            cubeGeometry.lineDistancesNeedUpdate = false
            
            // 给立方体设置贴图
            var materials = [];  //创建一个贴图数组
            
            
            var uv = [new THREE.Vector2(1,1),
                      new THREE.Vector2(0,0),
                      new THREE.Vector2(1,0),
                      new THREE.Vector2(0,1)];
            // 设置纹理坐标, 除于2是因为一个正方形有两个三角形组成
            cubeGeometry.faceVertexUvs = [new Array(0)]
            for(var faceId = 0; faceId < cubeGeometry.faces.length / 2; faceId++){
                // materialIndex = faceId
                // 记录每个面的id，将纹理坐标和faceid间接关联，否则纹理图片始终都是第一张的图片
                // ===========
                // face的第一个三角形贴图
                cubeGeometry.faces[faceId * 2].materialIndex = faceId;
                cubeGeometry.faceVertexUvs[0][faceId * 2] = [uv[0],uv[3],uv[1]];
                
                // 如果下面两行没有写，每个正方形面部都只有一个三角形的贴图
                // face的第二个三角形贴图
                cubeGeometry.faces[faceId * 2 + 1].materialIndex = faceId;
                cubeGeometry.faceVertexUvs[0][faceId * 2 + 1] = [uv[0],uv[1],uv[2]];
                
                // 给每一面提供Material
                materials[faceId] = new THREE.MeshBasicMaterial({
                    map:THREE.ImageUtils.loadTexture('module/' + (faceId + 1) + '.png',
                    {},function(){
                        renderer.render(scene,camera);
                    })
                })
            }
            
            var cubeMaterial = new THREE.MeshFaceMaterial(materials);
            
            cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            scene.add(cube);

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

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

        }
        
        function onWindowResize( event ) {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );

        }
        
        function animate() {
            
            requestAnimationFrame( animate );

            render();

        }

        function render() {

            renderer.render( scene, camera );

        }

    </script>

</body>
</html>

关于uv和faceVertexUvs的说明参考

var uv = [new THREE.Vector2(1,1),
          new THREE.Vector2(0,0),
          new THREE.Vector2(1,0),
          new THREE.Vector2(0,1)];

https://blog.csdn.net/kingov/article/details/77196841

太古时代

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ThreeJs的学习：贴图（1）Face贴图

参考：https://blog.csdn.net/jinold/article/details/97873523比之前的例子，多了贴图<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - indexed instancing (single box), dyn...
复制链接

扫一扫