three.js yii2 widget not displaying

291 Views Asked by At

Hie. I am trying to develop a simple three.js widget that I can use in my Yii2 project. The intention of creating the widget is to draw wireframes of (Nurbs based) IGES CAD models, for example:

enter image description here

This is screenshot of a wireframe displayed by the same app but using traditional php without any framework. I am refactoring this code using the yii2 framework. I followed a tutorial creating an advanced votewidget to code the widget and the folder structure is as follows:

enter image description here

The challenge I am facing is that the three.js canvas is not displayed. For the sake of testing I copied an example for drawing a cube from here into _igesdisplay.php view file so that i verify whether other code works but still nothing is displayed.

The code for the widget asset file: IgesDisplayWidgetAsset.php

<?php

namespace frontend\widgets\igesdisplaywidget;

use frontend\widgets\igesdisplaywidget\IgesDisplayWidget;

use yii\web\AssetBundle;

class IgesDisplayWidgetAsset extends AssetBundle
{
    public $js = [
        // 'js/votewidget.js',
        // 'js/three.js',
        'js/three.min.js',
        'js/curves/NURBSCurve.js',
        'js/curves/NURBSUtils.js',
        'js/renderers/Projector.js',
        'js/renderers/CanvasRenderer.js',
        'js/libs/stats.min.js',
        'js/controls/TrackballControls.js',
        'js/controls/OrbitControls.js',
        'js/Detector.js',
        'js/libs/stats.min.js',
    ];

    public $css = [
         // CDN lib
        'css/viewport.css'
    ];

    public $img = [
        // 'img/100.jpg'
    ];

    public $depends = [
        'yii\web\JqueryAsset'
    ];

    public function init()
    {
        // Tell AssetBundle where the assets files are
        $this->sourcePath = __DIR__ . "/assets";
        // echo $this->basePath;
        parent::init();
    }
}

Code for _igesdisplay.php

<?php

use yii\helpers\Html;

?>

<div>
    <h4><?= Html::encode($display->title) ?></h4>
    <div>
        <canvas id="debug" style="position:absolute; left:100px"></canvas>
        <script>
        var scene, camera, renderer;
        var geometry, material, mesh;

        init();
        animate();

        function init() {

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 1000;

            geometry = new THREE.BoxGeometry( 200, 200, 200 );
            material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

        }

        function animate() {

            requestAnimationFrame( animate );

            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.02;

            renderer.render( scene, camera );

        }
          </script>
    </div>
</div>

code for : IgesDisplayWidget.php

<?php

namespace frontend\widgets\igesdisplaywidget;

use yii\base\Widget;
use yii\helpers\Html;

class IgesDisplayWidget extends Widget
{
    public $model;

    public function init()
    {
        parent::init();
    }

    public function run()
    {
         // Register AssetBundle
        IgesDisplayWidgetAsset::register($this->getView());
        return $this->render('_igesdisplay', ['display' => $this->model]);
    }
}
?>

code for the file that uses the widget : Display.php

<?php

use frontend\widgets\igesdisplaywidget\IgesDisplayWidget;

$cadModel = (object)['title'=> 'Model Wireframe', 'wireframe' => $edgetype];
?>

<?= IgesDisplayWidget::widget(['model' => $cadModel]) ?>

The viewport.css file contains a style for changing the cursor style.

cursor: crosshair;

When I hover over the left half of the web page the crosshair cursor is shown but no cube is displayed. If I open the view page source window I can access both js and css files so the IgesDisplayWidgetAsset.php code is ok. I would like to know what could be the problem.

Thanks in advance.

0

There are 0 best solutions below