質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

Q&A

解決済

1回答

2049閲覧

three.js 正方形の斜線を消す方法を教えてください

kurisu

総合スコア8

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

0グッド

0クリップ

投稿2017/11/21 13:17

###前提・実現したいこと
three.jsを使って、正方形の描画を試みていますが、
正方形の外枠を消す方法がわかりません、、、
どなたかご教授願いいただけませんか?

###該当のソースコード

function init() { renderer = new THREE.WebGLRenderer({ antialias: true }); //renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //カメラをセット camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 600; scene = new THREE.Scene(); material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); geometry = new THREE.CubeGeometry(300, 300, 300); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } init(); animate();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

どうぞ。

投稿2017/11/21 13:55

adrs2002

総合スコア203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurisu

2017/11/21 14:18

回答ありがとうございます!! 「wireframe: true」を消しましたが、 今度は、立方体のように変化しました。 外枠のまま、斜線を消すのは不可能なのでしょうか??
adrs2002

2017/11/21 14:53

なるほど。つまり、「四角形を四角形のまま、輪郭線だけ出したい」という形でしょうか。 wireframe を使ってしまうと、すべての1面の境界線が必ず出力されてしまうため、使えないでしょう(4角形はかならず3角形2つで作られますので…) であれば、 EdgesGeometry を使ってみてはいかがでしょう。 ``` // ↓この3行を消します。 // geometry = new THREE.CubeGeometry(300, 300, 300); // mesh = new THREE.Mesh(geometry, material); // scene.add(mesh); // 代わりに、これが追加されます。 var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 ); var edges = new THREE.EdgesGeometry( geometry ); var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) ); scene.add( line ); ```
kurisu

2017/11/23 02:44

修正いたしましたら、外枠のみ描画できました!!!! ありがとうございます。 wireframeが、全ての一面の境界線が必ず出力される性質だとは知りませんでした。 すごく勉強になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問