0

Есть такой код:

<!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>

Задумка в том, что каждый треугольник должен быть своего цвета.

Но результат несколько отличается от ожидаемого. Что я не так делаю?

1 ответ 1

2

Так как используете цвета для вершин, необходимо указать на это в материале 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/[email protected]/build/three.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.