| ... | @@ -11,7 +11,7 @@ Three.js is a JavaScript library that provides a framework for creating and disp |
... | @@ -11,7 +11,7 @@ Three.js is a JavaScript library that provides a framework for creating and disp |
|
|
|
|
|
|
|
The first thing you need to use three.js is a simple HTML page. you can start with the following basic code.
|
|
The first thing you need to use three.js is a simple HTML page. you can start with the following basic code.
|
|
|
|
|
|
|
|
``
|
|
```
|
|
|
<!doctype html>
|
|
<!doctype html>
|
|
|
<html>
|
|
<html>
|
|
|
<head>
|
|
<head>
|
| ... | @@ -23,65 +23,9 @@ The first thing you need to use three.js is a simple HTML page. you can start wi |
... | @@ -23,65 +23,9 @@ The first thing you need to use three.js is a simple HTML page. you can start wi |
|
|
body { margin: 0; }
|
|
body { margin: 0; }
|
|
|
canvas { display: block; }
|
|
canvas { display: block; }
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|
|
|
<!-- three.js -->
|
|
|
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<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>
|
|
</body>
|
|
|
</html>
|
|
</html>
|
|
|
`` |
|
``` |
