three.js wiki

three.js wiki内検索 / 「PointLight」で検索した結果

• PointLight
  ... THREE.PointLight ( hex, intensity, distance ) hex 16進数 [= 0xffffff] |光の色。 intensity float [= 1] |光の強さ。 distance float [= 0] |0でない場合、遠くなるほど光の強さが線形で減衰していき、距離distanceでゼロになる。 var light = new THREE.PointLight( 0xffffff, 5, 100 ); // 白、強さ5、距離100まで減衰 light.position.set(0,50,0); scene.add( light );
• AmbientLight
  更新日：2013-04-28, r58 THREE.AmbientLight ( hex ) 環境光。周囲光、間接光などとも。どの面に対しても一様に照らすライト。 DirectionalLightなどで光が当たっていないところは真っ黒になってしまう。 照り返しの分を補うためにこのAmbientLightを使う、というのが通常の使い方。 パラメータ hex 16進数 [= 0xffffff] |光の色。例えば、赤い部屋なら照り返しも赤だろうから赤っぽい色を設定する、など。 まず表示オブジェクトのマテリアルにAmbient色をつけておく。 たいてい基本の色と同じに。 var boxGeometry = new THREE.CubeGeometry(10,10,10); var boxMaterial = new...
• SpotLight
  更新日：2013-04-24, r58 THREE.SpotLight ( hex, intensity, distance, angle, exponent ) hex 16進数 [= 0xffffff] |光の色。 intensity float [= 1] |光の強さ。 distance float [= 0] |0でない場合、遠くなるほど光の強さが線形で減衰していき、距離distanceでゼロになる。 angle float [= Math.PI / 3] |照らす範囲角の半分。単位はラジアン。Math.PI/2を越えないように。 exponent float [= 10] |指数関数的な減衰係数。多くすると中心から外側に向かってすぐ暗くなる。（たぶん0以上。） var light = n...
• メニュー
  ...ght[平行光源] PointLight[点光源] SpotLight[スポットライト] AmbientLight[環境光] HemisphereLightLight[天空光] 物理 cannon.js Physijs ポストプロセス ポストプロセス FXAA [アンチエイリアス] SSAO [環境遮蔽] Bokeh [ボケ] お遊び リンク @wikiご利用ガイド ここを編集
• DirectionalLight
  更新日：2013-04-23, r58 THREE.DirectionalLight ( hex, intensity ) hex 16進数 [= 0xffffff] |光の色。 intensity float [= 1] |光の強さ。 position未設定なら( 0, 1, 0 ) var light = new THREE.DirectionalLight( 0xffffff, 1 ); // 白、強さ1 light.position.set(0,50,0).normalize(); // (0,1,0)方向の無限遠から光が指す // ＝ どの面に対しても(0,-1,0)方...
• CylinderGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.CylinderGeometry ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ) 円柱のジオメトリを作る。 パラメータ radiusTop float [= 20] |上面の半径。0にすると円錐(実際は正多角形の錐)になる（→ 錐はLatheとどっちで作ればいいのか？） radiusBottom float [= 20] |底面の半径。 height float [= 100] |高さ。 radiusSegments int [= 8] |円周の分割数。 heightSegment...
• TextGeometry
  更新日：2013-04-21, r58 テキストジオメトリ。使い道多そうなのに下準備がちょっと面倒くさいヤツ。 説明 script type="text/javascript" src="fonts/helvetiker_regular.typeface.js" /script まずtypeface.js形式のフォントファイルを読ませないとダメ。three.js読み込んだ後に。 THREE.TextGeometry( text, { 　size, curveSegments, height, 　font, weight, style, 　material, extrudeMaterial, 　bevelEnabled, bevelSize, bevelThickness, beve...
• LatheGeometry
  更新日：2013-04-20, r58 回転体。レイズ lathe って旋盤のことらしい。 (わかりやすくするためにワイヤーフレームも一緒に表示。わかりづらいが、図形の元になった辺(紫)も表示。） 説明 THREE.LatheGeometry ( points, segments, phiStart, phiLength ) Z軸を中心とした回転体を作る。 パラメータ points array of points |回転体にしたい図形の頂点の配列。頂点はnew THREE.Vector3(x,y,z)でベクトル作ってもいいし、単に{ x hoge, y huga, z piyo }でもおｋ。速度はどっちでも差なし。始点と終点を一緒にするとくっつく。注意： Z軸に沿った辺を書くのはやめた方がいいかもしれん segments i...
• CubeGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.CubeGeometry ( width, height, depth, widthSegments, heightSegments, depthSegments ) 直方体のジオメトリを作る。 パラメータ width float |幅。 height float |高さ。 depth float |奥行き。 widthSegments int |幅の分割数。 heightSegments int |高さの分割数。 depthSegments int |奥行きの分割数。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var...
• PlaneGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.PlaneGeometry ( width, height, widthSegments, heightSegments ) 平面・長方形のジオメトリを作る。 パラメータ width float |幅。 height float |高さ。 widthSegments int [= 1] |横の分割数。 heightSegments int [= 1] |縦の分割数。口→日→目のように細かくなる。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var planeGeo = new THREE.PlaneGeomerty(20, 10), // 幅2...
• OBJMTLLoader
  更新日：2013-05-06, r58 （モデルデータ：Elementalist Warrior female character ARTIST-3D.COM から拝借、改変） モデルが500KB、テクスチャが400KBあるので読み込みに時間がかかるかもしれない。 左ドラッグ、右ドラッグ、マウスホイールドラッグ上下で視点動かせる。 script src="MTLLoader.js" /script script src="OBJMTLLoader.js" /script MTLLoaderとOBJMTLLoader.jsを読み込んでおく。three.jsを読んだ後で。 three.jsセットの examples/js/loaders/ にある。 mtlフォーマットの詳細 MTL OBJ...
• TorusKnotGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームと元トーラスを一緒に表示している。) 説明 THREE.TorusKnotGeometry ( radius, tube, radialSegments, tubularSegments, p, q, heightScale ) トーラス結び目のジオメトリを作る。 パラメータ radius float [= 100] |元トーラスの芯円の半径。 tube float [= 40] |ヒモの太さ半径。 radialSegments int [= 64] |ヒモの長さに対する分割数。増やすとヒモの曲がり方が滑らかになる。 tubularSegments int [= 8] |ヒモの断面円の分割数。増やすと綺麗な円柱状のヒモになる。 p ...
• SphereGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.SphereGeometry ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) 球のジオメトリを作る。 パラメータ radius float [= 50] |半径。 widthSegments int [= 8] |経度分割数。経線が細かくなる。 heightSegments int [= 6] |緯度分割数。緯線が細かくなる。 phiStart float [= 0] |開始経度。単位はラジアン。-X方向が0度、+Z方向が90度。undefinedだと0が設定される。...
• ポストプロセス
  更新日：2013-04-30, r58 基本 script src="examples/js/postprocessing/EffectComposer.js" /script script src="examples/js/shaders/CopyShader.js" /script !-- EffectComposerに必要 -- script src="examples/js/postprocessing/MaskPass.js" /script !-- EffectComposerに必要 -- script src="examples/js/postprocessing/RenderPass.js" /script script s...
• OrthographicCamera
  更新日：2013-04-22, r58 説明 THREE.OrthographicCamera ( left, right, top, bottom, near, far ) 平行投影カメラ。近くのモノも遠くのモノも同じ大きさで描画される。 上例の床の平行線は遠くなってもずっと同じ幅のまま。 パラメータ left float |視線のどれぐらい左まで画面に入れるか。 right float |視線のどれぐらい右まで画面に入れるか。 top float |視線のどれぐらい上まで画面に入れるか。 bottom float |視線のどれぐらい下まで画面に入れるか。 near float [= 0.1] |この値より手前は描画されない。 far float [= 2000] |この値より奥は描画され...
• 中核
  更新日：2013-05-04, r58 THREE.Vector3(x, y, z) ベクトル（3次元）。点とか軸とかを表すものはだいたいこれで。 .addVectors 足し算, .subVectors 引き算, .dot 内積, .crossVectors 外積 .normalize 正規化（大きさを1にする） .multiplyScalar 自身のx,y,zそれぞれにある数をかける。拡大縮小に。 .negate 反転させる。multiplyScalar(-1)と同じ。 .applyAxisAngle 軸Axisに従って角度Angleで回す。 他にも2次元のVector2、4次元のVector4がある。 THREE.Face3(a,b,c), THREE.Face4(a,b,c,d) 面。面は頂点番号の組で定義する。三角面なら頂点3つ...
• PolyhedronGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示し、右は分割の塗り分けも。) 左：任意の多面体、右：その分割1回 説明 THREE.PolyhedronGeometry ( vertices, faces, radius, detail ) vertices, facesで定義した任意の立体を与えると、球に内接するように調整された立体を作る。 あとはTetrahedronとかOctahedronと同じように分割させられる。 （参照：TetrahedronGeometry - ～hedronにおける分割とは） パラメータ vertices array of vertices |頂点の配列。書き方は下例。 faces array of faces |面の配列。書き方は下例。 r...
• CircleGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.CircleGeometry ( radius, segments, thetaStart, thetaLength ) 円のジオメトリを作る。 パラメータ radius float [= 50] |半径。 segments int [= 8] |thetaLengthで設定した角度をこの数で分割する。円と言っているが3DCGでは実際のところ多角形である。thetaLengthが2π(360度まるまる)のとき、segments=6だと正6角形、segments=8だと正8角形になる。増やすにつれ真の円に近付く。 thetaStart float [= 0] |開始角度。単位はラジアン。+X方向が0度、...
• TubeGeometry
  更新日：2013-04-21, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.TubeGeometry ( path, segments, radius, radiusSegments, closed, debug ) パスに従って管を作る。 パラメータ path THREE.Curve？ |カーブのパス。 segments int [= 64] |パス方向の分割数。増やすと曲線パスが滑らかに。 radius float [= 1] |管の太さ。 radiusSegments int [= 8] |管の断面円の分割数。増やすと円柱形に近づく。 closed bool [= false] |true：終点-始点を閉じる、false：閉じない debug b...
• ParametricGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示。） 説明 THREE.ParametricGeometry ( func, slices, stacks, useTris ) 関数 func に従って、パラメトリック曲面を作る。 上例では単純な立体を表示しているが、パラメトリック曲面で作れる形状は多種多様である（例2を参照）。 パラメータ func function(u, v) |引数u, vをとるパラメトリック関数。0≦u≦1、0≦v≦1。 slices int |uの分割数。 stack int |vの分割数。 useTris bool [= false] |trueにすると四角ポリゴンではなく三角ポリゴンを使う。面数は2倍になる。 例 ジオメト...
• -m_mesh1html
  種 Basic Lambert Phong Color Ambient x Specular x x Shininess x x 10
• マテリアル
  更新日：2013-04-23, r57 色や陰、テクスチャを指定する。 面 マテリアルの種類 MeshBasicMaterial |面用マテリアルの基本。陰がつかない。 MeshLambertMaterial |ランバート・マテリアル。 MeshPhongMaterial |フォン・マテリアル。ランバートの上位互換。 MeshFaceMaterial |複数マテリアルから選択して使えるようにまとめる。 他に、THREE.SceneUtils.createMultiMaterialObject（複数マテリアルを同時に表示させるための3Dオブジェクト）も関連項目かもしれない。 プロパティ side [= THREE.FrontSide] |THREE.FrontSide：オモテ面。THREE.BackSide：裏面。TH...
• TorusGeometry
  更新日：2013-04-21, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.TorusGeometry ( radius, tube, radialSegments, tubularSegments, arc ) トーラス（ドーナツ型）のジオメトリを作る。 パラメータ radius float [= 100] |ドーナツの芯円の半径。 tube float [= 40] |ドーナツの断面円の半径。 radialSegments int [= 8] |断面円の分割数。（変数名と意味が一致してないが、tubularSegmentsと逆に作っちゃったらしい。）3にするとUFOみたいな形に。 tubularSegments int [= 6] |芯の円の分割数。（変数名と意味...
• IcosahedronGeometry
  更新日：2013-04-20, r58 アイコサヘドロン。 (わかりやすくするためにワイヤーフレームも一緒に表示し、右は分割の塗り分けも。) 左：正20面体、右：正20面体の分割1回 説明 THREE.IcosahedronGeometry ( radius, detail ) 正20面体（とその派生）を作る。 パラメータ radius float [= 1] |半径。 detail int [= 0] |分割回数。（参照：TetrahedronGeometry - ～hedronにおける分割とは） 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var icosa = new THREE.Mesh( new THREE.IcosahedronGeometry( 40 ), /...
• OctahedronGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示し、右は分割の塗り分けも。) 左：正8面体、右：正8面体の分割1回 説明 THREE.OctahedronGeometry ( radius, detail ) 正8面体（とその派生）を作る。 パラメータ radius float [= 1] |半径。 detail int [= 0] |分割回数。（参照：TetrahedronGeometry - ～hedronにおける分割とは） 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var octa = new THREE.Mesh( new THREE.OctahedronGeometry( 40 ), // 半径40の正8面体の分割0回 ...
• TetrahedronGeometry
  更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示し、右はうっすら分割の塗り分けも。) 左：正4面体、右：正4面体の分割1回 説明 THREE.TetrahedronGeometry ( radius, detail ) 正4面体（とその派生）を作る。 パラメータ radius float [= 1] |半径。 detail int [= 0] |分割回数。（参照：～hedronにおける分割とは） 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var tetra = new THREE.Mesh( new THREE.TetrahedronGeometry( 40 ), // 半径40の正4面体の分割0回 new THREE.MeshL...
• ColladaLoader
  更新日：2013-04-22, r58 （モデルデータ：Lowpoly building LPBldX... TurboSquid） 向こう側の壁とか抜けて見えるのは仕様。両面化してない。 script type="text/javascript" src="ColladaLoader.js" /script ColladaLoader.jsを読み込んでおく。three.jsを読んだ後で。 three.jsセットの examples/js/loaders/ にある。 var house; var loader = new THREE.ColladaLoader(); // loader.options.convertUpAxis = true; // 向きが狂ったら loader.load...
• Mesh用マテリアル
  更新日：2013-05-03, r58 種 Basic Lambert Phong Color Ambient x Specular x x Shininess x x 10
• トップページ
  更新日：2016-02-10, r58 three.jsについて分からんなりにまとめたりするページ。 three.jsとは JavaScriptで3DCGが簡単に動かせるやつ。 GPUに3DCGさせるやつ(OpenGL)をブラウザ上でJavaScriptで動くようにしたやつ(WebGL)の使い勝手をよくしたライブラリ(three.js)。 (WebGLだけじゃなくCanvas、SVG、CSS3D用レンダラも扱ってたり。でもだいたい重い。) 環境 ビデオカードが新しめのOpenGLに対応してないとそもそも動かない。 WebGLブラウザ対応状況IE(Microsoft)は自社のDirectXがOpenGLと競合関係にあるので当分対応しないだろう（と思ったがIE11で対応するかもしれないとの噂が）。IEの人はGoogle Chrome Frameを入れましょう。...
• 坂とスーパーボール
  更新日：2013-05-04, r58 SonyのBRAVIAのアレ。 cannon.jsとパーティクル。 (1) THREE.ParticleSystemのvertices変更、(2) THREE.Spriteのposition変更 + THREE.Object3Dでグループ、(3) 平面Meshのposition変更 + THREE.Object3Dでグループ、を比較したところ、パーティクルが一番速かった。 テクスチャをCanvasで描くのと画像読み込みで速さに差はなかった。
• cannon.js
  更新日：2013-04-26, r58 Physijsに比べて圧倒的に軽い気がする。影付けない状態では特に。 リンク cannon.js本家 ダウンロード右上zip or tar GitHub 　Pages　Examples　Doc　 メモ 平面 CANNON.Plane はサイズ指定不可・広さ無限の平面 （上例では市松模様の床の位置に平面を設定。床の外側にも判定があるため、赤球や緑箱は下に落ちない。 赤と青の板はPlaneではなくCANNON.ConvexPolyhedronで作っている。そのため赤球はちゃんと下に落ちる。） ベクトル CANNON.Vec3() クォターニオン CANNON.Quaternion() copyメソッドがthree.jsとは主客が反対　(例：[vector3 of three.js]....
• Mesh
  更新日：2013-05-04, r58 Object3Dのサブクラス。 Mesh THREE.Object3D ┣ geometry THREE.Geometry ┃┣ vertices Array ┃┃┗ [i] THREE.Vector3 ┃┗ faces Array ┃　┗ [i] THREE.Face4 (THREE.Face3) ┣ material THREE.Material ┃ ┣ position THREE.Vector3 ┣ rotation THREE.Vector3 ┣ quaternion THREE.Quaternion ┣ useQuaternion bool [false...
• SSAO
  更新日：2013-05-03, r58 左が通常。右がSSAO付き。 光が当たりにくそうなところを暗くしよう、というもの（例：箱の地面に接してる部分や赤箱青箱のスキマ）。 Screen Space Ambient Occlusion (SSAO) スクリーン・スペース・アンビエント・オクルージョン 青箱の後ろ側に行くと少しおかしくなるが、こういうもんなんかなぁ。
• ゲルストナー波
  更新日：2013-05-03, r58 水面の再現の基本的なもの。 Simulating Ocean Water - Jerry Tessendorf (pdf) ざっと読んでみたが合ってるかよくわからない。
• 日本語フォント
  更新日：2013-04-21, r58 日本語フォントは文字数が多く、全部をtypeface形式にコンバートするとメガバイト級のファイルサイズになってしまう。 サブセットフォントメーカーなどで使う文字だけ抽出してtypeface化する手もあるが、例えばユーザーから任意の入力をもらって動的に3Dを出力・・・みたいなことはできない。 サイズの小さな日本語フォントを探しているが見つからない。 作った とにかくサイズを抑えるというコンセプトで、ひらがなカタカナだけざっと作った→nomifont0.js かなりえげつない削り方をしている。 約170文字（ひらがなカタカナ、。ー～・）で改行やら残したままで24KBぐらいなので、例えば常用漢字2100字揃えても1MB以内には収まるのではなかろうか。 ベベル使用時にちょっと問題あり。気が向いたら直す。
• ConvexGeometry
  更新日：2013-04-20, r58 （わかりやすくするためにワイヤーフレームなども一緒に表示。） 説明 THREE.ConvexGeometry ( vertices ) 凸包(3次元)を作る。頂点を与えると凹みのない立体を作ってくれる。埋没した頂点は削除される。 上例は10コ点を与えたもの。緑の点は埋まってしまったので削除された。 乱暴に点投げても適当につじつま合わせてくれるので便利そう。 パラメータ vertices array of vector3 |頂点ベクトルの配列。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 // 頂点ベクトルの配列 var vertices = [ new THREE.Vector3( 4.10, 5.91, 1.26), new THR...
• @wiki全体から「PointLight」で調べる

更新順にページ一覧表示 | 作成順にページ一覧表示 | ページ名順にページ一覧表示 | wiki内検索