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

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

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

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

Q&A

0回答

766閲覧

[three.js]sceneが追加されるから同じsceneの中身だけ変えたい

aiai8976

総合スコア112

Three.js

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

0グッド

0クリップ

投稿2020/07/04 10:48

編集2020/07/04 10:50

前提・実現したいこと

three.jsを利用してブラウザでオブジェクトをレンダリングしているのですが、fetchでとってきたもので再び中身だけレンダリングしたいと思っています。
しかし、最初のsceneはそのままで、そのsceneの下に新しいsceneが追加されてしまいます。
sceneはそのままで、中身の一部だけ入れ替えるにはどうすればいいでしょうか。

発生している問題・エラーメッセージ

sceneを再レンダリングしたい

該当のソースコード

let THREE = require("three"); (function () { let scene, camera, renderer, controls; let geometry, material, mesh, axes, particles; let id = 11; init(); animate(); function getData() { const result = []; return fetch(//省略) .then((response) => { console.log(response.status); // => 200 return response.json(); }) .then((data) => { //省略 return result; }); } async function init() { /** * 表示箇所を生成するためのシーンオブジェクト * @type {Object} */ scene = new THREE.Scene(); /** * モデルの視点を決めるためのカメラオブジェクト * @type {Object} */ camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000); camera.position.set(30, 45, 30); camera.fov = 90; camera.lookAt(scene.position); /** * 座標軸を表示させる * @type {Object} */ axes = new THREE.AxisHelper(100); scene.add(axes); /** * 形状オブジェクトの生成 * @type {Object} */ geometry = new THREE.Geometry(); let data = await getData(); //for (let i = 0; i < data.length; i++){ for (let i = 0; i < POINT; i++) { geometry.vertices.push( new THREE.Vector3( //省略 ) ); } /** * 材質オブジェクトの生成 * @type {Object} */ material = new THREE.ParticleBasicMaterial({ color: 0xff0000, size: 0.5, }); /** * 点オブジェクトの生成 * @type {Object} */ particles = new THREE.ParticleSystem(geometry, material); scene.add(particles); /** * モデルをレンダリングするためのレンダラーオブジェクト * @type {Object} */ renderer = new THREE.WebGLRenderer(); renderer.setSize(600, 600); document.body.appendChild(renderer.domElement); // id指定で点群の検索処理 document.getElementById("form-button").onclick = function () { console.log(document.getElementById("number").value); id = parseInt(document.getElementById("number").value); init(); animate(); }; } function animate() { requestAnimationFrame(animate); particles.rotation.x += 0.005; particles.rotation.z += 0.002; renderer.render(scene, camera); } })();

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問