Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

CSS

              
                body 
{
	font-family: Monospace;
	font-weight: bold;
	background-color: #ccc;
	margin: 0px;
	overflow: hidden;
}
              
            
!

JS

              
                var scene, camera, light, renderer,
    cup,
    cupBodyGeometry, cupBodyMaterials = [], cupBodyMaterial,  cupBodyMaterialTexture, cupBodyMesh,
    cupTop, cupTopGeometry, cupTopMaterial,
    logoGeometry, logoMaterial, logoMesh;

var logoFaceArray = [
    0, 1, 2, 3, 4, 5, 6, 7, 24, 25, 26, 27, 28, 29, 30, 31
    , 48, 49, 50, 51, 52, 53, 54, 55, 72, 73, 74, 75, 76, 77, 78, 79
    , 96, 97, 98, 99, 100, 101, 102, 103, 120, 121, 122, 123, 124, 125, 126, 127
];

var logoImage = new Image();
logoImage.src = 'data:image/jpeg;base64,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F+VvnC78sXlzxXU7JeM9jeon2VurSUNFKBU0JHIfskYq+6Yf+ftP/OScenC0l8r+Qri9Ccf0s1hfq5NPtGNb8R1+imKvib85/wDnIT83f+cgNZt9a/NLzdPrv1Hl+iNFhRbXTbIMKN9XtIqIrEChduTnuxxV4vir6P8A+cb/APnKT8zP+cXtf1zWfy/XTdRs/M1vFb+YPLusxSy2dybcuYJf3MkUiSReo1GVujEEHFWDfnT+c3nj8/PzB1T8yPzAurefXdSiitobWziMNpaWluCIba3jLMQi1JqzFixLEknFXlOKvQZ/yq/MG3/LKz/OObyxeJ+W9/rEuh23mbgTCbuFA7FqD4Y61QSH4S4ZAeQIxVkv/OOf5f6/+an54flh5O8r273d9c+YdPvb2eJS6WljZXCXN1dSla8UjjjJqepoOpAxV+g//P3jzZpup/m7+WHk+znSe/8AKflm6vNYRDUwtqlyvoxv4Epbc6eDA98VfkkRXFX2v+Uv/PwX/nJz8otMtdBsPN9t518vWKiOy0rzZbtqDQxqKLHHdrJFchQBQK0jAdqYq9X80f8AP1r/AJyb17TZLDR9P8m+TJ5VKtq2m6dcXFwtRSqC+uriIHwqhxV+d/mjzV5l87a/qfmrzhrt75l8yazL62qa3qMrTXEz0oOTN0CgAKooFGwAGKpDirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdir9If+cbf+finmb8m/Ilr+Uv5ieQbH81fy2063az0e0LxWt7bWrksbaQSRSwXMVWNBIoYdC7CgCr1zVP+fnfkbybpmqQf849f84y6F+X+u6tGVuNdu1s7eIMdwz2umQxtNwYkgNMo/Vir8qPOfnLzP8AmF5q13zt5z1ifXvNHmW6a81jVbgjlJI1AAFFFREUBUVQFVQFAoMVYzirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVf//Z';

var dotsImage = new Image();
dotsImage.src = 'data:image/png;base64,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';

function generateGeometry(parent, faces) {
    var returnFaces = [],
        returnVertices = [],
        cloneControl = {},
        counter = 0;

    for (var i = 0; i < faces.length; i++) {
        var fA, fB, fC,
            vA = parent.faces[faces[i]].a,
            vB = parent.faces[faces[i]].b,
            vC = parent.faces[faces[i]].c;

        if (cloneControl[vA] != undefined) {
            fA = cloneControl[vA];
        } else {
            returnVertices.push(parent.vertices[vA]);
            cloneControl[vA] = fA = counter;
            counter++;
        }
        if (cloneControl[vB] != undefined) {
            fB = cloneControl[vB];
        } else {
            returnVertices.push(parent.vertices[vB]);
            cloneControl[vB] = fB = counter;
            counter++;
        }
        if (cloneControl[vC] != undefined) {
            fC = cloneControl[vC];
        } else {
            returnVertices.push(parent.vertices[vC]);
            cloneControl[vC] = fC = counter;
            counter++;
        }
        returnFaces.push(new THREE.Face3(fA, fB, fC));
    }
    return {faces: returnFaces, vertices: returnVertices};
}

function initSchene(){
    /** Schene */
    scene = new THREE.Scene();

    /** Renderer */
    renderer = new THREE.WebGLRenderer({
       antialias: true,
       preserveDrawingBuffer: false,
       alpha: true
    });
    renderer.setClearColor(0xffffff, 0);

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);
  
    /** Camera */
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(-0.00, 1.50, 5.2);
    camera.rotation.set(0.50, 0, 0);

    /** Light */
    light = new THREE.DirectionalLight(0xffffff, 0.5);
    light.position.set(1, 5, 7.5);
    scene.add(light);
}

