locked
help with this javascript error in maths calculations of cube RRS feed

  • Question

  • User186897 posted
     <script>
            
            //$("#Button1").click(function () {  
                var container //   , stats;
                var camera, controls, scene, renderer;
                var objects = [];
                var plane = new THREE.Plane();
                var raycaster = new THREE.Raycaster();
                var mouse = new THREE.Vector2(),
                offset = new THREE.Vector3(),
                intersection = new THREE.Vector3(),
                INTERSECTED, SELECTED;
    
                animate();
    
                function drawcubes(){
                    var N = document.getElementById('ncubes').value;
    
                    init(N);
                }
          
                function init(N) {
    
                    container = document.getElementById('canvas1'); 
                    camera = new THREE.PerspectiveCamera( 70, container.offsetWidth / container.offsetHeight, 1, 10000 );
                    camera.position.z = 2000;
                    camera.position.y = 1400;
                    camera.position.x = -800;
    
    
                    controls = new THREE.TrackballControls( camera , container ); //**
                    controls.rotateSpeed = 2.0;
                    controls.zoomSpeed = 1.2;
                    controls.panSpeed = 0.8;
                    controls.noZoom = false;
                    controls.noPan = false;
                    controls.staticMoving = true;
                    controls.dynamicDampingFactor = 0.3;
    
                    scene = new THREE.Scene();
                    scene.add( new THREE.AmbientLight( 0x505050 ) );
    
                    var light = new THREE.SpotLight( 0xffffff, 1.5 );
                    light.position.set( 0, 500, 2000 );
                    light.castShadow = true;
                    light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
                    light.shadow.bias = - 0.00022;
                    light.shadow.mapSize.width = 2048;
                    light.shadow.mapSize.height = 2048;
                    scene.add( light );
    
                    var otherlight = new THREE.SpotLight( 0xffffff, 1.5 );
                    otherlight.position.set( 1000, 500, 2000 );
                    otherlight.castShadow = true;
                    otherlight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
                    otherlight.shadow.bias = - 0.00022;
                    otherlight.shadow.mapSize.width = 2048;
                    otherlight.shadow.mapSize.height = 2048;
                    scene.add( otherlight );
    
    				
            
    
                    // CUBES GET CREATED HERE:
            
                    var r = Math.cbrt(N); // cube root of N
                    var C = Math.ceil(r); // rounded up
                    var scalefactor = 100;
                    var cubesize = scalefactor*0.7;
                    var geometry = new THREE.BoxGeometry( cubesize, cubesize, cubesize );
                    var limit = C * scalefactor; // cube size limits
                    var ax = ay = az = scalefactor - limit; // starting point is minus limit
    
                    for ( var i = 0; i < N; i ++ ) {
    
                        var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x334455 } ) );
    
                        object.position.x = ax;
                        object.position.y = ay;
                        object.position.z = az;
    
                        object.scale.x = 2;
                        object.scale.y = 2;
                        object.scale.z = 2;
    
                        object.castShadow = true;
                        object.receiveShadow = true;
    
                        scene.add( object );
    
                        objects.push( object );
    
                        ax = ax + scalefactor*2;
                        if(ax > limit){
                            ax = scalefactor - (limit);
                            ay = ay + scalefactor*2;
                        }
                        if(ay > (limit)){
                            ay = scalefactor - (limit);
                            az = az + scalefactor*2;
                        }  
                    }
    
                    // END OF CREATE CUBES
                    // NEXT: RENDER SCENE
            
                    renderer = new THREE.WebGLRenderer( { antialias: true } );
                    renderer.setClearColor( 0xf0f0f0 );
                    renderer.setPixelRatio( container.devicePixelRatio ); 
                    renderer.setSize( container.offsetWidth - 4, container.offsetHeight - 4);  
                    renderer.sortObjects = false;
    
                    renderer.shadowMap.enabled = true;
                    renderer.shadowMap.type = THREE.PCFShadowMap;
    
                    container.appendChild( renderer.domElement );
    
                    renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
                    renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
                    renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
    
    
                }
    
    
    
          
                function onDocumentMouseMove( event ) {
    
                    event.preventDefault();
    
                    mouse.x = ( event.clientX / container.innerWidth ) * 2 - 1;  ///////
                    mouse.y = - ( event.clientY / container.innerHeight ) * 2 + 1;  ///////
    
                    raycaster.setFromCamera( mouse, camera );
    
                    if ( SELECTED ) {
    
                        if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
    
                            SELECTED.position.copy( intersection.sub( offset ) );
    
                        }
    
                        return;
    
                    }
    
                    var intersects = raycaster.intersectObjects( objects );
    
                    if ( intersects.length > 0 ) {
    
                        if ( INTERSECTED != intersects[ 0 ].object ) {
    
                            if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
    
                            INTERSECTED = intersects[ 0 ].object;
                            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
    
                            plane.setFromNormalAndCoplanarPoint(
                                camera.getWorldDirection( plane.normal ),
                                INTERSECTED.position );
    
                        }
    
                        container.style.cursor = 'pointer';
    
                    } else {
    
                        if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
    
                        INTERSECTED = null;
    
                        container.style.cursor = 'auto';
    
                    }
    
                }
    
                function onDocumentMouseDown( event ) {
    
                    event.preventDefault();
    
                    raycaster.setFromCamera( mouse, camera );
    
                    var intersects = raycaster.intersectObjects( objects );
    
                    if ( intersects.length > 0 ) {
    
                        controls.enabled = false;
    
                        SELECTED = intersects[ 0 ].object;
    
                        if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
    
                            offset.copy( intersection ).sub( SELECTED.position );
    
                        }
    
                        container.style.cursor = 'move';
    
                    }
    
                }
    
                function onDocumentMouseUp( event ) {
    
                    event.preventDefault();
    
                    controls.enabled = true;
    
                    if ( INTERSECTED ) {
    
                        SELECTED = null;
    
                    }
    
                    container.style.cursor = 'auto';
    
                }
    
                //
    
                function animate() {
    
                    requestAnimationFrame( animate );
    
                    render();
    
                }
    
                function render() {
    
                    controls.update();
    
                    renderer.render( scene, camera );
    
                }
          

    I have abov code and it shows below error

      var r = Math.cbrt(N); // cube root of N
    Error: Object doesn't suport prperty or method cbrt

    Saturday, December 31, 2016 3:24 PM

All replies

  • User527778624 posted

    Hi,

    Math.cbrt(N) is not supported in all browsers.

    try using polyfill for it, check this MDN site:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cbrt

    Sunday, January 1, 2017 8:19 AM
  • User-271186128 posted

    Hi Lexi85,

    As raju dasa said, the IE browser not support the Math.cbrt() function.

    Besides, when using this function the parameter is a number. I suppose it is better to check whether the value is a number, and convert it to a number.

    Best regards,
    Dillion

    Tuesday, January 3, 2017 8:21 AM
  • User186897 posted

    wel I am new to javascript...so u mean I need to replace Math.cbrt(N) from my code and change it to below

    Math.cbrt = Math.cbrt || (function(){
      if (Math.sign){
        return function(x) {
          x = parseInt(x);
          // If x is NaN or 0 then return x, else compute the cube root
          return x?(Math.sign(x)*Math.pow(Math.abs(x),0.3333333333333333):x;
        };
      } else {
        return function(x) {
          x = parseInt(x);
          // If x is NaN or 0 then return x, else compute the cube root
          return x?((x/Math.abs(x))*Math.pow(Math.abs(x),0.3333333333333333):x;
        };
      }
    })();

    Tuesday, January 3, 2017 8:21 AM
  • User-271186128 posted

    Hi Lexi85,

    You could refer to the following code, it works well on my side (Using IE browser):

        <script type="text/javascript">
            Math.cbrt = Math.cbrt || (function(){
                if (Math.sign){
                    return function(x) {
                        x = parseInt(x);
                        // If x is NaN or 0 then return x, else compute the cube root
                        return x?(Math.sign(x)*Math.pow(Math.abs(x),0.3333333333333333)):x;
                    };
                } else {
                    return function(x) {
                        x = parseInt(x);
                        // If x is NaN or 0 then return x, else compute the cube root
                        return x?((x/Math.abs(x))*Math.pow(Math.abs(x),0.3333333333333333)):x;
                    };
                }
            })();
            function myfunction() {
                Math.cbrt(-1); // -1
                Math.cbrt(0);  // 0
                Math.cbrt(1);  // 1
    
                Math.cbrt(2);  // 1.2599210498948734
    
    
                alert(Math.cbrt(2));
    
    
            }
        </script>
    </head>
    <body onload="myfunction();">

    Best regards,
    Dillion

    Saturday, January 7, 2017 4:14 AM