javascript - 添加轨道控制后,我绘制圆柱体的功能不起作用
问题描述
我想在我的场景中添加一个 orbitcotrol,但是当我添加它时,我的功能(在此之前运行良好)不再做任何事情。
这是我应该执行的功能。
function DrawMesh(){
ClearMesh();
//langsLoop
var langsMaas = document.getElementById("longSpacing").value;
var aantalLangs = document.getElementById('longAmount').innerHTML;
var langsDiameter = document.getElementById("langsDiameter").value;
var onderRandRooster = 59;
var scale = 0.03;
for (i = 0; i < aantalLangs; i++) {
var geometry = new THREE.CylinderGeometry( (langsDiameter * scale), (langsDiameter * scale) , langsLengte * scale , 20 );
var material = new THREE.MeshBasicMaterial( {color: 0xffe26f} );
var cylinder = new THREE.Mesh( geometry, material );
cylinder.userData.type = 'cylinder';
scene.add( cylinder );
cylinder.position.set( 0 , 0 ,onderRandRooster);
onderRandRooster -= (langsMaas * scale);
cylinder.rotation.z = Math.PI / 2;
}
//dwarsLoop
var lengte2 = document.getElementById("transLength").value;
var dwarsMaas = document.getElementById("transSpacing").value;
var dwarsDiameter = document.getElementById("dwarsDiameter").value
var aantalLangs = document.getElementById('transAmount').innerHTML;
var i;
var z = 90;
for (i = 0; i < aantalLangs; i++)
{
var geometry2 = new THREE.CylinderGeometry( dwarsDiameter * scale , dwarsDiameter * scale , lengte2*scale , 20 );
var material2 = new THREE.MeshBasicMaterial( {color: 0xe4734f} );
var cylinder2 = new THREE.Mesh( geometry2, material2 );
cylinder2.userData.type = 'cylinder';
scene.add( cylinder2 );
cylinder2.position.set( z , 1 , 23);
z -= (dwarsMaas*scale);
cylinder2.rotation.x = Math.PI / 2;
}
}
这是我的初始化函数,我必须添加它才能使我的轨道控制工作。正如你在这里看到的,我添加了“drawmesh”,但它没有做任何事情,我也尝试过 jst 在那里对接我的函数,但这也不起作用。
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, controls, scene, renderer;
init();
render();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 120, 70 );
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
controls.screenSpacePanning = false;
controls.minDistance = 100;
controls.maxDistance = 500;
controls.maxPolarAngle = Math.PI / 2;
// world
var size = 100 ;
var step = 1 ;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({color:0x808080});
//rooster
for ( var i = - size; i <= size; i += step){
geometry.vertices.push(new THREE.Vector3(- size, - 0.04, i ));
geometry.vertices.push(new THREE.Vector3( size, - 0.04, i ));
geometry.vertices.push(new THREE.Vector3( i, -0.04, -size));
geometry.vertices.push(new THREE.Vector3( i, - 0.04, size ));
}
var line = new THREE.LineSegments( geometry, material, THREE.LinePieces );
scene.add(line);
DrawMesh()
// lights
var light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
//
window.addEventListener( 'resize', onWindowResize, false );
}
解决方案
推荐阅读
- c# - 查找包含实现接口的脚本的子对象中的所有对象
- reactjs - s3 aws反应上传文件ERR_NAME_NOT_RESOLVED SOLUTION
- json - Chrome 扩展程序:如何将站点访问默认设置为“在特定站点上”并预先填充它们?
- backdraftjs - backdraftjs 组件如何操作子组件上的 watchable?
- python - Flask-SocketIO 服务器部署到 Heroku 但不运行
- java - 从 Google 联系人迁移到 People API。为 Java 构建它的提示?
- php - 如何从另一个容器中使用 pdftk
- node.js - 如何获取所有 graphql 模式查询、变异、订阅
- amazon-web-services - 数据复制停止并且无法在 AWS Application Migration Service 中启动数据传输
- mongoose - Nestjs:如何使用猫鼬启动事务会话?