绘制正方形

Yang2024年10月22日大约 3 分钟ThreeJSThreeJS

使用顶点方式绘制

依次画两个三角形的共六个顶点

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const renderer = new THREE.WebGLRenderer({
  antialias: true // 抗锯齿
})

// 设置分辨率
const pixelRatio = window.devicePixelRatio
const width = Math.floor(window.innerWidth * pixelRatio)
const height = Math.floor(window.innerHeight * pixelRatio)
renderer.setSize(width, height, false)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)

// 使用顶点方式绘制正方形平面
const geometry = new THREE.BufferGeometry()
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true, // 线框模式
  // 材质可见面 -> FrontSide：正面  BackSide：背面  DoubleSide：双面
  // side: THREE.FrontSide
})

// 顶点顺序逆时针时为正面(默认可见)，顺时针时为反面(默认不可见)
const vertices = new Float32Array([
  1.0, 1.0, 0.0, -1.0, -1.0, 0, 1.0, -1.0, 0.0, 
  1.0, 1.0, 0, -1.0, 1.0, 0, -1.0, -1.0, 0
])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
console.log(geometry)
const plane = new THREE.Mesh(geometry, material)
scene.add(plane)

const light = new THREE.DirectionalLight(0xffffff, 1)
const axisHelp = new THREE.AxesHelper(5)
light.position.set(3, 3, 3)
scene.add(axisHelp)
scene.add(light)

function animate(time) {
  time *= 0.001
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

animate()

new OrbitControls(camera, renderer.domElement)

使用索引方式绘制

定义四个顶点，使用索引方式调用

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const renderer = new THREE.WebGLRenderer({
  antialias: true // 抗锯齿
})

// 设置分辨率
const pixelRatio = window.devicePixelRatio
const width = Math.floor(window.innerWidth * pixelRatio)
const height = Math.floor(window.innerHeight * pixelRatio)
renderer.setSize(width, height, false)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)

// 使用顶点方式绘制正方形平面
const geometry = new THREE.BufferGeometry()
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true // 线框模式
  // 材质可见面 -> FrontSide：正面  BackSide：背面  DoubleSide：双面
  // side: THREE.FrontSide
})

// 顶点顺序逆时针时为正面(默认可见)，顺时针时为反面(默认不可见)
const vertices = new Float32Array([
    1.0, 1.0, 0, -1.0, 1.0, 0, 
    -1.0, -1.0, 0, 1.0, -1.0, 0
])
const indices = new Uint16Array([0, 1, 2, 0, 2, 3])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
geometry.setIndex(new THREE.BufferAttribute(indices, 1))
console.log(geometry)
const plane = new THREE.Mesh(geometry, material)
scene.add(plane)

const light = new THREE.DirectionalLight(0xffffff, 1)
const axisHelp = new THREE.AxesHelper(5)
light.position.set(3, 3, 3)
scene.add(axisHelp)
scene.add(light)

function animate(time) {
  time *= 0.001
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

animate()

new OrbitControls(camera, renderer.domElement)

正方形材质分组

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const renderer = new THREE.WebGLRenderer({
  antialias: true // 抗锯齿
})

// 设置分辨率
const pixelRatio = window.devicePixelRatio
const width = Math.floor(window.innerWidth * pixelRatio)
const height = Math.floor(window.innerHeight * pixelRatio)
renderer.setSize(width, height, false)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)

// 使用顶点方式绘制正方形平面
const geometry = new THREE.BufferGeometry()
const material_0 = new THREE.MeshBasicMaterial({
  color: 0xff0000
  // wireframe: true // 线框模式
  // side: THREE.FrontSide // 材质可见面 -> FrontSide：正面  BackSide：背面  DoubleSide：双面
})
const material_1 = new THREE.MeshBasicMaterial({
  color: 0x00ff00
  // wireframe: true // 线框模式
  // side: THREE.FrontSide // 材质可见面 -> FrontSide：正面  BackSide：背面  DoubleSide：双面
})

// 顶点顺序逆时针时为正面(默认可见)，顺时针时为反面(默认不可见)
const vertices = new Float32Array([1.0, 1.0, 0, -1.0, 1.0, 0, -1.0, -1.0, 0, 1.0, -1.0, 0])
const indices = new Uint16Array([0, 1, 2, 0, 2, 3])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
geometry.setIndex(new THREE.BufferAttribute(indices, 1))

// 分组材质
geometry.addGroup(0, 3, 0)
geometry.addGroup(3, 3, 1)
const plane = new THREE.Mesh(geometry, [material_0, material_1])
scene.add(plane)
console.log(geometry)
console.log(plane)

const light = new THREE.DirectionalLight(0xffffff, 1)
const axisHelp = new THREE.AxesHelper(5)
light.position.set(3, 3, 3)
scene.add(axisHelp)
scene.add(light)

function animate(time) {
  time *= 0.001
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

animate()

new OrbitControls(camera, renderer.domElement)

正方体材质分组

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const renderer = new THREE.WebGLRenderer({
  antialias: true // 抗锯齿
})

// 设置分辨率
const pixelRatio = window.devicePixelRatio
const width = Math.floor(window.innerWidth * pixelRatio)
const height = Math.floor(window.innerHeight * pixelRatio)
renderer.setSize(width, height, false)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)

// 使用顶点方式绘制正方形平面
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material_0 = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const material_1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const material_2 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
const material_3 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const material_4 = new THREE.MeshBasicMaterial({ color: 0x00ffff })
const material_5 = new THREE.MeshBasicMaterial({ color: 0xff00ff })

const cube = new THREE.Mesh(geometry, [material_0, material_1, material_2, material_3, material_4, material_5])
scene.add(cube)
console.log(cube)
console.log(cube)

const light = new THREE.DirectionalLight(0xffffff, 1)
const axisHelp = new THREE.AxesHelper(5)
light.position.set(3, 3, 3)
scene.add(axisHelp)
scene.add(light)

function animate(time) {
  time *= 0.001
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

animate()

new OrbitControls(camera, renderer.domElement)