ThreeJS - 401 - 3D Object Manipulation

- 3D Object Manipulation

HTML

<script src="http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/vendor/csg.js"></script>
<script src="http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/vendor/three.js/Three.js"></script>
<script src="http://learningthreejs.com/data/THREEx/THREEx.GeometryUtils.js"></script>
<script src="http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/vendor/ThreeCSG.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<h1>Three.js 401 - - 3D Object Manipulation</h1>
Substracted a Cube from a Cylinder to get a cross section using CSG (Constructive Solid Geometry along side Three.js)

<div id="container"></div>

JavaScript

var width = 800;
var height = 600;
var aspect = width/height;
var near = 1;
var far = 1000;
var angle = 45;

var createRenderer = function(){
    var renderer =  new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    return renderer;
}

var createCamera = function(){
    var camera = new THREE.PerspectiveCamera(
        angle, aspect, near, far);    
    camera.position.set( 10, 100, 100 );
    camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
    return camera;
}


var createScene = function(){
    var scene = new THREE.Scene();
    return scene;
}

var createLight = function(){
    var light = new THREE.PointLight(0xFFFFFF);
    light.position.x=40;
    light.position.y=0;
    light.position.z=100;
    return light;
}


var createCutCylinder = function(){
    var material = 
        new THREE.MeshLambertMaterial(
            {
                color:0xFF0000
                
            });
    
    var cylinderGeometry = 
        new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 40, 50, 50, false),material);
    cylinderGeometry.position.z=-10;    
    var origCsg	= THREE.CSG.toCSG(cylinderGeometry);
    
    var intersectingCube = new THREE.Mesh(new THREE.CubeGeometry( 12, 40, 12 ),material);
    intersectingCube.rotation.y=40;  


    var intersectingCsg = THREE.CSG.toCSG(intersectingCube);
    var substractedCsg = origCsg.subtract(intersectingCsg);
    console.log(substractedCsg);
    
    
    
    var cubeMesh = new THREE.Mesh(
        THREE.CSG.fromCSG(substractedCsg),material);
    cubeMesh.position.z=10; 
    return cubeMesh;
  
};
var scene = createScene();
var camera = createCamera();
var light = createLight();
var crossSectionCylinder = createCutCylinder();
var renderer = createRenderer();

scene.add(light);
scene.add(crossSectionCylinder);

var render = function(){
   renderer.render(scene,camera);
}

var animate = function(){
    requestAnimationFrame(animate); 
    //crossSectionCylinder.rotation.y+=0.01;
   ...