Sunday, 23 April 2017

I want pure .js file in node.js ,render phrase in three.js javascript file doesn't work

I want pure .js file in node.js .

I use in gitshell : browserify input.js | indexhtmlify > output.html the output in chrome is a blank page .I don't want to have an html beside like:

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

this phrase in three.js javascript file in my code doesn't work:

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 );

I have .js codes like this :

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 );

    //my problem starts-----

    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 );

    //my problem finished-----

    stats = new Stats();
    container.appendChild( stats.dom );

    var gui = new dat.GUI();
    gui.add( params, 'uniform' );
    gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function( value ) {
        splines.uniform.tension = value;
        updateSplineOutline();
    });
    gui.add( params, 'centripetal' );
    gui.add( params, 'chordal' );
    gui.add( params, 'addPoint' );
    gui.add( params, 'removePoint' );
    gui.add( params, 'exportSpline' );
    gui.open();

    // Controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    //controls = new OrbitControls( camera, renderer.domElement );
    controls.damping = 0.2;
    controls.addEventListener( 'change', render );

    transformControl = new THREE.TransformControls( camera, renderer.domElement );
    //transformControl = new TransformControls( camera, renderer.domElement );
    transformControl.addEventListener( 'change', render );

    scene.add( transformControl );
}

and so far etc... so what should I do?



via hasanbaghal

No comments:

Post a Comment