个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在 3D 场景中，管道几何体是通过从外部 JavaScript 文件加载 200 个点作为 JSON 数据来构建的。下面是完整的代码:
<!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;
}
如何通过键盘或轨迹球使相机移动到管几何形状中？ Screenshot of tube geometry
最佳答案
有多种方法可以在 TubeGeometry 内移动。如果您只需要遵循一些轨道，您可以创建一条样条线，然后使用
spline.getPointAt( 0 -1 )
在您的汽车、相机或任何您在管道中移动的物体上。旋转会让事情变得有点棘手。
关于javascript - Three.js - 在管几何形状内移动相机，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12530637/
24
4
0
我是 TensorFlow 菜鸟。我已经从 deeppose 的开源实现中训练了一个 TensorFlow 模型，现在必须针对一组新图像运行该模型。 该模型是在大小为 100 * 100 的图像上训练
我正在尝试以这种方式设置节点的大小: controller[shape=circle,width=.5,label="Controller",style=filled,fillcolor="#8EC1
是否有 VBA 代码可以在选择的每个单元格周围添加文本框。文本框应该是单元格的大小(类似于边框)？ 最佳答案 您可以使用 .AddTextbox方法。循环遍历您选择的单元格，并使用单元格的尺寸属性来设
我有一个变量 a尺寸 (1, 5) 我想“平铺”的次数与我的小批量的大小一样多。例如，如果小批量大小为 32，那么我想构造一个张量 c维度为 (32, 5)，其中每一行的值与原始 (1, 5) 变量
我在使用 javaFX 时遇到问题。我想每 1000 毫秒在应用程序窗口中显示一次时间。 public class Main extends Application { StackPane root
所以我目前正在创建这个 API。这个登录类应该只创建一个场景，其中包含制作 GUI 所需的所有框。我遇到的问题是，单击时我的形状不会执行任何操作。我有事件监听器，但它不起作用。 import
我正在用 python turtle 画一些东西，我使用了形状函数，但是形状 overdraw 了它们之前的其他形状(我可以看到形状在移动)，并且我只得到了最后一个形状: `up() goto(-20
我正在读取多个 .csv 文件作为具有相同形状的 panda DataFrame。对于某些索引，某些值为零，因此我想选择具有相同形状的每个索引的值，并为相同的索引放置零值并删除零以成为相同的形状: a
我有一个简单的二维网格，格式为 myGrid[x,y] 我正在尝试找到一种方法来找到围绕选定网格的周长，这样我就有了一个可供选择的形状。 这是我的意思的一个例子: 这里的想法是找到所有相关的“角”，也
我有一个网络层，用于调用多个端点。我想减少重复代码的数量，并认为也许我可以将响应模型作为端点的一部分传递。 这个想法是不需要多个仅因响应而不同的函数，我可以调用我的网络层并根据路径进行设置。 我看到的
我正在创建一个自定义 ImageView，它将我的图像裁剪成六边形并添加边框。我想知道我的方法是否正确，或者我是否以错误的方式这样做。有很多自定义库已经在执行此操作，但开箱即用的库中没有一个具有我正在
我正在编写一些代码，这些代码需要识别一些基于节点云的相当基本的几何图形。我会对检测感兴趣: 板(简单有界平面) 圆柱体(两个节点循环) 半圆柱(圆弧+直线+圆弧+直线) 圆顶(n*loop+top n
我有这个形状: http://screencast.com/t/9UUhAXT5Wu 但边界在截止点处没有跟随它 - 我该如何解决？ 这是我当前 View 的代码: self.view.backgro
我现在脑震荡，所以我想问一个非常简单的问题。 目前，我正在尝试打印出这样的开头 当输入为 7 时，输出为 * ** * ** * ** * 这里是我的代码，它打印 14 次而不是 7 次，或者当我输入
我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 chrome 和 mozilla，但在 Edge 中出现故障。 以下是我在 chrome 中应用的样式: a.subnav__item
我想要一个带有两种颜色边框轮廓的 shape 元素。我可以使用 solid 元素做一个单一的颜色轮廓，但这只允许我画一条线。我尝试在我的形状中使用两个 stroke 元素，但这也不起作用。 有没有办法
我需要为屏幕上的形状着色任何我想要的颜色。我目前正在尝试使用 UIImage 来执行此操作，我想根据自己的需要重新着色。据我所知，执行此操作的唯一方法是获取 UIImage 的各个像素，这需要更多我想
因此，经过多年的 OOP，我从我的一门大学类(class)中得到了一个非常简单的家庭作业，以实现一个简单的面向对象的结构。 要求的设计: 实现面向对象的解决方案以创建以下形状: 椭圆、圆形、正方形、矩
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我想知道是否可以使用类似于以下的 div 制作复杂的形状: 它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙
我是一名优秀的程序员,十分优秀！