Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script>
</body>
</html>
 
var camera, scene, renderer, geometry, material, mesh;
var num_vertices = 20;
var frame_count = 0;
init();
animate();
function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x999999 )
    
    camera = new THREE.PerspectiveCamera(50, window.innerWidth /        window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
  
    var light = new THREE.PointLight( 0xffffff, 20 );
    light.position.set( 50, 50, 50 );
    scene.add( light );
    scene.add(new THREE.PointLightHelper(light, 10));
    
    geometry = new THREE.BufferGeometry();
    var positions = new Float32Array( num_vertices * 3 );
    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    
    material = new THREE.MeshPhongMaterial( {
            color: 0xa48740,
            specular: 0x555555,
            reflectivity: 30,
            shininess: 30,
            side: THREE.DoubleSide
        } );
    mesh = new THREE.Mesh(geometry, material);
    mesh.drawMode = THREE.TriangleStripDrawMode;
    
    scene.add(mesh);
    
    var pos = mesh.geometry.attributes.position.array
    var index = 0
    var angle = 0.0
    var lineWeight = 3
    var x = 0;
    var y = 0;
    var z = 0;
    var bool= false;
    for ( var i = 0; i < num_vertices; i ++ ) {
            
      
      pos[index++] = bool ? x + lineWeight : x -lineWeight;
      pos[index++] = y;
      pos[index++] = bool ? z + Math.sin(angle) * lineWeight : z + Math.sin(angle) * -lineWeight;
      bool = !bool;
      angle += 0.4
      y += 10;
    }
    renderer = new THREE.WebGLRenderer({antialias:true});  
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setFaceCulling(THREE.CullFaceNone);
  
    document.body.appendChild(renderer.domElement);
}
function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
        
    mesh.geometry.setDrawRange( 0, Math.floor(frame_count));
  
    frame_count = (frame_count+0.1) % num_vertices;
    
    //mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render(scene, camera);
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers