3 changed files with 140 additions and 0 deletions
@ -0,0 +1,18 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<title>ThreeJS & TypeScript</title> |
||||
|
<!-- loads some basic CSS resets and Styles --> |
||||
|
<style> |
||||
|
html, body, canvas {margin: 0;padding: 0;border: 0;} |
||||
|
canvas {display: block;} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- Application Canvas --> |
||||
|
<canvas id="app"></canvas> |
||||
|
<!-- this needs to be called here to ensure all elements are available --> |
||||
|
<script src="threejssimple.bundle.js" type="text/javascript"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,27 @@ |
|||||
|
import * as THREE from 'three'; |
||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; |
||||
|
|
||||
|
import { createScene } from './threejssimple' |
||||
|
|
||||
|
|
||||
|
function init() { |
||||
|
|
||||
|
const canvas = document.getElementById("app") as HTMLCanvasElement; |
||||
|
if (canvas === null) |
||||
|
return; |
||||
|
|
||||
|
let [ renderer, scene, camera ] = createScene(window, canvas); |
||||
|
|
||||
|
function animate() { |
||||
|
requestAnimationFrame(animate); |
||||
|
renderer.render(scene, camera); |
||||
|
} |
||||
|
|
||||
|
animate(); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
window.addEventListener('load', evt => { |
||||
|
|
||||
|
init(); |
||||
|
}); |
||||
@ -0,0 +1,95 @@ |
|||||
|
import * as THREE from 'three'; |
||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; |
||||
|
|
||||
|
function vertexShaderPerFaceColors() { |
||||
|
return `
|
||||
|
void main() { |
||||
|
vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0); |
||||
|
gl_Position = projectionMatrix * modelViewPosition; |
||||
|
} |
||||
|
`
|
||||
|
} |
||||
|
|
||||
|
function fragmentShaderPerFaceColors() { |
||||
|
return `
|
||||
|
uniform vec3 col; |
||||
|
|
||||
|
void main() { |
||||
|
gl_FragColor = vec4(col, 1.0); |
||||
|
} |
||||
|
`
|
||||
|
} |
||||
|
|
||||
|
function vertexShaderPerVertexColors() { |
||||
|
// TODO: Create a new vertex shader that receives a color vector as attribute 'col'
|
||||
|
// TODO: and creates a varying 'vcol' from this color vector.
|
||||
|
} |
||||
|
|
||||
|
function fragmentShaderPerVertexColors() { |
||||
|
// TODO: Create a new fragment shader that receives a color vector as varying 'vcol'
|
||||
|
// TODO: and sets the fragment color from this vector.
|
||||
|
} |
||||
|
|
||||
|
export function createScene(window: Window, canvas: HTMLCanvasElement): [ THREE.WebGLRenderer, THREE.Scene, THREE.Camera ] { |
||||
|
|
||||
|
// Create a new scene
|
||||
|
const scene = new THREE.Scene(); |
||||
|
|
||||
|
// Create a new camera
|
||||
|
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); |
||||
|
|
||||
|
// Create a WebGL renderer for the scene
|
||||
|
const renderer = new THREE.WebGLRenderer({ canvas: canvas }); |
||||
|
|
||||
|
// Add mouse interaction
|
||||
|
const controls = new OrbitControls(camera, renderer.domElement); |
||||
|
|
||||
|
renderer.setSize(window.innerWidth, window.innerHeight); |
||||
|
document.body.appendChild(renderer.domElement); |
||||
|
|
||||
|
|
||||
|
// Create a new BufferGeometry {@link https://threejs.org/docs/#api/en/core/BufferGeometry}
|
||||
|
// that contains the first triangle.
|
||||
|
const geometry1 = new THREE.BufferGeometry(); |
||||
|
|
||||
|
const vertices1 = new Float32Array( [ |
||||
|
// TODO: Create a linear array with three vertices:
|
||||
|
// TODO: (-2, -3, 0); (2, -3, 0); (0, -1, 0)
|
||||
|
]); |
||||
|
|
||||
|
geometry1.setAttribute('position', new THREE.BufferAttribute(vertices1, 3)); |
||||
|
|
||||
|
const colors1 = new Float32Array( [ |
||||
|
|
||||
|
// TODO: Create a linear array containing the color yellow
|
||||
|
]) |
||||
|
|
||||
|
let shaderMaterial1 = new THREE.ShaderMaterial({ |
||||
|
uniforms: { col: { value: colors1 }}, |
||||
|
fragmentShader: fragmentShaderPerFaceColors(), |
||||
|
vertexShader: vertexShaderPerFaceColors(), |
||||
|
}); |
||||
|
|
||||
|
// Create a THREE.Mesh {@link https://threejs.org/docs/#api/en/objects/Mesh}
|
||||
|
// from the geometry and the shader material
|
||||
|
const triangle1 = new THREE.Mesh(geometry1, shaderMaterial1); |
||||
|
|
||||
|
// add it to the scene
|
||||
|
scene.add(triangle1); |
||||
|
|
||||
|
// TODO: Create a new THREE.BufferGeometry for the second triangle.
|
||||
|
// TODO: Create a new linear Float32Array containing the vertices:
|
||||
|
// TODO: (-2, 1, 0); (2, 1, 0); (0, 3, 0)
|
||||
|
// TODO: Create a linear Float32Array containing vertex colors:
|
||||
|
// TODO: yellow for the 1st vertex, blue for the 2nd vertex, orange for the 3rd vertex.
|
||||
|
// TODO: Create a new Vertex-Shader, that receives per vertex colors in an
|
||||
|
// TODO: attribute named 'col', and passes these on to a Fragment-Shader as a varying named 'vcol'.
|
||||
|
// TODO: Create a new Fragment Shader, that receives the varying 'vcol' and sets the
|
||||
|
// TODO: fragment color to this color vector.
|
||||
|
// TODO: Create a new ShaderMaterial combining these new Vertex- and Fragment-Shaders.
|
||||
|
// TODO: Set the 'position' and 'col' attributes in the BufferGeometry, and create
|
||||
|
// TODO: a new Mesh combining the newly created BufferGeometry and ShaderMaterial.
|
||||
|
// TODO: Add the mesh to the scene.
|
||||
|
camera.position.z = 5; |
||||
|
return [ renderer, scene, camera ]; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue