threejs——skybox,天空盒的使用

资料

代码效果

天空盒使用源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js - skybox</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">
    </head>
    <body>

        <div id="container"></div>

        <script type="module">

            import * as THREE from '../build/three.module.js';
            import { OrbitControls } from './jsm/controls/OrbitControls.js';
            var scene, camera , renderer;

            init();
            animate();

            function init() {

                // scene

                scene = new THREE.Scene();

                // camera

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
                camera.position.set( - 15, 7, 15 );
                camera.lookAt( scene.position );

            
                // skybox

                var cubeTextureLoader = new THREE.CubeTextureLoader();
                cubeTextureLoader.setPath( 'textures/cube/Park2/' ); //天空盒图片文件路径

                var cubeTexture = new THREE.CubeTextureLoader.load( [
                    "posx.jpg", "negx.jpg", //图片 http://www.cglap.com/assets/lapbin/textures/cube/Park2/negx.jpg 
                    "posy.jpg", "negy.jpg", // http://www.cglap.com/assets/lapbin/textures/cube/Park2/negy.jpg
                    "posz.jpg", "negz.jpg"  //http://www.cglap.com/assets/lapbin/textures/cube/Park2/negz.jpg
                ] );

                scene.background = cubeTexture;

                // light

                var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
                scene.add( ambientLight );

                var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
                directionalLight.position.set( - 1, 1, 1 );
                scene.add( directionalLight );

                // renderer

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setPixelRatio( window.devicePixelRatio );
                document.body.appendChild( renderer.domElement );

                // 鼠标控制旋转
                var controls = new OrbitControls( camera, renderer.domElement );
                controls.minDistance = 5;
                controls.maxDistance = 50;
            
                //

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

            }

            function onResize() {

                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>

热门

最新