MCPcopy Create free account
hub / github.com/SuboptimalEng/three-js-tutorials / App

Function App

10-shaders-part-01/src/App.jsx:7–90  ·  view source on GitHub ↗
()

Source from the content-addressed store, hash-verified

5import SceneInit from './lib/SceneInit';
6
7function App() {
8 useEffect(() => {
9 const test = new SceneInit('myThreeJsCanvas');
10 test.initialize();
11 test.animate();
12
13 const axesHelper = new THREE.AxesHelper(16);
14 test.scene.add(axesHelper);
15
16 // const boxGeometry = new THREE.BoxGeometry(16, 16, 16);
17 // const boxMaterial = new THREE.MeshNormalMaterial();
18 // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
19 // test.scene.add(boxMesh);
20
21 // // part 1 - boilerplate code
22 // const boxGeometry = new THREE.BoxGeometry(16, 16, 16, 16, 16, 16);
23 // const boxMaterial = new THREE.MeshStandardMaterial({
24 // color: 0xff0000,
25 // wireframe: true,
26 // });
27 // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
28 // test.scene.add(boxMesh);
29
30 // part 2 - re-write boilerplate code with a shadermaterial
31 const boxGeometry = new THREE.BoxGeometry(16, 16, 16, 16, 16, 16);
32 const boxMaterial = new THREE.ShaderMaterial({
33 wireframe: true,
34 vertexShader: `
35 void main() {
36 // projectionMatrix, modelViewMatrix, position -> passed in from Three.js
37 gl_Position = projectionMatrix
38 * modelViewMatrix
39 * vec4(position.x, position.y, position.z, 1.0);
40 }
41 `,
42 fragmentShader: `
43 void main() {
44 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
45 }
46 `,
47 });
48 const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
49 test.scene.add(boxMesh);
50
51 // part 3 - basics of glsl shaders
52 // const boxGeometry = new THREE.BoxGeometry(16, 16, 16, 16, 16, 16);
53 // const boxMaterial = new THREE.ShaderMaterial({
54 // wireframe: true,
55 // vertexShader: `
56 // void main() {
57 // // gl_Position = projectionMatrix
58 // // * modelViewMatrix
59 // // * vec4(position.x, position.y, position.z, 1.0);
60 // // gl_Position = projectionMatrix
61 // // * modelViewMatrix
62 // // * vec4(position.x, sin(position.z), position.z, 1.0);
63 // // gl_Position = projectionMatrix
64 // // * modelViewMatrix

Callers

nothing calls this directly

Calls 2

initializeMethod · 0.95
animateMethod · 0.95

Tested by

no test coverage detected