个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我创建了一个场景，其中包含纹理和网格圆柱体以及包含线条和顶点的网格 Three.js。通过向左或向右拖动鼠标，圆柱体具有旋转效果。
<!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;
}
</style>
</head>
<body>
<script src="three.min.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, light, projector;
var particleMaterial;
var cylinder, line, geometry, geometry1;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var objects = [];
var radious = 1600, theta = 45, onMouseDownTheta = 45, phi = 60, onMouseDownPhi = 60, isShiftDown = false;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cylinder<br/>Objective: By spining left, cylinder should go into the surface and by spining right it should come out.';
container.appendChild( info );
// camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 200;
camera.position.z = 800;
// scene
scene = new THREE.Scene();
// light
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
// texture
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}//alert(materials.length);
// 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 );
}
// cylinder
geometry1 = new THREE.CylinderGeometry(100, 100, 300, 16, 4, false);
cylinder = new THREE.Mesh(geometry1 ,new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
//cylinder.position.x = 100;
cylinder.position.y = -50;
//cylinder.overdraw = true;
scene.add(cylinder);
alert(geometry1.faces.length);
objects.push(cylinder);
// projector
projector = new THREE.Projector();
// renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// 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( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
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 );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
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 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 animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
cylinder.rotation.y += ( targetRotation - cylinder.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
我引用的是这个thread如何将此圆柱体转换为 3d 弯曲开口管？
最佳答案
也许尝试看看这个 fiddle http://jsfiddle.net/NCWYy/
关于javascript - 将圆柱体转换为弯管，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12423582/
26
4
0
我正在对发生在自身包裹的方形网格上的事物进行建模(即，如果您向上走过最高点，您最终会到达最低点，就像一个圆柱体；如果您向右走，您只是击中边界)。我需要跟踪各种代理的位置，不同点的资源量，并根据一定的规
我正在尝试显示具有 3 个圆柱体和 3 种不同颜色的轴。这是我的代码； glDisable(GL_LIGHTING); glClear(GL_COLOR_BUFFER_BIT); glColor3f(
我正在 Matlab 中做一个数学实验，结果应该是 x,y 平面上的一个圆。但有时，圆圈开始螺旋上升。我现在正在尝试将 x,y 平面弯曲成圆柱体(如下图所示)。目前我只有点的 x 和 y 坐标。 我试
我正在尝试在 3D 空间中创建一个圆柱体。我在 3D 中获得起点和终点并放置顶点，我需要为圆柱体的底部和顶部创建 2 个圆。我考虑制作一个坐标为 (1,0,0) 的 vector u 并计算方向 ve
我有以下代码可以在 View 中显示 3D 圆柱体。在设备上查看时，手势会在 x 轴(上下滑动手势)和 y 轴(左右滑动)上旋转圆柱体，但 z 轴被锁定。我相信这是 allowsCameraContr
我需要对我的圆柱体进行纹理处理，我有texture.png并且我已经做了一个多边形网格(带有三角形)。 如果您需要的话，这是代码 pastebin import pyglet import pygle
我是新的 opengl 学习者。我知道有内置函数可以在过剩的情况下绘制圆柱体，比如 GLUquadricObj *quadratic; quadratic=gluNewQuadric(); gluCy
我试图在我的 React 组件中添加圆柱体 3D 图表。但是，我遇到了这个错误。 Error: Highcharts error #17: www.highcharts.com/errors/17/?
我的第一篇文章在这里。 :)我目前正在用 C 语言为我的学校项目编写光线追踪器。我已经可以显示带有一些灯光效果的球体、三角形和平面。现在我想显示圆柱体(然后是圆锥体，但首先是圆柱体!)。我选择有一个平
我正在开发一个小项目，其中我必须从图像中检测 aruco 标记，然后制作覆盖所有白色框的 3d 圆柱体或立方体。 在下面的代码中，它们是一个 detector_marker() 函数，其中我必须返回
我已经计算了索贝尔梯度的大小和方向。但我一直不知道如何进一步使用它来进行形状检测。 图像>灰度>索贝尔过滤>索贝尔梯度和方向计算>下一步？ 使用的 Sobel 内核是: Kx = ([[1, 0, -
我想将 Canvas 呈现为圆柱形锥体，您可以像轮子一样在两个方向上旋转。这在 JS/CSS3 中完全可行吗？ 最佳答案 您应该看看这个新的 CSS3 功能:自定义过滤器/CSS 着色器。 这里有一些
我是一名优秀的程序员,十分优秀！