3D Graphics with 3js - SoCraTesUK/socrates-uk GitHub Wiki

Initial tutorial to create a cube:

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
        <script  src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>

	</head>
	<body>
		<script  src="main.js"></script>
	</body>
</html>

Lighting - change your cube's material, then add some lights:

const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );

var light = new THREE.AmbientLight( 0x404040 ); // soft white light

scene.add( light );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); scene.add( directionalLight );

Camera Movement

phase += 0.05; camera.position.y = 2 + Math.sin(phase);

Adding a texture to your cube

https://videlais.com/2017/01/13/learning-three-js-part-3-loading-and-using-textures/

⚠️ GitHub.com Fallback ⚠️