three.js-地球贴图-TextureLoader

纹理贴图

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - cameras</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
        <style>
            body{
                padding: 0px;
                margin: 0px;
                font-size: 0px;
            }
            a {
                color: #08f;
            }
            b {
                color: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="info"></div>
    </body>
    <script type="module">

        import * as THREE from './js/three.module.js';

        import Stats from './js/stats.module.js';

        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

        var camera, scene, renderer;
        var container = document.getElementById('info');
        var pointLight,particles,mesh;

        init();
        function init() {
            sceneInit();
            cameraInit();
            initCube();
            renderInit();
            animate();
        }

        function sceneInit(){
            scene = new THREE.Scene();
        }

        function initCube(){var texturePainting = new THREE.TextureLoader().load( './image/earth.jpg' );
            var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );

            mesh = new THREE.Mesh(
                new THREE.SphereBufferGeometry( 100, 42, 42 ),
                materialPainting
                // new THREE.MeshNormalMaterial( { flatShading: true } )
            );
            mesh.position.z = 1600;
           
            scene.add( mesh );
        }
        
       
        function cameraInit(){
            camera = new THREE.PerspectiveCamera( 50, aspect, 1, 10000 );
            camera.position.z = 2500;
            scene.add( camera );
        }
       

        function renderInit(){
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
            renderer.render( scene, camera );
            renderer.setClearColor(0xffffff);
            // renderer.clear();
            container.appendChild( renderer.domElement );
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        
        function render(){
            mesh.rotation.x += 0.001;
            mesh.rotation.y -= 0.005;
            renderer.clear();
            renderer.render( scene, camera );
        }

    </script>
</html>

'./js/three.module.js'

直接从官网的example里面下载下来就行了。

文档: https://threejs.org/docs/index.html#api/en/loaders/TextureLoader

var texturePainting = new THREE.TextureLoader().load( './image/earth.jpg' );
var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ); //基础材质

//上面两行是贴图材质的写法
mesh = new THREE.Mesh(
     new THREE.SphereBufferGeometry( 100, 42, 42 ),
     materialPainting
);

官方文档的demo还有一个异步的加载

var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );

// immediately use the texture for material creation
var material = new THREE.MeshBasicMaterial( { map: texture } );

网上找的图片

three.js-地球贴图-TextureLoader

猜你喜欢