Question

枝。我正在尝试开发一个简单的three.js小部件，我可以在我的Yii2项目中使用它。创建窗口小部件的目的是绘制（基于Nurbs的）IGES CAD模型的线框，例如：

这是同一个应用程序显示的线框的屏幕截图，但使用的是没有任何框架的传统php。我正在使用yii2框架重构此代码。我按照教程creating an advanced votewidget对小部件进行了编码，文件夹结构如下：

我面临的挑战是不显示three.js画布。为了测试，我复制了一个示例，用于将here中的多维数据集绘制到 _igesdisplay.php 视图文件中，以便我验证其他代码是否有效但仍然没有显示任何内容。

小部件资产文件的代码： 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();
    }
}

_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>

代码： 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]);
    }
}
?>

使用小部件的文件的代码： Display.php

<?php

use frontend\widgets\igesdisplaywidget\IgesDisplayWidget;

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

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

viewport.css 文件包含用于更改光标样式的样式。

cursor：crosshair;

当我将鼠标悬停在网页的左半部分时，会显示十字光标，但不会显示多维数据集。如果我打开视图页面源窗口，我可以访问js和css文件，因此 IgesDisplayWidgetAsset.php 代码是可以的。我想知道可能是什么问题。

提前致谢。

three.js yii2小部件不显示

0 个答案: