ThreeJS 学習ノート

基礎ケース#

<script setup>
  import * as three from 'three'

  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  // メッシュを作成
  const cube = new three.Mesh(geometry, material)
  // メッシュをシーンに追加
  scene.add(cube)

  // カメラの位置を設定
  camera.position.z = 5
  // 見る方向
  camera.lookAt(0, 0, 0)

  // レンダリング関数
  function animate() {
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

世界座標補助器#

青色 z 軸
赤色 x 軸
緑色 y 軸

<script setup>
  import * as three from 'three'

  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  // メッシュを作成
  const cube = new three.Mesh(geometry, material)
  // メッシュをシーンに追加
  scene.add(cube)

  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0, 0, 0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)

  // レンダリング関数
  function animate() {
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    // cube.rotation.x +=0.01
    // cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

軌道コントローラー#

<script setup>
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  // メッシュを作成
  const cube = new three.Mesh(geometry, material)
  // メッシュをシーンに追加
  scene.add(cube)

  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0, 0, 0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)

  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera, renderer.domElement)
  // ダンピングを有効にし、ドラッグに慣性を持たせる
  controls.enableDamping = true
  // ダンピング係数を設定
  controls.dampingFactor = 0.04
  // 自動回転を設定
  controls.autoRotate = true
  // レンダリング関数
  function animate() {
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

三次元物体#

これは Three.js のほとんどのオブジェクトの基底クラスであり、三次元空間内の物体を操作するための一連の属性とメソッドを提供します。

注意：.add (object) メソッドを使用してオブジェクトを組み合わせることができ、このメソッドはオブジェクトを子オブジェクトとして追加しますが、これには Group（親オブジェクトとして）を使用するのが最適です。

三次元ベクトル Vector3#

x, y, z の三つの方向の座標を表し、三次元ベクトルの x, y, z 属性を直接変更できます。

position: Vector3 移動属性#

オブジェクトのローカル座標点 vector3 座標は親要素に基づいており、親要素がない場合は世界座標です。

<script setup>
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()
  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )
  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)
  // マテリアル 親要素は赤色、子要素は緑色
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  const parentMaterial = new three.MeshBasicMaterial({ color: 0xff0000 })
  // メッシュを作成
  // 親要素を作成
  let parentCube = new three.Mesh(geometry, parentMaterial)
  // 子要素を作成
  const cube = new three.Mesh(geometry, material)
  // 子要素を親要素に追加
  parentCube.add(cube)
  // 親要素の移動を設定
  parentCube.position.set(-3, 0, 0)
  // 子要素の移動を設定、親要素に基づいています
  cube.position.set(3, 0, 0)
  // メッシュをシーンに追加、親要素だけを追加すればよい
  scene.add(parentCube)

  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0, 0, 0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)

  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera, renderer.domElement)
  // ダンピングを有効にし、ドラッグに慣性を持たせる
  controls.enableDamping = true
  // ダンピング係数を設定
  controls.dampingFactor = 0.04
  // 自動回転を設定
  // controls.autoRotate = true
  // レンダリング関数
  function animate() {
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    // cube.rotation.x +=0.01
    // cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

scale: Vector3 スケーリング属性#

物体のローカルスケーリング、親要素に基づいています。

<script setup>
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({color:0x00ff00})
  const parentMaterial = new three.MeshBasicMaterial({color:0xff0000})
  // メッシュを作成

  let parentCube = new three.Mesh(geometry,parentMaterial)
  
  const cube = new three.Mesh(geometry,material)
  parentCube.add(cube)
  parentCube.position.set(-3,0,0)
  cube.position.set(3,0,0)
  // キューブの拡大を設定
  cube.scale.set(2,2,2)
  parentCube.scale.set(2,2,2)
  // メッシュをシーンに追加
   scene.add(parentCube)
  // scene.add(cube)

  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0,0,0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)
 
  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera,renderer.domElement)
  // ダンピングを有効にし、ドラッグに慣性を持たせる
  controls.enableDamping = true
  // ダンピング係数を設定
  controls.dampingFactor = .04
  // 自動回転を設定
  // controls.autoRotate = true
  // レンダリング関数
  function animate(){
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    // cube.rotation.x +=0.01
    // cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene,camera)
  }
 animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

Euler オイラー角オブジェクト#

オイラー角は物体を回転させるための軸を指定し、回転の順序は軸の順序に従います。デフォルトは xyz の順序です。

rotation: Euler 回転属性#

物体のローカル回転、親要素に基づいています。

<script setup>
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({color:0x00ff00})
  const parentMaterial = new three.MeshBasicMaterial({color:0xff0000})
  // メッシュを作成

  let parentCube = new three.Mesh(geometry,parentMaterial)
  
  const cube = new three.Mesh(geometry,material)
  parentCube.add(cube)
  parentCube.position.set(-3,0,0)
  cube.position.set(3,0,0)
  // キューブをx軸で回転
  cube.rotation.x = Math.PI/4
  // parentCube.scale.set(2,2,2)
  // メッシュをシーンに追加
   scene.add(parentCube)
  // scene.add(cube)

  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0,0,0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)
 
  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera,renderer.domElement)
  // ダンピングを有効にし、ドラッグに慣性を持たせる
  controls.enableDamping = true
  // ダンピング係数を設定
  controls.dampingFactor = .04
  // 自動回転を設定
  // controls.autoRotate = true
  // レンダリング関数
  function animate(){
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    // cube.rotation.x +=0.01
    // cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene,camera)
  }
 animate()
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

レスポンシブキャンバスと適応#

<script setup>
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()

  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )

  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)

  // マテリアルを作成
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  const parentMaterial = new three.MeshBasicMaterial({ color: 0xff0000 })
  // メッシュを作成

  let parentCube = new three.Mesh(geometry, parentMaterial)

  const cube = new three.Mesh(geometry, material)
  parentCube.add(cube)
  parentCube.position.set(-3, 0, 0)
  cube.position.set(3, 0, 0)
  // メッシュをシーンに追加
  scene.add(parentCube)
  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // 見る方向
  camera.lookAt(0, 0, 0)

  // 世界座標補助器を追加
  const axesHelper = new three.AxesHelper(5)
  scene.add(axesHelper)

  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera, renderer.domElement)
  // ダンピングを有効にし、ドラッグに慣性を持たせる
  controls.enableDamping = true
  // ダンピング係数を設定
  controls.dampingFactor = 0.04
  // 自動回転を設定
  // controls.autoRotate = true
  // レンダリング関数
  function animate() {
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける
    // 各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    // cube.rotation.x +=0.01
    // cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
  // ウィンドウサイズの変更を監視してキャンバスを再レンダリング
  window.addEventListener('resize', () => {
    // レンダラーのアスペクト比をリセット
    renderer.setSize(window.innerWidth, window.innerHeight)
    // カメラのアスペクト比をリセット
    camera.aspect = window.innerWidth / window.innerHeight
    // カメラの投影行列を更新
    camera.updateProjectionMatrix()
  })

  let btn = document.createElement('button')
  btn.innerHTML = 'クリック'
  btn.style.position = 'absolute'
  btn.style.top = '10%'
  btn.style.left = '50%'
  btn.style.zIndex = '9999'
  document.body.appendChild(btn)

  btn.addEventListener('click', () => {
    // フルスクリーンキャンバス
    renderer.domElement.requestFullscreen()
  })
</script>

<template>
  <div> </div>
</template>

<style scoped></style>

フルスクリーンキャンバス#

renderer.domElement.requestFullscreen()

dom.requestFullscreen () メソッドは現在のウィンドウをフルスクリーンモードに調整します。

フルスクリーンを終了#

document.exitFullscreen()

基礎ケースコード#

<script setup>
  // threeをインポート
  import * as three from 'three'
  // 軌道コントローラーをインポート
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // シーンを作成
  const scene = new three.Scene()
  // カメラを作成
  const camera = new three.PerspectiveCamera(
    45, // 視野
    window.innerWidth / window.innerHeight, // アスペクト比
    0.1, // 近クリップ面
    1000 // 遠クリップ面
  )
  // レンダラーを作成
  const renderer = new three.WebGLRenderer()
  // レンダラーのサイズを設定
  renderer.setSize(window.innerWidth, window.innerHeight)
  // レンダラーをbodyに追加
  document.body.appendChild(renderer.domElement)
  // ジオメトリを作成
  const geometry = new three.BoxGeometry(1, 1, 1)
  // マテリアルを作成
  const material = new three.MeshBasicMaterial({ color: 0x00ff00 })
  // メッシュを作成
  const cube = new three.Mesh(geometry, material)
  // メッシュの位置を設定
  cube.position.set(3, 0, 0)
  // メッシュをシーンに追加
  scene.add(cube)
  // カメラの位置を設定
  camera.position.z = 5
  camera.position.y = 2
  camera.position.x = 2
  // カメラが見る方向
  camera.lookAt(0, 0, 0)
  // 世界座標補助器を作成
  const axesHelper = new three.AxesHelper(5)
  // 補助器をシーンに追加
  scene.add(axesHelper)
  // コントローラーを作成、どのDOMでイベントを制御するかを選択するために2番目のパラメーターを変更できます
  const controls = new OrbitControls(camera, renderer.domElement) 
  // ダンピングを有効にし、ドラッグに慣性を持たせる 
  controls.enableDamping = true 
  // ダンピング係数を設定
  controls.dampingFactor = 0.04 
  // 自動回転を設定
  controls.autoRotate = true
  // レンダリング関数
  function animate() {
    // コントローラーを更新
    controls.update()
    // 次のフレームで続行し、アニメーションを実行し続ける。各フレームでxとyを移動させ、回転アニメーションを実現
    requestAnimationFrame(animate)
    // ジオメトリのx軸を回転
    cube.rotation.x += 0.01 
    cube.rotation.y += 0.01
    // レンダリング
    renderer.render(scene, camera)
  }
  animate()
  // ウィンドウサイズの変更を監視してキャンバスを再レンダリング
  window.addEventListener('resize', () => {
    // レンダラーのアスペクト比をリセット
    renderer.setSize(window.innerWidth, window.innerHeight)
    // カメラのアスペクト比をリセット
    camera.aspect = window.innerWidth / window.innerHeight
    // カメラの投影行列を更新
    camera.updateProjectionMatrix()
  })

</script>

<template>
  <div></div>
</template>

<style scoped></style>

GUI ツール#

インポート

import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'

使用

const gui = new GUI()

定義

標準定義オブジェクト

let eventObje = {
    fullScreen: () => {
        document.body.requestFullscreen()
    },
    exitfullScreen: () => {
        document.exitFullscreen()
    }
}

使用

gui.add(eventObje,'fullScreen')
gui.add(eventObje,'exitfullScreen')

中国語名の変更

gui.add(eventObje, 'fullScreen').name = 'フルスクリーン'
gui.add(eventObje, 'exitfullScreen').name = 'フルスクリーンを終了'

繰り返し追加

let eventObje = {
    fullScreen: {
        name: 'フルスクリーン',
        on: () => {
            document.body.requestFullscreen()
        }
    },
    exitfullScreen: {
        name: 'フルスクリーンを終了',
        on: () => {
            document.exitFullscreen()
        }
    }
}
const gui = new GUI()
for (const [key, value] of Object.entries(eventObje)) {
    gui.add({
        [key]: value.on
    }, key).name(value.name)
}

キューブ属性の設定

folder.add(cube.position, 'x').min(-10).max(10).name('x軸').onChange(val => console.log(val))

min 最小値を設定
max 最大値を設定
step ステップを設定
onChange 変更時にトリガーされるイベントを設定
onFinishChange 変更完了時にトリガーされるイベントを設定

マテリアル属性の設定

gui.add(material, 'wireframe').name('ワイヤーフレーム')
gui.addColor(material, 'color').name('色')

wireframe ワイヤーフレームモードを設定
addColor 色を設定

頂点を使用して平面を描画#

キューブはすべて平面三角形で構成されており、三角形は 3 つの頂点から成ります。

平面を作成
const geo = new three.BufferGeometry()

バッファジオメトリを使用します。

頂点データを設定
32 ビット浮動小数点数配列を使用する必要があり、頂点は順序があります。反時計回りが正面です。

三角形を描画します。

cosnt vertices = new Float32Array([
    -1, -1, 0
    1, -1, 0
    1, 1, 0
])

パラメータは頂点配列であり、1 つの三角形には 3 つの頂点があり、各頂点には x, y, z 座標があります。

頂点データをジオメトリに設定
geo.setAttribute('position', new three. BufferAttribute(vertices.3))
正方形を設定
1 つの三角形を描画し、その三角形に隣接するだけで済みます。

// const vertices = new Float32Array([
//   -1.0, -1.0, 0.0,
//   1.0, -1.0, 0.0,
//   1.0, 1.0, 0.0,
//   1.0,1.0,0.0,
//   -1.0,1.0,0.0,
//   -1.0,-1.0,0.0,
// ])
// 頂点データをジオメトリの頂点位置属性に設定
// geometry.setAttribute('position', new three.BufferAttribute(vertices, 3))

インデックスを使用

2 つの三角形が隣接しているため、一部の頂点は共有できます。上記の方法では正方形に 6 つの頂点があり、インデックスを使用することで 4 つに最適化できます。
::: tip
インデックスを使用するには 4 つの頂点座標を指定する必要があります。正方形の 4 つの点です。
:::

// インデックスを使用して4つの頂点を描画
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    1.0, 1.0, 0.0,
    -1.0, 1.0, 0.0,
])
// インデックスを作成し、0,1,2で三角形を作成し、2,3,0で三角形を作成
// 正方形を組み合わせ、2つの頂点を節約します。
const indices = new Uint16Array([
    0, 1, 2,
    2, 3, 0
])
// インデックスを設定
geometry.setIndex(new three.BufferAttribute(indices, 1))
geometry.setAttribute('position', new three.BufferAttribute(vertices, 3))

