Web Design Articles

  • 1842

babylon.js ステップ15 環境設定

ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう！！ 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます アンビエントカラーの変更 次のプロパティを使うとアンビエントカラーを設定できます scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3); clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。主に、メッシュとの組み合わせて使用​​され、メッシュマテリアルのStandardMaterial.ambientColor　によって最終的なアンビエントカラーが決まるようです。 スカイボックス 美しい完璧な空を作りたいと思いませんか？それを簡単に実現したのがスカイボックスです。このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。作り方は次の通りまずは箱を作ります。 var skybox = BABYLON.Mesh.CreateBox("skyBox", [...]

  • 1934

中華で始める Arduino入門日記６ LEDをロウソクのように瞬かせる

こんにちは、のすけです。 中華で始める Arduino入門日記の6回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はブレッドボードを利用して、LEDをチカチカさせました。 hollywis.hatenablog.com 今回はなんと！チカチカではなくほわほわとロウソクのように瞬かせてみたいと思います。 できるんですねぇ、そんなことが。チュートリアルの5章 PWMになります。 では早速やってみましょう。 利用しているキットに近い奴は⇩ Arduinoをはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 [...]

  • 1935

中華で始める Arduino入門日記５ ブレッドボードLチカをやる

こんにちは、のすけです。 中華で始める Arduino入門日記の5回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はArduinoのプログラミングの書き方として「Hello World!地獄」をやりました。 setup部は１度だけ実行、loop部は何度も実行でしたね。 hollywis.hatenablog.com 今回は、ちょっと進んだLチカ「ブレッドボードLチカ」をやってみたいと思います。 利用しているキットに近いやつは⇩ Arduinoをはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 in [...]

  • 1936

中華で始める Arduino入門日記４「Hello World! 地獄」を作る

こんにちは、のすけです。 中華で始める Arduino入門日記の4回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はハードウェア界の「Hello World!」である「Lチカ」をやりました。 hollywis.hatenablog.com 今回は、プログラミング界の「Hello World!」。つまり、「Hello World!」をやってみたいと思います。 しかもただの「Hello World!」ではつまらないので、「Hello World! 地獄」を作っちゃいます。(チュートリアル未記載) まずはHello World!を書く Arduino [...]

これだけは覚えよう！WordPressテンプレートタグ！

こんにちは 前回は、Wprdpressテーマを一般的なheader.php、sidebar.php、footer.php、index.phpに分割して構造化しました。 hollywis.hatenablog.com この中でphpファイルの記述中にいくつかテンプレートタグを利用してきましたので、そのテンプレートタグを深堀していきたいと思います。 なお、最小のテンプレートを作る際に利用したコードが次のような感じでした。 ファイル：index.php <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> [...]

自作WordPressのテーマモジュールを分割する

こんにちは 前回はWordpressテーマの構造を理解するために最小のテーマを作りました。 このテーマはページをすべてindex.phpに詰め込んでわずか３ファイルで作られています。 hollywis.hatenablog.com 今回は、このindex.phpを機能毎に分割してより構造的なテンプレートに変えたいと思います。 前回のindex.phpはこちら <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.