前提・実現したいこと
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); } })();
あなたの回答
tips
プレビュー