Question

我正在尝试创建折叠效果，例如将纸张折成两半。

我正在使用Three.js库来帮助我操作图像。

我使用2个PlaneGeometry创建了2张面纸，并使用ImageUtils.loadTexture加载纹理。

我很好奇是否有办法将图像分成两半然后在边缘旋转一半，这样就可以创建折叠效果。

我想这可以做到，因为创建平面函数THREE.PlaneGeometry(width, height, widthSegments, heightSegments);有widthSegments和heightSegments参数。

<html>
<head>
    <title>My first Three.js app</title>
    <style>
        body {
            background-color: #ffffff;
            margin: 0px;
            overflow: hidden;
        }
        container {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div id="container" ></div>
    
    <script src="three.min.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="stats.min.js"></script>
    <script>
        
         
            
            var renderer, scene, camera, card;
            var container, stats;

            init();
            animate();

         
         

            function init() {
              

                
                container = document.getElementById('container');
                // renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xffffff, 1.0);
            
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);


                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild(stats.domElement);

                // scene
                scene = new THREE.Scene();

                // camera
                camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
                camera.position.z = 300;
                controls = new THREE.OrbitControls(camera, container);
                camera.lookAt(scene.position);

                // geometry
                var geometry1 = new THREE.PlaneGeometry(90, 110, 3, 1);
                var geometry2 = new THREE.PlaneGeometry(90, 110, 3, 1);
                geometry2.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));

                // textures
                var textureFront = new THREE.ImageUtils.loadTexture('Flyer2pag1.png'); // Flyer has image sorce in project folder  
                var textureBack = new THREE.ImageUtils.loadTexture('Flyer2pag2.png');

                // material
                var material1 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureFront });
                var material2 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureBack });
                 

                // card
                card = new THREE.Object3D();
                scene.add(card);

                // mesh
                var mesh1 = new THREE.Mesh(geometry1, material1);
                card.add(mesh1);
                var mesh2 = new THREE.Mesh(geometry2, material2);
                card.add(mesh2);

            }
      
            function animate() {

                requestAnimationFrame(animate);

                //card.rotation.y += 0.01;
                stats.update();
                renderer.render(scene, camera);

            }
      
    </script>
</body>
</html>

Three.js折叠效果图像

0 个答案: