First Three.js Experiment

In this example below you will see how to do a First Three.js Experiment with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by noaner, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright noaner ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>First Three.js Experiment</title>
  
  
  
  
  
</head>

<body>

  <div id="c"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/noaner/first-threejs-experiment-KXLxXY */
var WIDTH = 600;
var HEIGHT = 600;

var VIEW_ANGLE = 80;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;

var container = document.getElementById('c');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var scene = new THREE.Scene();

scene.add(camera);
renderer.setSize(WIDTH, HEIGHT);
container.appendChild(renderer.domElement);

var RADIUS = 100;
var SEGMENTS = 32;
var RINGS = 32;
var sphere = new THREE.Mesh(new THREE.SphereGeometry(RADIUS, SEGMENTS, RINGS), new THREE.MeshLambertMaterial({ color: 0xFCDE9C }));

sphere.position.z = -300;
//sphere.position.y = -100;
scene.add(sphere);

var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);

function update() {
  sphere.geometry.vertices.forEach(function (v, i) {
    if (i % 3 == 0) {
      sphere.geometry.vertices[i].y += 0.1;
      sphere.geometry.vertices[i].x *= 1.001;
    } else {
      sphere.geometry.vertices[i].y -= 0.05;
    }
  });
  sphere.geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
  requestAnimationFrame(update);
}

requestAnimationFrame(update);

Comments