THREE.JS webGL导入stl模型创造环境贴图场景反光


 <html>
 <head>
     <meta charset="UTF-8" />
     <title>WebGLtitle>
    <style>
        body{margin: 0;height: 100%;background: #ffffff;}
        canvas{
            display: block;
        }
    style>

 head>
 <body onload="draw()">
     <script src="js/three.js">script>
     <script type="text/javascript" src="js/imageutils.js">script>
     <script src="js/STLLoader.js">script>
     <script src="js/OrbitControls.js">script>
     <script src="js/stats.min.js">script>
     <script src="js/dat.gui.min.js">script>
     <script src="js/Detector.js">script>


 <script>


    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({alpha:true,antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xeeeeee);
        renderer.shadowMap.enabled = true;
        //告诉渲染器需要阴影效果
        //background
        //renderer.setClearColor(0x000000,0);
        //创建反光效果
        //renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);
    }



    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0,12,15);
    }


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




    function initScene() {
        //给场景添加天空盒子纹理
        var cubeTextureLoader = new THREE.CubeTextureLoader();
        cubeTextureLoader.setPath( 'img/02/' );
        //六张图片分别是朝前的(preview_f.jpg)、朝后的(preview_b.jpg)、朝上的(preview_u.jpg)、朝下的(preview_d.jpg)、朝右的(preview_r.jpg)和朝左的(preview_l.jpg)。
        var cubeTexture = cubeTextureLoader.load( [
            'preview_r.jpg', 'preview_l.jpg',
            'preview_u.jpg', 'preview_d.jpg',
            'preview_f.jpg', 'preview_b.jpg'
        ]);

        scene = new THREE.Scene();

        scene.background = cubeTexture;
    }





    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0xffffff));

        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, 20, -20 );

        light.castShadow = true;
        light.shadow.camera.top = 10;
        light.shadow.camera.bottom = -10;
        light.shadow.camera.left = -10;
        light.shadow.camera.right = 10;

        //告诉平行光需要开启阴影投射
        light.castShadow = true;

        //scene.add(light);
    }




    function initModel() {
        //加载OBJ格式的模型
                var loader = new THREE.STLLoader();
                loader.load("img/gy.stl",function (geometry) {
                    //创建纹理
                    var texture = new THREE.ImageUtils.loadTexture("img/envmap.jpg");
                    var mat = new THREE.MeshPhongMaterial({
                        envMap: scene.background,color:0xe6e0c0
                    });
                    //mat.specular = new THREE.Color(0xa3a290);
                    mat.shininess = 30;
                    var mesh = new THREE.Mesh(geometry, mat);
                    mesh.rotation.x = -0.5 * Math.PI;
                    mesh.scale.set(0.1, 0.1, 0.1);
                    geometry.center();
                    scene.add(mesh);
                    });
                    }






       //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
            changeBg:function () {
                scene.background = new THREE.CubeTextureLoader()
                    .setPath( 'img/02/' )
                    .load( [ 'preview_r.jpg', 'preview_l.jpg', 'preview_u.jpg', 'preview_d.jpg', 'preview_f.jpg', 'preview_b.jpg' ] );

                mat.envMap = scene.background;
            }
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
        datGui.add(gui, "changeBg");
       // var datGui = new dat.GUI();
        //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
    }




    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        //document.body.appendChild(stats.dom);
    }



    //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
    var controls;
    function initControls() {
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        // 如果使用animate方法时,将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance  = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance  = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }




    function render() {
        renderer.render( scene, camera );
    }



    //窗口变动触发的函数
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }




    function animate() {
        //更新控制器
        render();
        //更新性能插件
        stats.update();
        controls.update();
        requestAnimationFrame(animate);
    }





    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();
        animate();
        window.onresize = onWindowResize;
    }
script>

html>

你可能感兴趣的:(webGL)