function renderCup(){
  
    cup = new THREE.Object3D();
    cup.name = "cup";
  
    /*****************************************************
    *   BODY                                            *
    *****************************************************/

    cupBodyGeometry = new THREE.CylinderGeometry(1.27, 1, 2.4, 64, 12, true);
    var loader2 = new THREE.TextureLoader();
    loader2.crossOrigin = '*';
  
    var dotsTexture = THREE.ImageUtils.loadTexture( dotsImage.src );

    dotsTexture.wrapS = THREE.RepeatWrapping;
    dotsTexture.wrapT = THREE.RepeatWrapping;
    dotsTexture.repeat.set(4.0, 1.30);
    dotsTexture.name = 'cupBodyTexture';

    cupBodyMaterial = new THREE.MeshBasicMaterial({
        color: 0xFFFFFF,
        side: THREE.DoubleSide,
        overdraw: 0.5
    });
    cupBodyMaterial.name = "cupBodyMaterial";

    cupBodyMaterialTexture = new THREE.MeshBasicMaterial({
        map: dotsTexture,
        transparent: true,
        overdraw: true
    });
    cupBodyMaterialTexture.name = "cupBodyTexture";

    cupBodyMaterials.push(cupBodyMaterial);
    cupBodyMaterials.push(cupBodyMaterialTexture);

    cupBodyMaterial.vertexColors = THREE.FaceColors;
    cupBodyGeometry.computeFaceNormals();

    cupBodyMesh = THREE.SceneUtils.createMultiMaterialObject(cupBodyGeometry, cupBodyMaterials);
    cupBodyMesh.name = 'cupBody';
    cup.add(cupBodyMesh);

    /*****************************************************
    *   LOGO                                            *
    *****************************************************/
    var loader = new THREE.TextureLoader();
    loader.crossOrigin = '*';
    var logoTexture =  THREE.ImageUtils.loadTexture( logoImage.src );
  
    logoTexture.wrapS = THREE.ClampToEdgeWrapping;
    logoTexture.wrapT = THREE.ClampToEdgeWrapping;
    logoTexture.repeat.set(1, 1);
    logoTexture.name = 'logo';

    logoMaterial = new THREE.MeshBasicMaterial({map: logoTexture, transparent: true, overdraw: true});
    logoGeometry = new THREE.Geometry();

    var logoGeometryData = generateGeometry(cupBodyGeometry, logoFaceArray);
    logoGeometry.faces = logoGeometryData.faces;
    logoGeometry.vertices = logoGeometryData.vertices;

    logoGeometry.computeFaceNormals();
    logoGeometry.computeVertexNormals();

    logoGeometry.computeBoundingBox();
    var max = logoGeometry.boundingBox.max,
        min = logoGeometry.boundingBox.min;

    var offsetX = (0 - min.x);
    var offsetY = (0 - min.y);
    var range = new THREE.Vector2(Math.atan(max.x / max.z) - Math.atan(min.x / min.z), max.y - min.y);

    var rangeX = range.x + 0.07; 
    var rangeY = max.y - min.y;

    logoGeometry.faceVertexUvs[0] = [];
    for (var i = 0; i < logoGeometry.faces.length; i++) {

        var v1 = logoGeometry.vertices[logoGeometry.faces[i].a],
            v2 = logoGeometry.vertices[logoGeometry.faces[i].b],
            v3 = logoGeometry.vertices[logoGeometry.faces[i].c];

        logoGeometry.faceVertexUvs[0].push([
            new THREE.Vector2((Math.atan(v1.x / v1.z) + offsetX) / rangeX, (v1.y + offsetY) / rangeY),
            new THREE.Vector2((Math.atan(v2.x / v2.z) + offsetX) / rangeX, (v2.y + offsetY) / rangeY),
            new THREE.Vector2((Math.atan(v3.x / v3.z) + offsetX) / rangeX, (v3.y + offsetY) / rangeY)
        ]);
    }

    logoGeometry.uvsNeedUpdate = true;

    logoMesh = new THREE.Mesh(logoGeometry, logoMaterial);
    logoMesh.overdraw = true;
    logoMesh.name = "cupLogo";
    cup.add(logoMesh);


    /*****************************************************
     *   TOP                                             *
     *****************************************************/

    cupTopGeometry = new THREE.TorusGeometry(1.29, .06, .16, 62);
    cupTopMaterial = new THREE.MeshStandardMaterial({
        color: 0xFFFFFF,
        roughness: 0.50,
        metalness: 0.50,
        emissive: 0xC4C4C4,
        overdraw: true
    });

    cupTop = new THREE.Mesh(cupTopGeometry, cupTopMaterial);
    cupTop.name = 'cupTop';
    cupTop.position.set(0, 1.25, 0);
    cupTop.rotation.x = Math.PI / 2;

    cup.add(cupTop);

    camera.lookAt(cup.position);
    scene.add(cup);

}

var render = function () {
    requestAnimationFrame(render);
    cup.rotation.y += 0.01;
        
    renderer.render(scene, camera);
};

initSchene();
renderCup();
render();
              
            
!
999px

Console