... | @@ -5,4 +5,83 @@ Three.js is a JavaScript library that provides a framework for creating and disp |
... | @@ -5,4 +5,83 @@ Three.js is a JavaScript library that provides a framework for creating and disp |
|
# What do you need?
|
|
# What do you need?
|
|
- An up-to-date browser.
|
|
- An up-to-date browser.
|
|
- Basic knowledge of HTML and Javascript.
|
|
- Basic knowledge of HTML and Javascript.
|
|
- IDE or Texteditor (e.g., Notepad++) |
|
- IDE or Texteditor (e.g., Notepad++)
|
|
\ No newline at end of file |
|
|
|
|
|
# HTML Page
|
|
|
|
|
|
|
|
The first thing you need to use three.js is a simple HTML page. you can start with the following basic code.
|
|
|
|
|
|
|
|
``
|
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport"
|
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
<title>Three.js Cube and Cylinder</title>
|
|
|
|
<style>
|
|
|
|
body { margin: 0; }
|
|
|
|
canvas { display: block; }
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- three.js -->
|
|
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script>
|
|
|
|
// BASIC SETUP
|
|
|
|
// ------------------------------------------------
|
|
|
|
|
|
|
|
// Create an empty scene
|
|
|
|
var scene = new THREE.Scene();
|
|
|
|
|
|
|
|
// Create a basic perspective camera
|
|
|
|
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
|
|
|
|
camera.position.z = 4;
|
|
|
|
|
|
|
|
// Create a renderer with Antialiasing
|
|
|
|
var renderer = new THREE.WebGLRenderer({antialias:true});
|
|
|
|
|
|
|
|
// Configure renderer clear color
|
|
|
|
renderer.setClearColor("#ff0000");
|
|
|
|
|
|
|
|
// Configure renderer size
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
|
// Append Renderer to DOM
|
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
// ------------------------------------------------
|
|
|
|
// FUN STARTS HERE
|
|
|
|
// ------------------------------------------------
|
|
|
|
|
|
|
|
// Create a Cube Mesh with basic material
|
|
|
|
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
|
|
|
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
|
|
|
|
var cube = new THREE.Mesh( geometry, material );
|
|
|
|
|
|
|
|
// Add cube to Scene
|
|
|
|
scene.add( cube );
|
|
|
|
|
|
|
|
// create light
|
|
|
|
var light = new THREE.PointLight(0xFFFFFF);
|
|
|
|
light.position.set(-10, 15, 50);
|
|
|
|
scene.add(light);
|
|
|
|
|
|
|
|
// Render Loop
|
|
|
|
var render = function () {
|
|
|
|
requestAnimationFrame( render );
|
|
|
|
|
|
|
|
cube.rotation.x += 0.01;
|
|
|
|
cube.rotation.y += 0.01;
|
|
|
|
|
|
|
|
// Render the scene
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
};
|
|
|
|
|
|
|
|
render();
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
`` |