Three.js でwireframeの本数や線の太さを設定したいです

ワイヤフレームの本数や線の太さを設定したいです。どうすれば良いですか？
分かる方回答お願いします！

javaScript
1
2<html>
3<head>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js">
5</script>
6<script>
7var iw = window.innerWidth;
8var ih = window.innerHeight;
9widh = iw;
10height = ih;
11
12//ページの読み込み待つ
13window.addEventListener('load',init);
14function init() {
15
16
17    //レンダラーの作成
18    const renderer = new THREE.WebGLRenderer({
19    canvas: document.querySelector("#can0")
20    });
21    renderer.setPixelRatio(window.devicePixelRatio);
22    renderer.setSize(iw,ih);
23
24    const scene = new THREE.Scene();
25
26    const camera = new THREE.PerspectiveCamera(45, iw/ih);
27    camera.position.set(0, 0, +1000);
28
29    const geometry = new THREE.SphereGeometry(500,500,500);
30    const material = new THREE.MeshPhongMaterial(        {color: "red",//MeshPhongMaterialはあみあみの時使う
31        wireframe: true//あみあみ有効→あみあみの本数を設定したいです！
32        });
33    const kyuu = new THREE.Mesh(geometry,material);
34    scene.add(kyuu);
35
36    // ライト作成
37    var light = new THREE.AmbientLight( 0x404040, 1 ); // soft white light
38    scene.add( light );
39
40    renderer.render(scene, camera);
41
42    tick();
43
44    function tick() {
45        kyuu.rotation.y += 0.01;
46        renderer.render(scene, camera); // レンダリング
47
48        requestAnimationFrame(tick);
49      }
50    }
51
52</script>
53</head>
54<body>
55    <canvas id = "can0">
56    </canvas>
57</body>
58</html>

m.ts10806

2021/02/23 01:29

自身で調べたこと試したことを記載してください。

9nahito

2021/02/23 02:39

ワイヤーフレームの設定方法はわかりませんでした。そのため球体のサイズを小さくしてカメラを近づけることにしました。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"> </script> <script> var iw = window.innerWidth; var ih = window.innerHeight; widh = iw; height = ih; //ページの読み込み待つ window.addEventListener('load',init); function init() { //レンダラーの作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#can0") }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(iw,ih); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, iw/ih); camera.position.set(0, 0, +100);カメラを近づけました。 const geometry = new THREE.SphereGeometry(50,50,50);//小さくしました const material = new THREE.MeshPhongMaterial( {color: "red",//MeshPhongMaterialはあみあみの時使う wireframe: true//あみあみ有効 }); const kyuu = new THREE.Mesh(geometry,material); scene.add(kyuu); // ライト作成 var light = new THREE.AmbientLight( 0x404040, 1 ); // soft white light scene.add( light ); renderer.render(scene, camera); tick(); function tick() { kyuu.rotation.y += 0.01; renderer.render(scene, camera); // レンダリング requestAnimationFrame(tick); } } </script> </head> <body> <canvas id = "can0"> </canvas> </body> </html>

m.ts10806

2021/02/23 03:02

質問は編集できますので。

9nahito

2021/02/23 03:08

質問を編集すればよいのですか？すみません。しかしなぜ質問を編集するのですか？ m.ts10806さんの意図が分かりません。

m.ts10806

2021/02/23 03:09

自身で調べたこと試したことを記載してください。

m.ts10806

2021/02/23 03:10

↑に対してコメントで返ってきたので、そうではなく質問に追記してもらいたいのです。そのためのコメント欄です。質問への追記修正依頼なので