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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

749閲覧

three.jsの開発段階でcpu使用率がすぐ100%になってしまう

anxiety666444

総合スコア3

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/12/20 17:19

前提

three.jsでglbファイルを表示してマウスでロテートさせるページを作っています。
使ってるモジュールは
GLTFLoader
OrbitControls
Three.min
です
https://web-creates.com/code/blender-threejs/
このページを参考にしています。というかこのソースコードをそのまま貼り付けても問題が発生します
htmlファイルをlive sereverで起動しています(静的なものではないのでファイル直開きでは難しいものと認識してます)
パソコンはそこまで悪いものではないです(i5 10210U/ 16GB)

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

ページの表示はできており3dモデルの回転もできるのですが、コンソールにメッセージが無限に出てきてCPU使用率が100%になり、それ以降の開発が難しいです

Ws {isObject3D: true, uuid: '54cf6bb7-981c-4f80-83ac-1036d80655da', name: 'Scene', type: 'Group', parent: ea, …}

というようなオブジェクトで、スクリプトファイルではなくVMからのメッセージです

該当のソースコード

javascript

1window.addEventListener("DOMContentLoaded", init); 2 3function init() { 4 // レンダラーを作成 5 const renderer = new THREE.WebGLRenderer({ 6 canvas: document.querySelector("#canvas"), 7 alpha: true, 8 }); 9 // ウィンドウサイズ設定 10 width = document.getElementById("main_canvas").getBoundingClientRect().width; 11 height = document 12 .getElementById("main_canvas") 13 .getBoundingClientRect().height; 14 renderer.setPixelRatio(1); 15 renderer.setSize(width, height); 16 console.log(window.devicePixelRatio); 17 console.log(width + ", " + height); 18 19 // シーンを作成 20 const scene = new THREE.Scene(); 21 scene.background = new THREE.Color(0x87b8c0); // 背景色 22 23 // カメラを作成 24 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); 25 camera.position.set(0, 400, -1000); 26 27 const controls = new THREE.OrbitControls(camera, renderer.domElement); 28 29 // Load GLTF or GLB 30 const loader = new THREE.GLTFLoader(); 31 const url = "3d/test.glb"; 32 33 // window size 34 const w_height = window.innerHeight; 35 36 let model = null; 37 loader.load( 38 url, 39 function (gltf) { 40 model = gltf.scene; 41 // model.name = "model_with_cloth"; 42 model.scale.set(100.0, 100.0, 100.0); 43 model.position.set(0, (w_height / 3) * -1, 0); 44 scene.add(gltf.scene); 45 46 // model["test"] = 100; 47 }, 48 function (error) { 49 console.log("An error happened"); 50 console.log(error); 51 } 52 ); 53 renderer.gammaOutput = true; 54 renderer.gammaFactor = 2.2; 55 56 // 平行光源 57 const light = new THREE.DirectionalLight(0xffffff); 58 light.intensity = 1; // 光の強さ 59 light.position.set(3, 10, 1); 60 // シーンに追加 61 scene.add(light); 62 63 //環境光源(アンビエントライト):すべてを均等に照らす、影のない、全体を明るくするライト 64 const ambient = new THREE.AmbientLight(0xf8f8ff, 0.7); 65 scene.add(ambient); //シーンにアンビエントライトを追加 66 67 // 初回実行 68 tick(); 69 70 function tick() { 71 controls.update(); 72 73 if (model != null) { 74 console.log(model); 75 } 76 renderer.render(scene, camera); 77 requestAnimationFrame(tick); 78 } 79} 80

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

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

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

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

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

guest

回答1

0

ベストアンサー

Ws {isObject3D: true, uuid: '54cf6bb7-981c-4f80-83ac-1036d80655da', name: 'Scene', type: 'Group', parent: ea, …}

https://web-creates.com/demo/20211206blender/

にて同様のログがコンソールに出力されていることを確認しました。

ログが無限に出るのは tick() 関数の中でログ出力処理をしていることが原因かと思います。
コメントアウトして CPU 使用率が改善されるか確認してみてください。

javascript

1 function tick() { 2 controls.update(); 3/* 4 if (model != null) { 5 console.log(model); 6 } 7*/ 8 renderer.render(scene, camera); 9 requestAnimationFrame(tick); 10 }

投稿2022/12/21 11:46

cx20

総合スコア4633

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問