異なる面に異なるマテリアルを設定#

頂点グループを設定

// 2つの頂点グループを設定
geometry.addGroup(0, 3, 0)
geometry.addGroup(3, 3, 1)
geometry.setAttribute('position', new three.BufferAttribute(vertices, 3))
// メッシュを作成する際に、マテリアルに配列を渡すことができ、各頂点グループに対応するマテリアルがあります。
const material = new three.MeshBasicMaterial({
    color: 0x00ff00,
    side: three.DoubleSide
})
const material2 = new three.MeshBasicMaterial({
    color: 0xff0000,
    side: three.DoubleSide
})
const cube = new three.Mesh(geometry, [material, material2])

内蔵集合体#

立方体バッファジオメトリ

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

コンストラクタ
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — X 軸上の幅、デフォルト値は 1。

height — Y 軸上の高さ、デフォルト値は 1。

depth — Z 軸上の深さ、デフォルト値は 1。

widthSegments — （オプション）幅の分割数、デフォルト値は 1。

heightSegments — （オプション）高さの分割数、デフォルト値は 1。

depthSegments — （オプション）深さの分割数、デフォルト値は 1。

円形バッファジオメトリ

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

コンストラクタ

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

radius — 円形の半径、デフォルト値は 1

segments — 分割（三角面）の数、最小値は 3、デフォルト値は 8。

thetaStart — 最初の分割の開始角度、デフォルトは 0。（3 時の位置）

thetaLength — 円形セクターの中心角、通常「θ」（シータ）と呼ばれます。デフォルトは 2*Pi で、これにより完全な円になります。

円錐バッファジオメトリ


const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

コンストラクタ

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — X 軸上の幅、デフォルト値は 1。

height — Y 軸上の高さ、デフォルト値は 1。

depth — Z 軸上の深さ、デフォルト値は 1。

widthSegments — （オプション）幅の分割数、デフォルト値は 1。

heightSegments — （オプション）高さの分割数、デフォルト値は 1。

depthSegments — （オプション）深さの分割数、デフォルト値は 1。

その他のジオメトリ https://www.three3d.cn/docs/index.html?q=geo#api/zh/core/BufferGeometry

テクスチャマッピングの追加#

マテリアルを作成する際に、設定オブジェクトに map 属性を渡し、その値をテクスチャオブジェクトにします。

テクスチャローダーを作成
const loader = new three.TextureLoader()
テクスチャオブジェクトを作成
const texture = loader.load('./img/texture.png')
マテリアルを作成
const material = new three.MeshBasicMaterial({map: texture})
テクスチャを設定

アルファマップ（透明度マップ）

作用：モデル表面の透明度（アルファ値）を制御します。黒い部分は完全に透明、白い部分は完全に不透明、灰色の部分は部分的に透明です。
使用シーン：窓やガラスなどの部分的に透明な物体を作成するのに適しています。

ライトマップ（光照マップ）

作用：事前に計算された光照情報を保存し、リアルタイムでの光照計算の負担を軽減します。このマップには影と明るさの情報が含まれています。
使用シーン：静的シーンのレンダリング効率を向上させるために使用され、光照変化が少ないシーン、例えば建物の内部に適しています。

スペキュラーマップ（ハイライトマップ）

作用：モデル表面のどの部分にハイライト効果があるかを制御します。ハイライトマップの明るさ値は、その部分の表面の反射強度を決定します。
使用シーン：金属製品や皮革など、ハイライト領域を精密に制御する必要があるモデルに適しています。

環境マップ（エンバイロメントマップ）

作用：環境反射をシミュレートし、物体表面の環境反射効果を実現し、物体をよりリアルに見せます。
使用シーン：水面や金属球体など、反射性の強い物体によく使用されます。

AO マップ（環境遮蔽マップ）

作用：環境光遮蔽効果をシミュレートし、物体表面の影と深さ感を強化します。AO マップの黒い領域は光が遮蔽されている（影の部分）ことを示し、白い領域は光が遮蔽されていないことを示します。
使用シーン：モデルの詳細を強化するために使用され、複雑なモデルやシーンに適しており、視覚的な深さとリアリズムを増加させます。

// テクスチャローダーを作成
const textureLoader = new THREE.TextureLoader();

// マッピングをロード
const alphaMap = textureLoader.load('path/to/alphaMap.png');
const lightMap = textureLoader.load('path/to/lightMap.png');
const specularMap = textureLoader.load('path/to/specularMap.png');
const envMap = textureLoader.load('path/to/envMap.png');
const aoMap = textureLoader.load('path/to/aoMap.png');

// マテリアルを作成
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  alphaMap: alphaMap,
  transparent: true,
  lightMap: lightMap,
  specularMap: specularMap,
  envMap: envMap,
  aoMap: aoMap,
  aoMapIntensity: 1.0 // AOマップの強度
});

// メッシュを作成
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);

// メッシュをシーンに追加
scene.add(mesh);

パノラマ環境マップ#

// hdrローダーを作成
const hdrLoader = new RGBELoader()
// hdrローダーにはコールバック関数があり、そこで設定を行います。
const envMap = hdrLoader.load('/sandsloot_4k.hdr', (envMap) => {
  // 画像を球形マッピングとして設定し、パノラマ画像をこのように使用します。
  envMap.mapping = three.EquirectangularReflectionMapping
  // 環境マップを設定
  scene.background = envMap
  // シーン環境マップを設定
  scene.environment = envMap
  // 立方体のマテリアル環境マップを設定
  material.envMap = envMap

})
const geometry = new three.PlaneGeometry(1, 1)
// ジオメトリを作成

const material = new three.MeshBasicMaterial({
  side: three.DoubleSide, // 両面
  color: 0xffffff, // 色
  map: texture, // テクスチャマップ
  transparent: true, // 透明
  aoMap: aoTexture, // AO環境遮蔽マップ
  reflectivity: 0.2, // 反射強度
  alphaMap:alphaTexture, // 透明度マップ
  lightMap: lightMapTexture, // 光照マップ
  specularMap: bumpMap, // ハイライトマップ
  aoMapIntensity: 0.5 // AO環境遮蔽強度
})
const cube = new three.Mesh(geometry, material)
scene.add(cube)

テクスチャ切り替え srgb モード色空間#

const texture = loader.load('/texture/watercover/CityNewYork002_COL_VAR1_1K.png')
// デフォルトは線形色空間で、手動でsrgbを指定し、より人間の感覚に合ったものにします。
texture.colorSpace = three.SRGBColorSpace

NoColorSpace - デフォルト値で、色空間変換がないことを示します。
SRGBColorSpace - sRGB 色空間で、表示デバイスに適しています。
LinearSRGBColorSpace - 線形 sRGB 色空間で、コンピュータグラフィックスに適しています。

動的に色空間を更新するには、更新関数を呼び出す必要があります。

texture.needsUpdate = true

霧#

線形霧
指数霧

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは http://www.sroxck.top/posts/fontend/three