有这个代码：
<!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>这个想法是每个三角形都应该有自己的颜色。
但结果与预期有些不同。我究竟做错了什么？
