Saturday 22 April 2017

require('./js/libs/stats.min.js'); and require('./js/libs/dat.gui.min.js') phrase in three.js javascript file doesn't work

require('./js/libs/stats.min.js'); and require('./js/libs/dat.gui.min.js') phrase in three.js javascript file in my code doesn't work.this is the phrase:

     var THREE=require('../build/three.js')
        window.THREE = THREE;

         require('./js/controls/DragControls.js')
         require('./js/controls/OrbitControls.js')
         require('./js/controls/TransformControls.js')


        require('./js/libs/stats.min.js');

        require('./js/libs/dat.gui.min.js')
/*
        var Stats=require('./js/libs/stats.min.js')
window.Stats = Stats;
        var dat=require('./js/libs/dat.gui.min.js')
window.dat = dat;
*/

and this is a part of code:

function init() {


            container = document.getElementById( 'container' );

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( 0, 250, 1000 );
            scene.add( camera );

            scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
            var light = new THREE.SpotLight( 0xffffff, 1.5 );
            light.position.set( 0, 1500, 200 );
            light.castShadow = true;
            light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
            light.shadow.bias = -0.000222;
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 1024;
            scene.add( light );
            spotlight = light;

            // scene.add( new THREE.CameraHelper( light.shadow.camera ) );
            //-------------------------------------------------------------
            //scene.add( new THREE.CameraHelper( light.shadow.camera ) );

            var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
            planeGeometry.rotateX( - Math.PI / 2 );
            var planeMaterial = new THREE.ShadowMaterial();
            planeMaterial.opacity = 0.2;

            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.position.y = -200;
            plane.receiveShadow = true;
            scene.add( plane );

            var helper = new THREE.GridHelper( 2000, 100 );
            helper.position.y = - 199;
            helper.material.opacity = 0.25;
            helper.material.transparent = true;
            scene.add( helper );

            var axis = new THREE.AxisHelper();
            axis.position.set( -500, -500, -500 );
            scene.add( axis );



            renderer = new THREE.WebGLRenderer( { antialias: true } );

            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMap.enabled = true;

            container.appendChild( renderer.domElement );


            stats = new Stats();

            container.appendChild( stats.dom );

and so far etc...

these codes doesn't work:

        stats = new Stats();

container.appendChild( stats.dom );

I use in gitshell : browserify input.js | indexhtmlify > output.html so what should I do? so the browser(chrome) is blank page.



via hasanbaghal

No comments:

Post a Comment