Three.js knot
My second experiment on three.js
by Abe
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
<script src="http://jsfiddle.net/cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
CSS
html, body {
padding:0px;
margin:0px;
}
canvas {
width: 100%;
height: 100%
}
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry;
var material = new THREE.MeshLambertMaterial();
material.color = new THREE.Color("red");
material.color.setHSL(0, 0.8, 0.5);
material.shading = THREE.FlatShading;
var points = [];
for (var i = 0; i < 10; i++) {
points[i] = new THREE.Vector3(
2.5 * Math.sin(i),
2.5 * Math.sin(i * 1.15 + 1.1),
2.5 * Math.sin(i * 1.7 + 1.5));
}
var extrudePath = new THREE.ClosedSplineCurve3(points);
geometry = new THREE.TubeGeometry(extrudePath, 250, 0.4, 5, true, false);
tubeMesh = new THREE.Mesh(geometry, material);
scene.add(tubeMesh);
geometry = new THREE.SphereGeometry(8);
material = new THREE.MeshLambertMaterial({
color: 0x778899
});
material.side = THREE.BackSide;
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
var light = new THREE.PointLight(0xFFFFFF, 1, 0);
light.position.set(0, 0, 50);
scene.add(light);
camera.position.z = 6.5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
tubeMesh.rotation.x += 0.001;
tubeMesh.rotation.y += 0.002;
}
render();