GLSL Шадер не показывает ничего в сцене в трех.js - почему? ⇐ Javascript

[Anonymous]

Я пытаюсь сделать свой собственный шейдер для проекта Three.js, над которым я работаю, и я хотел сделать шейдер GLSL как часть его для одной из сетки в моей сцене. Однако, несмотря на написание очень базового кода, сетка (просто цилиндр) вообще не отображается на сцене. Это был соответствующий код, с которым я работал в данный момент: < /p>
main.js:

Код: Выделить всё

import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
80, /* FOV */
window.innerWidth / window.innerHeight, /* aspect ratio */
0.1, /* closest visible distance */
1000 /* furthest visible distance */
)

camera.position.x = -0.15
camera.position.y = 0.15
camera.position.z = 0.15
camera.lookAt(new THREE.Vector3(0, 0, 0))

const renderer = new THREE.WebGLRenderer({
antialias: true
})

renderer.setSize(
window.innerWidth, /* width */
window.innerHeight /* height */
)

document.body.appendChild(renderer.domElement)

let cylinderGeometry = new THREE.CylinderGeometry(0.002, 0.002, 0.25)

let cylinderMaterial = new THREE.ShaderMaterial({
vertexShader: document.getElementById("vertexShader").textContent,
fragmentShader: document.getElementById("fragmentShader").textContent
})

let cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
cylinderMesh.position.y = 0.125
scene.add(cylinderMesh)

function animate() {

window.requestAnimationFrame(animate)
renderer.render(scene, camera)
}

animate()
< /code>
index.html:




Rubik's Cube

body { margin: 0; }





void main() {
gl_Position = vec4(1.0, 1.0, 1.0, 1.0 );
}


void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0 ,1.0);
}

Приносим извинения, если ответ оказался очевидным - это моя первая работа с GLSL.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ree-js-why