3Dモデル表示を実装するthree.js

このプロジェクトでは 3D モデルを表示する必要があるため、3 つについて調べました。この記事では主に 3D モデル表示を実現するための three.js のサンプル コードを紹介します。参考として。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最初に効果を見てみましょう:

Three.js は全体的にそれほど難しいものではありません。落ち着いて勉強すれば、すぐに始めることができます

まず最初に、次のことを行う必要があります。 3D モデルを配置できるページを作成します。 キャンバスは初期化されるとも言えます。 3 つ

var WIDTH,HEIGHT;
  var  renderer;
  function initThree() {
    WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
    HEIGHT = document.documentElement.clientHeight/2;
    /* 渲染器 */
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH , HEIGHT);
    renderer.setClearColor(new THREE.Color(0x66666));
    renderer.gammaInput = true;
    renderer.gammaOutput = true;

    document.body.appendChild(renderer.domElement);
  }

上記のコードから、本体にキャンバスの幅を追加したことがわかります。ここで注意すべき点は、レンダラーをオブジェクトとして設定しているためです

次に、カメラを調整する必要があります。つまり、視覚的な角度

/* 摄像头 */
  var camera;
  function initCamera() {
    var VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000;
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.set(20, 0, 0);
    //设置视野的中心坐标
    camera.lookAt(scene.position);
  }

上記のコードは主に視覚的な角度の値を制御するためのもので、必要に応じて後で調整できます。
照明効果の読み込み

/* 场景 */
   var scene;
   function initScene() {
     scene = new THREE.Scene();
   }

表示モデルオブジェクト:

/* 灯光 */
  var light,light2,light3;
  function initLight() {
    //平行光
    light = new THREE.DirectionalLight(0xFFFFFF);
    light.position.set(0, 99, 0).normalize();
    scene.add(light);
    //环境光
    light2 = new THREE.AmbientLight(0x999999);
    scene.add(light2);
    //点光源
    light3 = new THREE.PointLight(0x00FF00);
    light3.position.set(300, 0, 0);
    scene.add(light3);
  }

ここではファイルタイプに応じて対応するjsインポートを選択することで読み込むことができます STLモデルなのでSTLLoader.jsを導入しました

/* 显示对象 */
  var cube;
  function initObject(){
    // ASCII file
    var loader = new THREE.STLLoader();
    loader.addEventListener( 'load', function ( event ) {
      var loading = document.getElementById("Loading");
      loading.parentNode.removeChild(loading);
      var geometry = event.content;
      //砖红色
      var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
      //纯黑色
//      var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) ;
      //粉色 带阴影
//      var material = new THREE.MeshLambertMaterial( { color:0xff5533, side: THREE.DoubleSide } );
      //灰色
//      var material = new THREE.MeshLambertMaterial({color: 000000});  //材质设定 (颜色)
      var mesh = new THREE.Mesh( geometry, material );
      var center = THREE.GeometryUtils.center(geometry);
      var boundbox=geometry.boundingBox;
      var vector3 = boundbox.size(null);
      var vector3 = boundbox.size(null);
      console.log(vector3);
      var scale = vector3.length();
      camera.position.set(scale, 0, 0);
      camera.lookAt(scene.position);
      scene.add(camera);
      //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
      var axisHelper = new THREE.AxisHelper(800);
      scene.add(axisHelper);

      //周围边框
      bboxHelper = new THREE.BoxHelper();
      bboxHelper.visible = true;
      var meshMaterial = material;
      mainModel = new THREE.Mesh(geometry, meshMaterial);
      bboxHelper.update(mainModel);
      bboxHelper.geometry.computeBoundingBox();
      scene.add(bboxHelper);

      //地板网格
//      var gridHelper = new THREE.GridHelper(500, 40); // 500 is grid size, 20 is grid step
//      gridHelper.position = new THREE.Vector3(0, 0, 0);
//      gridHelper.rotation = new THREE.Euler(0, 0, 0);
//      scene.add(gridHelper);
//      var gridHelper2 = gridHelper.clone();
//      gridHelper2.rotation = new THREE.Euler(Math.PI / 2, 0, 0);
//      scene.add(gridHelper2);
//      var gridHelper3 = gridHelper.clone();
//      gridHelper3.rotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 2);
//      scene.add(gridHelper3);
//
//      var grid = new THREE.GridHelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#FFFFFF", "left");
//      scene.add(grid);
      var x = (boundbox.max.x - boundbox.min.x).toFixed(2);
      var y = (boundbox.max.y - boundbox.min.y).toFixed(2);
      var z = (boundbox.max.z - boundbox.min.z).toFixed(2);
      console.log(x);
      console.log(y);
      console.log(z);
      console.log(boundbox);
      mesh.position.set(0,0,0);
//      mesh.position.x = scene.position.x;
//      mesh.position.y = scene.position.y ;
//      mesh.position.z = scene.position.z;
      scene.add(mesh);
      renderer.clear();
      renderer.render(scene, camera);
    } );
    loader.load( '3dfile/莫比乌斯环.STL' );
  }

グリッドルーラーを表示する必要がある場合は、コードのグリッド部分のコメントを解除してください

制御方法は次のとおりです（表示コードには根拠を書いていませんが、キーボードのキーは拡大または縮小されていますが、参考のために提供されています)

<script src="js/STLLoader.js"></script>

最後は最初の呼び出しです

//控制
  var effect;
  var controls;
  function initControl(){
    effect = new THREE.AsciiEffect( renderer );
    effect.setSize( WIDTH, HEIGHT );
    controls = new THREE.TrackballControls( camera,renderer.domElement);
  }

完全なコードを添付します

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    effect.render( scene, camera );
  }

  function threeStart() {
    initThree();
    initScene();
    initCamera();
    initLight();
    initObject();
    initControl();
    animate();
  }

ああ、私のファイル構造

すべてのファイルが必要な場合は、メッセージを残してください

また、モデルを表示するメソッドに bboxHelper = new THREE.BoxHelper() を追加したため、モデルの寸法を取得できます。 X、Y、Z 軸は、モデルの長さ、幅、高さとみなすこともできます

関連する推奨事項:

3D モデルの使用方法? 3Dモデル使用例まとめ

Babylonjsベースの自作WebGL3Dモデルエディタ

CSS3による簡易3Dモデル構築【オリジナルオープンソース】_html/css_WEB-ITnose

以上が3Dモデル表示を実装するthree.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。