three.js ~ example ~ Mr.doob

2012-01-05 ~

by suhail

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">

JavaScript

var camera, scene, renderer, geometry, material, mesh;
var materials = [];
init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 100;
  scene.add(camera);

  var ambientLight = new THREE.AmbientLight(0x555555)
  scene.add(ambientLight)
  var light = new THREE.DirectionalLight(0xffffff, 3)
  light.position.set(-200, 80, -100)
  scene.add(light)

  var parentGeometry = new THREE.Geometry();
  var parentMatrial = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.SmoothShading,
    vertexColors: THREE.VertexColors
  });


  var ballGeo = new THREE.SphereGeometry(10, 35, 35);
  var material = new THREE.MeshPhongMaterial({
    color: 0xF7FE00,
    transparent: true,
    opacity: 0.5
  });
  materials.push(material);
  for (var i = 0; i < ballGeo.faces.length; i++) {
    ballGeo.faces[i].materialIndex = materials.length - 1;
  }
  var ball = new THREE.Mesh(ballGeo);
  ball.updateMatrix();

  var pendulumGeo = new THREE.CylinderGeometry(1, 1, 50, 16);
  var material1 = new THREE.MeshPhongMaterial({
    color: 0x0000FF,
    transparent: true,
    opacity: 0.7
  });
  materials.push(material1);
  for (var i = 0; i < pendulumGeo.faces.length; i++) {
    pendulumGeo.faces[i].materialIndex = materials.length - 1;
  }
  var pendulum = new THREE.Mesh(pendulumGeo);
  pendulum.updateMatrix();

  parentGeometry.merge(ball.geometry, ball.matrix);
  parentGeometry.merge(pendulum.geometry, pendulum.matrix);

  parentMesh = new THREE.Mesh(parentGeometry, new THREE.MeshFaceMaterial(materials));
  scene.add(parentMesh);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.rotateSpeed = 0.5;
  controls.zoomSpeed = 1;
  controls.minDistance = 100;
  controls.maxDistance = 6000;

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

 ...