3D シーンでは、チューブ ジオメトリは、外部 JavaScript ファイルから JSON データとして 200 ポイントをロードすることによって構築されます。以下は完全なコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d Model using HTML5 and three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#Find_panel {
position: absolute;
right: 5px;
top: 5px;
color: #fff;
text-align: left;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
width: 290px;
height: 120px;
border: solid 1px black;
border-radius: 5px;
}
#Find_panel input {
padding: 2px 4px;
margin-bottom: 3px;
}
</style>
</head>
<body>
<input type="button" value="plot" onClick="return plotPath();" />
<script src="three.min.js" type="text/javascript"></script>
<script src="Curve.js" type="text/javascript"></script>
<script src="TubeGeometry.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script src="path.js" type="text/javascript"></script>
<script>
// variables
var container, stats, form;
var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
var text, plane, tube, tubeMesh, parent;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var binormal = new THREE.Vector3();
var normal = new THREE.Vector3();
var materials = [];
var onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,isUserInteracting = false,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
function plotPath()
{
var obj = getPath();
var segments = 50;
var closed = false;
var debug = true;
var radiusSegments = 12;
var tube;
var points = [];
var x=0,y=0,z=0;
for(var i=0; i<obj.path.length; i++)
{
console.log(obj.path[i].point);
points.push(obj.path[i].point);
extrudePath = new THREE.SplineCurve3(points);
extrudePath.dynamic = true;
tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);
tube.dynamic = true;
tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({
color: 0x000000,side: THREE.DoubleSide,
opacity: 0.5,transparent: true,
wireframe: true}));
tubeMesh.__dirtyVertices = true;
tubeMesh.dynamic = true;
parent = new THREE.Object3D();
parent.position.y = 100;
if ( tube.debug ) tubeMesh.add( tube.debug );
parent.add( tubeMesh );
}
scene.add( tubeMesh );
scene.add(parent);
animate();
}
init();
//animate();
function init(){
// container
container = document.createElement( 'div' );
document.body.appendChild( container );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.position.set(0, 50, 500);
camera.lookAt(parent);
// CONTROLS
controls = new THREE.TrackballControls( this.camera, container );
// light
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
// Grid
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
for ( var i = 0; i <= 20; i ++ ) {
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
// projector
projector = new THREE.Projector();
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseover', onDocumentMouseOver, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOver( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
function onDocumentMouseWheel( event ) {
// WebKit
if ( event.wheelDeltaY ) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if ( event.wheelDelta ) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if ( event.detail ) {
fov += event.detail * 1.0;
}
camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
render();
}
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function update()
{
controls.update();
stats.update();
}
function render() {
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = ( 90 - lat ) * Math.PI / 180;
theta = lon * Math.PI / 180;
camera.target = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target = 500 * Math.cos( phi );
camera.target = 500 * Math.sin( phi ) * Math.sin( theta );
tubeMesh.rotation.y += ( targetRotation - tubeMesh.rotation.y ) * 0.15;
camera.updateMatrixWorld();
camera.lookAt( camera.target );
renderer.render( scene, camera );
}
</script>
</body>
</html>
path.js ファイル
function getPath()
{
var path = {"path":
[
{"point":new THREE.Vector3(0,0,-4.8)},
{
"point":new THREE.Vector3(3,-1.9,-4.8)
},
{
"point":new THREE.Vector3(361.2,-1.9,-4.8)
},
{
"point":new THREE.Vector3(378,-1.97,-4.85)
},
{
"point":new THREE.Vector3(386,-2.02,-4.89)
},
{
"point":new THREE.Vector3(396,-2.05,-4.93)
},
{
"point":new THREE.Vector3(405,-2.06,-4.99)
},
{
"point":new THREE.Vector3(417,-2.13,-5.07)
},
{
"point":new THREE.Vector3(435,-2.21,-5.09)
},
{
"point":new THREE.Vector3(461,-2.35,-5.04)
},
{
"point":new THREE.Vector3(484.99,-2.82,-5.06)
},
{
"point":new THREE.Vector3(513.97,-3.99,-5.17)
},
{
"point":new THREE.Vector3(543.88,-6.25,-5.47)
},
{
"point":new THREE.Vector3(571.67,-9.57,-6.06)
},
{
"point":new THREE.Vector3(600.32,-14.04,-6.64)
},
{
"point":new THREE.Vector3(628.83,-19.34,-7.14)
},
{
"point":new THREE.Vector3(658.12,-25.79,-7.56)
},
{
"point":new THREE.Vector3(686.17,-33.14,-7.83)
},
{
"point":new THREE.Vector3(712.87,-41.54,-8.28)
},
{
"point":new THREE.Vector3(736.45,-49.81,-8.98)
},
{
"point":new THREE.Vector3(743.95,-52.61,-9.18)
},
{
"point":new THREE.Vector3(783.56,-69.29,-9.89)
},
{
"point":new THREE.Vector3(810.36,-82.1,-10.27)
},
{
"point":new THREE.Vector3(835.8,-95.37,-10.06)
},
{
"point":new THREE.Vector3(869.69,-114.96,-8.2)
},
{
"point":new THREE.Vector3(885.47,-124.91,-6.93)
},
{
"point":new THREE.Vector3(911.47,-140.99,-5.56)
},
{
"point":new THREE.Vector3(935.87,-154.92,-5.28)
},
{
"point":new THREE.Vector3(960.87,-168.16,-5.85)
},
{
"point":new THREE.Vector3(986.6,-180.75,-7.54)
},
{
"point":new THREE.Vector3(1015.85,-193.98,-11.05)
},
{
"point":new THREE.Vector3(1042.4,-205,-15.55)
},
{
"point":new THREE.Vector3(1069,-215.17,-21.53)
},
{
"point":new THREE.Vector3(1095.28,-224.51,-29.08)
},
{
"point":new THREE.Vector3(1121.58,-232.81,-38.03)
},
{
"point":new THREE.Vector3(1147.96,-239.95,-48.02)
},
{
"point":new THREE.Vector3(1173.78,-246.06,-58.7)
},
{
"point":new THREE.Vector3(1199.97,-251.68,-70.8)
},
{
"point":new THREE.Vector3(1225.44,-256.37,-83.85)
},
{
"point":new THREE.Vector3(1250.21,-259.76,-97.73)
},
{
"point":new THREE.Vector3(1275.18,-261.91,-112.89)
},
{
"point":new THREE.Vector3(1299.18,-262.72,-128.25)
},
{
"point":new THREE.Vector3(1324.16,-261.9,-145.17)
},
{
"point":new THREE.Vector3(1347.12,-259.26,-162.01)
},
{
"point":new THREE.Vector3(1370.1,-254.79,-180.44)
},
{
"point":new THREE.Vector3(1391.44,-249.33,-199.45)
},
{
"point":new THREE.Vector3(1412.08,-242.89,-219.66)
},
{
"point":new THREE.Vector3(1431.21,-235.86,-240)
},
{
"point":new THREE.Vector3(1448.85,-228.85,-259.77)
},
{
"point":new THREE.Vector3(1466.93,-221.02,-281.17)
},
{
"point":new THREE.Vector3(1482.61,-212.83,-301.56)
},
{
"point":new THREE.Vector3(1499.46,-201.99,-325.61)
},
{
"point":new THREE.Vector3(1514.79,-190.3,-349.76)
},
{
"point":new THREE.Vector3(1528.46,-178.3,-373.74)
},
{
"point":new THREE.Vector3(1540.44,-165.72,-396.95)
},
{
"point":new THREE.Vector3(1551.12,-152.11,-420.22)
},
{
"point":new THREE.Vector3(1560.6,-137.69,-443.65)
},
{
"point":new THREE.Vector3(1568.68,-122.77,-467.03)
},
{
"point":new THREE.Vector3(1575.1,-107.38,-490.63)
},
{
"point":new THREE.Vector3(1579.83,-90.95,-514.17)
},
{
"point":new THREE.Vector3(1582.85,-73.58,-537.44)
},
{
"point":new THREE.Vector3(1584.44,-56.31,-559.55)
},
{
"point":new THREE.Vector3(1585.69,-37.18,-583.4)
},
{
"point":new THREE.Vector3(1586.7,-19.01,-605.85)
},
{
"point":new THREE.Vector3(1587.11,0.09,-627.93)
},
{
"point":new THREE.Vector3(1587.12,19.32,-649.89)
},
{
"point":new THREE.Vector3(1587.14,37.95,-672.25)
},
{
"point":new THREE.Vector3(1587.15,56.42,-694.74)
},
{
"point":new THREE.Vector3(1587.16,74.88,-717.49)
},
{
"point":new THREE.Vector3(1587.18,86.94,-732.49)
},
{
"point":new THREE.Vector3(1587.02,90.22,-736.59)
},
{
"point":new THREE.Vector3(1585.94,98.3,-746.72)
},
{
"point":new THREE.Vector3(1584.12,110.12,-761.35)
},
{
"point":new THREE.Vector3(1582.37,126.31,-780.87)
},
{
"point":new THREE.Vector3(1581.35,144.78,-802.65)
},
{
"point":new THREE.Vector3(1581,164.31,-824.89)
},
{
"point":new THREE.Vector3(1581.48,183.79,-845.82)
},
{
"point":new THREE.Vector3(1582.68,202.72,-864.75)
},
{
"point":new THREE.Vector3(1584.17,225.59,-885.31)
},
{
"point":new THREE.Vector3(1585.18,248.06,-903.31)
},
{
"point":new THREE.Vector3(1585.82,270.32,-919.26)
},
{
"point":new THREE.Vector3(1586.13,295.79,-935.66)
},
{
"point":new THREE.Vector3(1586.18,320.82,-950.1)
},
{
"point":new THREE.Vector3(1586.18,346.44,-963.02)
},
{
"point":new THREE.Vector3(1586.08,372.73,-975.03)
},
{
"point":new THREE.Vector3(1585.94,398.95,-986.7)
},
{
"point":new THREE.Vector3(1585.79,425.21,-998.77)
},
{
"point":new THREE.Vector3(1585.63,450.33,-1010.68)
},
{
"point":new THREE.Vector3(1585.41,476.3,-1023.12)
},
{
"point":new THREE.Vector3(1585.28,502.88,-1036.15)
},
{
"point":new THREE.Vector3(1585.33,528.34,-1049.39)
},
{
"point":new THREE.Vector3(1585.06,553.75,-1063.35)
},
{
"point":new THREE.Vector3(1584.58,577.19,-1076.95)
},
{
"point":new THREE.Vector3(1584.17,603.04,-1092.95)
},
{
"point":new THREE.Vector3(1583.93,625.7,-1107.8)
},
{
"point":new THREE.Vector3(1583.78,649.56,-1124.45)
},
{
"point":new THREE.Vector3(1583.65,673.62,-1142.71)
},
{
"point":new THREE.Vector3(1583.58,696.13,-1160.68)
},
{
"point":new THREE.Vector3(1583.51,718.5,-1178.97)
},
{
"point":new THREE.Vector3(1583.63,740.65,-1197.37)
},
{
"point":new THREE.Vector3(1583.93,762.65,-1215.8)
},
{
"point":new THREE.Vector3(1584.15,784.53,-1234.98)
},
{
"point":new THREE.Vector3(1584.18,805.02,-1253.63)
},
{
"point":new THREE.Vector3(1584.12,827.32,-1273.69)
},
{
"point":new THREE.Vector3(1584.16,848.92,-1292.44)
},
{
"point":new THREE.Vector3(1584.28,870.61,-1310.92)
},
{
"point":new THREE.Vector3(1584.31,891.39,-1328.32)
},
{
"point":new THREE.Vector3(1584.15,913.88,-1347.1)
},
{
"point":new THREE.Vector3(1583.87,935.63,-1365.2)
},
{
"point":new THREE.Vector3(1583.66,958.97,-1384.67)
},
{
"point":new THREE.Vector3(1583.6,980.53,-1402.69)
},
{
"point":new THREE.Vector3(1583.52,1004.11,-1422.36)
},
{
"point":new THREE.Vector3(1583.46,1026.39,-1440.92)
},
{
"point":new THREE.Vector3(1583.46,1048.47,-1459.25)
},
{
"point":new THREE.Vector3(1583.63,1070.67,-1477.76)
},
{
"point":new THREE.Vector3(1583.79,1091.96,-1495.32)
},
{
"point":new THREE.Vector3(1583.74,1114.66,-1513.84)
},
{
"point":new THREE.Vector3(1583.51,1136.87,-1532.64)
},
{
"point":new THREE.Vector3(1583.39,1159.24,-1553.08)
},
{
"point":new THREE.Vector3(1583.51,1180.05,-1573.28)
},
{
"point":new THREE.Vector3(1583.6,1200.71,-1593.62)
},
{
"point":new THREE.Vector3(1583.63,1221.51,-1613.84)
},
{
"point":new THREE.Vector3(1583.67,1242.52,-1634.25)
},
{
"point":new THREE.Vector3(1583.66,1263.01,-1654.49)
},
{
"point":new THREE.Vector3(1583.6,1283.47,-1675.04)
},
{
"point":new THREE.Vector3(1583.66,1304.07,-1695.74)
},
{
"point":new THREE.Vector3(1583.71,1311.2,-1703.03)
},
{
"point":new THREE.Vector3(1583.83,1330.87,-1723.79)
},
{
"point":new THREE.Vector3(1583.92,1350.74,-1744.92)
},
{
"point":new THREE.Vector3(1583.93,1370.59,-1765.93)
},
{
"point":new THREE.Vector3(1583.9,1390.29,-1787.2)
},
{
"point":new THREE.Vector3(1583.92,1410.08,-1808.67)
},
{
"point":new THREE.Vector3(1583.93,1429.9,-1829.84)
},
{
"point":new THREE.Vector3(1584.27,1447.08,-1848.41)
},
{
"point":new THREE.Vector3(1584.54,1460.96,-1863.9)
},
{
"point":new THREE.Vector3(1584.2,1480.03,-1886.4)
},
{
"point":new THREE.Vector3(1583.92,1497.61,-1908.95)
},
{
"point":new THREE.Vector3(1584.04,1521.63,-1942.18)
},
{
"point":new THREE.Vector3(1584.12,1538.22,-1966.08)
},
{
"point":new THREE.Vector3(1584.04,1554.3,-1989.74)
},
{
"point":new THREE.Vector3(1583.86,1570.59,-2014.21)
},
{
"point":new THREE.Vector3(1583.64,1587.01,-2038.23)
},
{
"point":new THREE.Vector3(1583.6,1603.9,-2061.56)
},
{
"point":new THREE.Vector3(1583.7,1621.04,-2084.58)
},
{
"point":new THREE.Vector3(1583.71,1638.71,-2107.95)
},
{
"point":new THREE.Vector3(1583.66,1656.08,-2131.42)
},
{
"point":new THREE.Vector3(1583.44,1673.04,-2155.19)
},
{
"point":new THREE.Vector3(1583.29,1689.5,-2178.95)
},
{
"point":new THREE.Vector3(1583.43,1705.84,-2202.9)
},
{
"point":new THREE.Vector3(1583.5,1722.15,-2227)
},
{
"point":new THREE.Vector3(1583.45,1738.47,-2251.09)
},
{
"point":new THREE.Vector3(1583.45,1754.53,-2275.72)
},
{
"point":new THREE.Vector3(1583.44,1770.43,-2299.72)
},
{
"point":new THREE.Vector3(1583.62,1787.54,-2323.14)
},
{
"point":new THREE.Vector3(1583.99,1805.05,-2346.5)
},
{
"point":new THREE.Vector3(1584.4,1823.38,-2368.96)
},
{
"point":new THREE.Vector3(1584.79,1843.52,-2390.09)
},
{
"point":new THREE.Vector3(1585.26,1865.03,-2410.12)
},
{
"point":new THREE.Vector3(1585.72,1887.27,-2428.4)
},
{
"point":new THREE.Vector3(1585.81,1911.12,-2445.42)
},
{
"point":new THREE.Vector3(1585.65,1935.65,-2460.87)
},
{
"point":new THREE.Vector3(1585.56,1960.84,-2475.45)
},
{
"point":new THREE.Vector3(1585.55,1986.39,-2488.95)
},
{
"point":new THREE.Vector3(1585.54,2012.8,-2500.9)
},
{
"point":new THREE.Vector3(1585.56,2039.95,-2511.38)
},
{
"point":new THREE.Vector3(1585.68,2067.37,-2520.49)
},
{
"point":new THREE.Vector3(1585.84,2095.54,-2528.14)
},
{
"point":new THREE.Vector3(1585.95,2124.01,-2534.66)
},
{
"point":new THREE.Vector3(1585.85,2152.62,-2540.46)
},
{
"point":new THREE.Vector3(1585.66,2181.3,-2545.39)
},
{
"point":new THREE.Vector3(1585.47,2209.9,-2549.55)
},
{
"point":new THREE.Vector3(1585.15,2239.28,-2553.11)
},
{
"point":new THREE.Vector3(1584.91,2268.14,-2555.99)
},
{
"point":new THREE.Vector3(1584.65,2297.08,-2559)
},
{
"point":new THREE.Vector3(1584.51,2325.96,-2563.23)
},
{
"point":new THREE.Vector3(1584.69,2355.01,-2568.93)
},
{
"point":new THREE.Vector3(1585,2382.93,-2575.94)
},
{
"point":new THREE.Vector3(1585.22,2410.98,-2584.41)
},
{
"point":new THREE.Vector3(1585.56,2438.87,-2593.69)
},
{
"point":new THREE.Vector3(1586.12,2465.93,-2604.11)
},
{
"point":new THREE.Vector3(1586.28,2492.55,-2616.1)
},
{
"point":new THREE.Vector3(1586.05,2518.24,-2629.53)
},
{
"point":new THREE.Vector3(1585.72,2543.28,-2644.54)
},
{
"point":new THREE.Vector3(1585.16,2566.25,-2659.83)
},
{
"point":new THREE.Vector3(1584.5,2587.99,-2675.66)
},
{
"point":new THREE.Vector3(1584.07,2609.47,-2692.17)
},
{
"point":new THREE.Vector3(1583.9,2632.23,-2709.99)
},
{
"point":new THREE.Vector3(1583.58,2652.96,-2726.97)
},
{
"point":new THREE.Vector3(1583.31,2673.99,-2745.45)
},
{
"point":new THREE.Vector3(1583.25,2694.96,-2765.47)
},
{
"point":new THREE.Vector3(1583.18,2713.75,-2785)
},
{
"point":new THREE.Vector3(1583.12,2732.02,-2805.55)
},
{
"point":new THREE.Vector3(1582.65,2749.82,-2826.9)
},
{
"point":new THREE.Vector3(1581.74,2767.17,-2848.6)
},
{
"point":new THREE.Vector3(1580.85,2784.22,-2870.03)
},
{
"point":new THREE.Vector3(1579.57,2801.31,-2891.28)
},
{
"point":new THREE.Vector3(1578.92,2808.08,-2899.67)
}
]
}
return path;
}
キーボードまたはトラックボールでカメラをチューブ ジオメトリに移動するにはどうすればよいですか? チューブ形状のスクリーンショット
