A simple sphere with Three.js . – free-tutorials.org news free tutorials source code development scripts

This tutorial is about how to add a simple wireframe sphere into your webpage using the javascript 3D library named three.js.
This 3D library and some demo and examples can be found here.
The tutorial for today is to let you know how to deal with a simple object.
First, you need to make a folder named project.
Into this folder create two folder named js and css.
Into the project create an index.html file and add this content:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Three.js Start</title>
      <link rel="stylesheet" href="css/style.css">
</head>

<body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>Three.js Start</title>

</head>

<body>

</body>

</html>

Make a file named style.css into css folder and add this:

canvas {
  background-color: white;
  position: relative;
}

canvas {

background-color: white;

position: relative;

}

This wi
Into js folder create a file named index.js and add this source code:

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

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

var geometry = new THREE.SphereGeometry(9, 12, 12);
var material = new THREE.MeshBasicMaterial ({color: 0x0011ff});
var sphere = new THREE.Mesh(geometry, wireframe);
var wireframe = new THREE.WireframeGeometry( geometry );

var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
//line.material.opacity = 0.25;
line.material.transparent = false;

scene.add( line );

camera.position.z= 35;
//camera.position.x= 10;

function render(){
  requestAnimationFrame (render);

  line.rotation.x += 0.01;
	line.rotation.y -= 0.01;
  //line.rotation.z -= 0.01;
  sphere.rotation.x += 0.02;
	sphere.rotation.y += 0.02;
  renderer.render (scene, camera);
}
render();

var scene = new THREE.Scene();

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

var renderer = new THREE.WebGLRenderer();

renderer.setSize (window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(9, 12, 12);

var material = new THREE.MeshBasicMaterial ({color: 0x0011ff});

var sphere = new THREE.Mesh(geometry, wireframe);

var wireframe = new THREE.WireframeGeometry( geometry );

var line = new THREE.LineSegments( wireframe );

line.material.depthTest = false;

//line.material.opacity = 0.25;

line.material.transparent = false;

scene.add( line );

camera.position.z= 35;

//camera.position.x= 10;

function render(){

requestAnimationFrame (render);

line.rotation.x += 0.01;

line.rotation.y -= 0.01;

//line.rotation.z -= 0.01;

sphere.rotation.x += 0.02;

sphere.rotation.y += 0.02;

renderer.render (scene, camera);

}

render();

This javascript file follows some steps to make the wireframe sphere:

make the scene;
set the camera;
create the renderer space;
add the renderer space to HTML document;
create sphere
add one material ;
make a wireframe from geometry variable;
create a wireframe object;
create a line like a wireframe object;
deal with line material;
add a line to the scene;
set the position of the camera;
create the render function to animate the content;
run all with a render function.

The result is something like this:

Some changes can be used in this example to see how is working.
You can remove the css folder and style file but you need to remove this line from index.html file:

<link rel="stylesheet" href="css/style.css">

1	<link rel="stylesheet" href="css/style.css">

The sphere variable can be added into javascript source code:

//scene.add( line );
scene.add( sphere );
camera.position.z= 35;

//scene.add( line );

scene.add( sphere );

camera.position.z= 35;

This will make some change into the render canvas.

Leave a Reply Cancel reply