1

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

在此处输入图像描述

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

在此处输入图像描述

我面临的挑战是未显示three.js 画布。为了测试，我将一个从这里绘制立方体的示例复制到_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文件包含用于更改光标样式的样式。

光标：十字准线；

当我将鼠标悬停在网页的左半边时，会显示十字光标，但没有显示立方体。如果我打开查看页面源窗口，我可以访问 js 和 css 文件，因此IgesDisplayWidgetAsset.php代码就可以了。我想知道可能是什么问题。

提前致谢。

4

0 回答 0