主页 / 问题 / 1252258
Accepted
reshu
Asked:2022-03-06 13:44:50 +0800 CST2022-03-06 13:44:50 +0800 CST

如何在 BufferGeometry (three.js) 中设置单个三角形的颜色

  • 772

有这个代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>BufferGeometry color</title>
  <script src="https://threejs.org/build/three.js"></script>
</head>
<body>
  <script>
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 )

let renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth * 0.9, window.innerHeight * 0.9 )
renderer.setClearColor( 0xffffff, 1 )
document.body.appendChild( renderer.domElement )
renderer.shadowMap.enabled = true
scene.add(new THREE.AmbientLight(0xffffff, 0.6))
let point_light = new THREE.PointLight(0xffffff, 0.5)
point_light.position.set( -500, 700, 300 )
point_light.castShadow = true
point_light.shadow.camera.far = 5000
scene.add(point_light)

let material = new THREE.MeshStandardMaterial()
const tri02 = new THREE.BufferGeometry()
const vertices = new Float32Array( [
    -100, -100,  100,
     100, -100,  100,
     100,  100,  100,
    -100,  100,  100,
    -100,    0,  100,
       0,   30,  100,
] )
const colors = new Float32Array( [
    1, 0, 0,
    1, 0, 0,
    1, 0, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
] )
tri02.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) )
tri02.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) )
tri02.computeVertexNormals()
scene.add(new THREE.Mesh(tri02, material))

camera.position.set(0, 0, 300)
function animate() {
    requestAnimationFrame( animate )
    renderer.render( scene, camera )
}
animate()
  </script>
</body>
</html>

这个想法是每个三角形都应该有自己的颜色。

但结果与预期有些不同。我究竟做错了什么？

three.js

1 个回答

  1. Best Answer

    由于您对顶点使用颜色，因此您需要在材质中指出这一点。vertexColors: true

    let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 )

let renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth * 0.9, window.innerHeight * 0.9 )
renderer.setClearColor( 0xffffff, 1 )
document.body.appendChild( renderer.domElement )
renderer.shadowMap.enabled = true
scene.add(new THREE.AmbientLight(0xffffff, 0.6))
let point_light = new THREE.PointLight(0xffffff, 0.5)
point_light.position.set( -500, 700, 300 )
point_light.castShadow = true
point_light.shadow.camera.far = 5000
scene.add(point_light)

let material = new THREE.MeshStandardMaterial({vertexColors: true}) //добавить сюда
const tri02 = new THREE.BufferGeometry()
const vertices = new Float32Array( [
    -100, -100,  100,
     100, -100,  100,
     100,  100,  100,
    -100,  100,  100,
    -100,    0,  100,
       0,   30,  100,
] )
const colors = new Float32Array( [
    1, 0, 0,
    1, 0, 0,
    1, 0, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
] )
tri02.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) )
tri02.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) )
tri02.computeVertexNormals()
scene.add(new THREE.Mesh(tri02, material))

camera.position.set(0, 0, 300)
function animate() {
    requestAnimationFrame( animate )
    renderer.render( scene, camera )
}
animate()
    body{
  overflow: hidden;
  margin: 0;
}
    <script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.min.js"></script>

    • 2

相关问题