threejs——skybox,天空盒的使用
0 212

点击查看例子

代码效果

Image



天空盒使用源码

<!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>

0 212
() 全部评论
所有回复 (0)

最新

  • 插件下载 124 0 1 发布

    使用方法:打开3dmax软件,把砖墙插件拖拽到 视图中。

    3dmax砖墙插件下载地址|点这里

  • 插件下载 176 0 1 发布

    适用版本:  3ds max 2016 - 2022

    使用方法:在3dmax桌面快捷图标,点击鼠标右键打开文件所在位置,找到scripts文件夹下的strapup文件夹,把开孔脚本拖拽到strapup文件夹内。

    3dmax开孔神器下载地址|点这里