PVR贴图

作者: Codifier | 来源:发表于2019-11-19 18:26 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PVR Texture</title>
        <script src="../../three-part/threejs/three.js"></script>
        <script src="../../three-part/threejs/PVRLoader.js"></script>
        <script src="../../three-part/utils/stats.min.js"></script>
        <script src="../../three-part/utils/dat.gui.min.js"></script>
        <script src="../controls/TrackballControls.js"></script>
        <script src="../util/util.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    <script type="text/javascript">
        init();
        function init() {
            // show FPS
            let stats = initStats();
            // resize
            window.addEventListener('resize', onResize, false);
    
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);
    
            let renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            document.getElementById("container").appendChild(renderer.domElement);
    
            // init trackball control
            let trackballControls = initTrackballControls(camera, renderer);
            let clock = new THREE.Clock();
    
            // add a plane
            let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
            let planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            });
            let plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            scene.add(plane);
    
            let ambienLight = new THREE.AmbientLight(0xffffff);
            scene.add(ambienLight);
    
            let spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 60, -10);
            spotLight.castShadow = true;
            scene.add(spotLight);
    
            let textureLoader = new THREE.PVRLoader();
            let pvrTexture = textureLoader.load("../assets/textures/pvr/tex_base.pvr");
    
            let sphereGeometry = new THREE.SphereGeometry(5, 20, 20);
            let sphereMaterial = new THREE.MeshStandardMaterial({
                map: pvrTexture,
                metalness: 0.2,
                roughness: 0.2
            });
            let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.position.set(0, 5, 0);
            scene.add(sphere);
    
            let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
            let cubeMaterial = new THREE.MeshStandardMaterial({
                map: pvrTexture,
                metalness: 0.2,
                roughness: 0.2
            });
            let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.position.set(0, 5, 20);
            scene.add(cube);
    
            // attributes which can be modified in GUI
            const controls = {
    
            };
            // init GUI
            initGUI();
    
            renderScene();
    
            function initGUI(){
                let gui = new dat.GUI();
            }
    
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
    
            function renderScene(){
                trackballControls.update(clock.getDelta());
                stats.update();
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);
            }
        }
    </script>
    </body>
    </html>
    

    运行结果:


    相关文章

      网友评论

          本文标题:PVR贴图

          本文链接:https://www.haomeiwen.com/subject/knsgictx.html