0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

BlenderでglTF2.0エクスポートしたデータをthree.jsで透過表示

Posted at

three.jsで3Dモデルを透過で表示したいメモ

##利用した3Dモデル
https://free3d.com/3d-model/male-base-mesh-6682.html
NoName_2020-8-17_11-24-55_No-00.png

##Blenderで読み込んでglTF2.0でエクスポート

NoName_2020-8-17_11-26-3_No-00.png

##GLTFLoaderで透過の設定を追加

//3Dオブジェクトの読み込み配置
let model = null;
let loader = new GLTFLoader();
loader.load('./assets/models/man.glb',
  function (gltf) {
    let OPACITY =  0.7// Meshに付与する透過度
    ,TRANSPARENT = true// Meshの透過を有効にするか
    ,DEPTH_TEST = false// Meshの陰面処理を有効にするか
    model = gltf.scene;

    model.children[0].material.opacity=OPACITY;
    model.children[0].material.transparent=TRANSPARENT;
    model.children[0].material.depthTest=DEPTH_TEST;;

    model.scale.set(10.0, 10.0, 10.0);
    model.position.set(0,-185,0);
    scene.add(gltf.scene);
  },
  function ( error ) {
      console.log( 'An error happened' );
      console.log( error );
  });

##サイト表示
NoName_2020-8-17_11-21-44_No-00.png

##参考サイト
three.js で Mesh をレントゲン透視みたいに表示してみた
https://pisuke-code.com/three-js-mesh-x-ray-effect/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?