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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
</head>
<body>
</body>
</html>
 
// global variables
    var renderer;
    var scene;
    var camera;
    var geometry;
    var control;
    var count = 0;
    var animationTracker;
    init();
    drawSpline();
    function init()
    {
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        // position and point the camera to the center of the scene
        camera.position.x = 0;
        camera.position.y = 40;
        camera.position.z = 40;
        camera.lookAt(scene.position);
        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);
    }
    function drawLine()
    {
        var material = new THREE.LineBasicMaterial({
            color: 0x0000ff
        });
        var geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(-2, 30, 30));
        geometry.vertices.push(new THREE.Vector3(0, 0, -20));
        var line = new THREE.Line(geometry, material);
        scene.add(line);
        renderer.render(scene, camera);
    }
    function drawSpline(numPoints)
    {
        var numPoints = 100;
//        var start = new THREE.Vector3(-5, 0, 20);
        var start = new THREE.Vector3(-5, 0, 20);
        var middle = new THREE.Vector3(0, 30, 0);
        var end = new THREE.Vector3(5, 0, -20);
        var curveQuad = new THREE.QuadraticBezierCurve3(start, middle, end);
        var tube = new THREE.TubeGeometry(curveQuad, numPoints, 0.5, 20, false);
        var mesh = new THREE.Mesh(tube, new THREE.MeshNormalMaterial({
            opacity: 0.9,
            transparent: true
        }));
        scene.add(mesh);
        renderer.render(scene, camera);
    }
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers