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:
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:
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.