Three.js でシーンを作成する方法
前のセクションでは、シーンへのオブジェクトの追加について説明しました。この記事では、理解を深めていただくために、各機能ポイントについて詳しく説明する予定です。一方で、私は困っている人たちを
助けたいと思っています。
1. WEBGL を学習するときは、まず WebGL プログラムの作成に必要な手順を理解する必要があります。豚の角煮と漬物を作るのと同じように、どのような手順が必要ですか。
WebGL描画コンテキストを初期化
シェーダープログラムを初期化
モデルとデータキャッシュを構築
描画とアニメーションを完成させる
これはプロセス指向のプログラミングです。ただし、three.js はオブジェクト指向プログラミングです。主にシーン(scene)、カメラ(camera)、レンダラー(renderer)の3つのオブジェクトを構築します。
これら 3 つのことは何を意味しますか?それが何なのか全く分かっていないようです。小さな例を挙げると、映画を例に挙げます。シーンはレイアウト空間全体のようなもので、カメラは撮影期間のようなものです。レンダラーは、撮影したムービーをフィルム、つまりコンピュータの画面に変換することに相当します。
シーンとスペースには 3D モデルとデータ モデルが含まれ、レンダラーにはシェーダーと WebGL 描画コンテキストが含まれます。
2. THREE.JS はシーン、カメラ、レンダラーを作成します
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo1(three入门第一篇)</title></head><body></body><script type="text/javascript" src="js/three.js?1.1.11"></script><script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压变形。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>3. アクターを追加します (3D キューブ)。
//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放
このように俳優がフレーム内に収まります。
4. この俳優をどう動かすか？
//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */
その俳優がシーンに入ってきて、印象的な効果をもたらしました。最初の短編小説はほぼ完成しています。
5. コード全体 (当初は GitHup でホストされる予定でした)。遅すぎることがわかりました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1(three入门第一篇)</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/three.js?1.1.11"></script>
<script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压缩。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */</script>
</html>以上がThree.js でシーンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7554
15
1382
52
83
11
24
96
パデュー大学による、時間をかける価値のある拡散モデルのチュートリアル
Apr 07, 2024 am 09:01 AM
拡散はより良いものを模倣するだけでなく、「創造」することもできます。拡散モデル（DiffusionModel）は、画像生成モデルである。 AI 分野でよく知られている GAN や VAE などのアルゴリズムと比較すると、拡散モデルは異なるアプローチを採用しており、その主な考え方は、最初に画像にノイズを追加し、その後徐々にノイズを除去するプロセスです。ノイズを除去して元の画像を復元する方法は、アルゴリズムの中核部分です。最後のアルゴリズムは、ランダムなノイズを含む画像から画像を生成できます。近年、生成 AI の驚異的な成長により、テキストから画像への生成、ビデオ生成など、多くのエキサイティングなアプリケーションが可能になりました。これらの生成ツールの背後にある基本原理は、以前の方法の制限を克服する特別なサンプリング メカニズムである拡散の概念です。
ワンクリックでPPTを生成！キミ: まずは「PPT出稼ぎ労働者」を普及させましょう
Aug 01, 2024 pm 03:28 PM
キミ: たった 1 文の PPT がわずか 10 秒で完成します。 PPTはとても面倒です！会議を開催するには PPT が必要であり、週次報告書を作成するには PPT が必要であり、投資を勧誘するには PPT を提示する必要があり、不正行為を告発するには PPT を送信する必要があります。大学は、PPT 専攻を勉強するようなものです。授業中に PPT を見て、授業後に PPT を行います。おそらく、デニス オースティンが 37 年前に PPT を発明したとき、PPT がこれほど普及する日が来るとは予想していなかったでしょう。 PPT 作成の大変な経験を話すと涙が出ます。 「20 ページを超える PPT を作成するのに 3 か月かかり、何十回も修正しました。PPT を見ると吐きそうになりました。」 「ピーク時には 1 日に 5 枚の PPT を作成し、息をすることさえありました。」 PPTでした。」 即席の会議をするなら、そうすべきです
自動運転シナリオにおけるロングテール問題を解決するにはどうすればよいでしょうか?
Jun 02, 2024 pm 02:44 PM
昨日の面接で、ロングテール関連の質問をしたかと聞かれたので、簡単にまとめてみようと思いました。自動運転のロングテール問題とは、自動運転車におけるエッジケース、つまり発生確率が低い考えられるシナリオを指します。認識されているロングテール問題は、現在、単一車両のインテリジェント自動運転車の運用設計領域を制限している主な理由の 1 つです。自動運転の基礎となるアーキテクチャとほとんどの技術的問題は解決されており、残りの 5% のロングテール問題が徐々に自動運転の開発を制限する鍵となってきています。これらの問題には、さまざまな断片的なシナリオ、極端な状況、予測不可能な人間の行動が含まれます。自動運転におけるエッジ シナリオの「ロング テール」とは、自動運転車 (AV) におけるエッジ ケースを指します。エッジ ケースは、発生確率が低い可能性のあるシナリオです。これらの珍しい出来事
CVPR 2024 のすべての賞が発表されました!オフラインでのカンファレンスには1万人近くが参加し、Googleの中国人研究者が最優秀論文賞を受賞した
Jun 20, 2024 pm 05:43 PM
北京時間6月20日早朝、シアトルで開催されている最高の国際コンピュータビジョンカンファレンス「CVPR2024」が、最優秀論文やその他の賞を正式に発表した。今年は、最優秀論文 2 件と学生優秀論文 2 件を含む合計 10 件の論文が賞を受賞しました。また、最優秀論文ノミネートも 2 件、学生優秀論文ノミネートも 4 件ありました。コンピュータービジョン (CV) 分野のトップカンファレンスは CVPR で、毎年多数の研究機関や大学が集まります。統計によると、今年は合計 11,532 件の論文が投稿され、2,719 件が採択され、採択率は 23.6% でした。ジョージア工科大学による CVPR2024 データの統計分析によると、研究テーマの観点から最も論文数が多いのは画像とビデオの合成と生成です (Imageandvideosyn
Realme Phoneでフォルダーを作成するにはどうすればよいですか?
Mar 23, 2024 pm 02:30 PM
タイトル: Realme Phone 初心者ガイド: Realme Phone でフォルダーを作成する方法?今日の社会において、携帯電話は人々の生活に欠かせないツールとなっています。人気のスマートフォン ブランドとして、Realme Phone はそのシンプルで実用的なオペレーティング システムでユーザーに愛されています。 Realme 携帯電話を使用する過程で、多くの人が携帯電話上のファイルやアプリケーションを整理する必要がある状況に遭遇する可能性があり、フォルダーを作成するのが効果的な方法です。この記事では、ユーザーが携帯電話のコンテンツをより適切に管理できるように、Realme 携帯電話にフォルダーを作成する方法を紹介します。いいえ。
ベアメタルから 700 億のパラメータを備えた大規模モデルまで、チュートリアルとすぐに使えるスクリプトがここにあります
Jul 24, 2024 pm 08:13 PM
LLM が大量のデータを使用して大規模なコンピューター クラスターでトレーニングされていることはわかっています。このサイトでは、LLM トレーニング プロセスを支援および改善するために使用される多くの方法とテクノロジが紹介されています。今日、私たちが共有したいのは、基礎となるテクノロジーを深く掘り下げ、オペレーティング システムさえ持たない大量の「ベア メタル」を LLM のトレーニング用のコンピューター クラスターに変える方法を紹介する記事です。この記事は、機械がどのように考えるかを理解することで一般的な知能の実現に努めている AI スタートアップ企業 Imbue によるものです。もちろん、オペレーティング システムを持たない大量の「ベア メタル」を LLM をトレーニングするためのコンピューター クラスターに変換することは、探索と試行錯誤に満ちた簡単なプロセスではありませんが、Imbue は最終的に 700 億のパラメータを備えた LLM のトレーニングに成功しました。プロセスが蓄積する
AIの活用 | AIが一人暮らしの女の子の生活ビデオブログを作成、3日間で数万件の「いいね！」を獲得
Aug 07, 2024 pm 10:53 PM
Machine Power Report 編集者: Yang Wen 大型モデルや AIGC に代表される人工知能の波は、私たちの生活や働き方を静かに変えていますが、ほとんどの人はまだその使い方を知りません。そこで、直感的で興味深く、簡潔な人工知能のユースケースを通じてAIの活用方法を詳しく紹介し、皆様の思考を刺激するコラム「AI in Use」を立ち上げました。また、読者が革新的な実践的な使用例を提出することも歓迎します。ビデオリンク: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ 最近、Xiaohongshu で一人暮らしの女の子の生活 vlog が人気になりました。イラスト風のアニメーションといくつかの癒しの言葉を組み合わせれば、数日で簡単に習得できます。
技術初心者必読：C言語とPythonの難易度分析
Mar 22, 2024 am 10:21 AM
タイトル: 技術初心者必読: 具体的なコード例を必要とする C 言語と Python の難易度分析 今日のデジタル時代において、プログラミング技術はますます重要な能力となっています。ソフトウェア開発、データ分析、人工知能などの分野で働きたい場合でも、単に興味があってプログラミングを学びたい場合でも、適切なプログラミング言語を選択することが最初のステップです。数あるプログラミング言語の中でも、C言語とPythonは広く使われているプログラミング言語であり、それぞれに独自の特徴があります。この記事ではC言語とPythonの難易度を分析します。
