Three.js Test

First experiment with Three.js JavaScript/WebGL 3D library.

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<!-- Vertex shader code -->
<div id="vertexShader">
/**
 * Multiply each vertex by the
 * model-view matrix and the
 * projection matrix (both provided
 * by Three.js) to get a final
 * vertex position
 */
void main() {
	gl_Position = projectionMatrix *
				  modelViewMatrix *
				  vec4(position,1.0);
}
</div>

<!-- Fragment shader code -->
<div id="fragmentShader">
/**
 * Set the colour to a lovely pink.
 * Note that the color is a 4D Float
 * Vector, R,G,B and A and each part
 * runs from 0.0 to 1.0
 */
void main() {
	gl_FragColor = vec4(1.0,  // R
				        0.0,  // G
						1.0,  // B
						1.0); // A
}
</div>
</body>
</html>

CSS

body {
	margin: 0;
}

canvas {
	margin: 0;
	padding: 0;
}

#vertexShader,
#fragmentShader {
	display: none;
}

JavaScript

var cameraControls

// Create scene
var scene = new THREE.Scene();

// Create camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// Create renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
cameraControls.target.set(0, 0, 0);

// Create 3D object
var geometry = new THREE.PlaneGeometry( 1, 1, 20, 20 );

var shaderMaterial = new THREE.ShaderMaterial( {
	uniforms: {
		time: { value: 1.0 },
		resolution: { value: new THREE.Vector2() }
	},
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

var plane = new THREE.Mesh( geometry, shaderMaterial );

// Add object to scene
scene.add( plane );

// Set camera position
camera.position.z = 5;

// Animate object
function animate() {
	requestAnimationFrame( animate );
	plane.rotation.x += 0.01;
	plane.rotation.y += 0.01;
	renderer.render( scene, camera );
}
animate();