For you first encounter with actual WebGL and 3js code, I'll give you a simple
program that creates a scene with one object, a cube. And a few grids
surrounding it. To see it, however, you'll have to get your hands dirty and fix
a few syntax errors. In the code, to the left of the lines that have problems,
you'll see little marks that denote that you need to fix those lines. Make the
corrections, and then try doing the test run, and you should see this. Once you
fix the three syntax errors in the program, you should see something like this
on your screen. Note that you can interact with it. You can move around, zoom
and pan. Try the various mouse controls to see how it works. If you get things
into a broken state, just refresh the page on your browser. Once you've got the
program running, try changing numbers in the code to see the effect. Don't worry
about what the code's doing at this point, I'll be covering that in the lessons
ahead. More importantly, I'll be explaining the underlying physical principles
and mathematics behind this code.
初めてWebGLとthree.jsコードを使う方のために
立方体と格子柄の画像を作成する 簡単なプログラムを用意しました
これを見るには 自分で構文の誤りを修正する必要があります
このコードの問題がある行の左側に
修正が必要であることを示す小さな印が出ています
修正を行いテストをすると画像が見られます
3つの誤りを修正したら スクリーンにこれが見えるはずです
視点を動かしたりズームやパンもできます
マウスで色々な操作を試してみてください
中断してしまったらブラウザ上でページを更新します
実行できたらコードの数字を変更して エフェクトを見てみましょう
コードの働きはあとで説明するので 今は考えなくて結構です
コードの裏にある物理的法則と数学も その時に学習します
這是你第一次接觸到 WebGL 與 Three.js 的程式碼
我會給你顯示一個方塊與一些格線的簡單程式
但要看到方塊你得動手修正幾個語法錯誤
在程式裡，有問題的行左邊會有標記
代表你要修正這幾行
修正後測試執行，你應該看到這樣的畫面
當你修正三個語法錯誤後應該會看到這樣的畫面
你可以移動、縮放、旋轉
試試不同的滑鼠操作
如果程式卡住了只要重新整理瀏覽器就好
程式會動了以後，試著改變原始碼裡面的數字
先不用管程式碼的意義，我之後會提
我會解釋程式的物理與數學方面的原理