cube mesh around tube
HTML
<script src="http://frontier.lincoln.ac.uk/3d/development/Stage3/THREE_54/examples/js/controls/TrackballControls.js"></script>
<body onLoad="init()"></body>
CSS
body {
font-family: Monospace;
/* background-color: #a8ddf8;*/
margin: 0px;
overflow: hidden;
}
JavaScript
var controls, scene, camera, box, spline, counter = 0;
var tube, tubematerial, tubemesh;
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(-100, -100, 100);
// camera.zoom = 100;
camera.lookAt( new THREE.Vector3( 0, 1, 0 ) );
scene = new THREE.Scene();
// controls = new THREE.TrackballControls(camera, render.domElement);
var numPoints = 50;
// spline curve for tube
spline = new THREE.SplineCurve3([
new THREE.Vector3(0, 0, -20),
new THREE.Vector3(0, 200, -60),
new THREE.Vector3(150, 150, -200),
new THREE.Vector3(150, 50, -150),
new THREE.Vector3(250, 100, -150),
new THREE.Vector3(250, 300, -300)]);
spline.dynamic = true;
var splinePoints = spline.getPoints(numPoints);
// making tube around slpine curve
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);
for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
var line = new THREE.Line(geometry, material);
scene.add(line);
// makin tube
tube = new THREE.TubeGeometry(spline, numPoints, 10, 11, false, false);
tube.dynamic = true;
tube.verticesNeedUpdate = true;
tube.dynamic = true;
tubeMesh = new THREE.Mesh(tube, new THREE.MeshBasicMaterial({
color: 0x4169e1,
shading: THREE.FlatShading,
side: THREE.DoubleSide,
wireframe: true,
transparent: true,
vertexColors: THREE.FaceColors,
overdraw: true,
opacity: 0.6
}));
tubeMesh.useQuaternion = true;
tubeMesh.dynamic = true;
tubeMesh.needsUpdate =...