Javascript 鼠标控制对象网格
使用obj加载程序时,three.js提供的对象周围的移动非常有限。如何使其完全动态?例如,与OrbitControls three.js提供的类似 这是到目前为止我的代码Javascript 鼠标控制对象网格,javascript,three.js,Javascript,Three.js,使用obj加载程序时,three.js提供的对象周围的移动非常有限。如何使其完全动态?例如,与OrbitControls three.js提供的类似 这是到目前为止我的代码 <script> var container, stats; var camera, scene, renderer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWid
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/cylinder/' );
mtlLoader.load( 'cylinder.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/cylinder/' );
objLoader.load( 'cylinder.obj', function ( object ) {
object.position.y = 0;
scene.add( object );
}, onProgress, onError );
});
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 1;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .1;
camera.position.y += ( - mouseY - camera.position.y ) * .1;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
var容器,stats;
摄像机、场景、渲染器;
var mouseX=0,mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
init();
制作动画();
函数init(){
container=document.createElement('div');
文件.正文.附件(容器);
摄像头=新的三个透视摄像头(45,window.innerWidth/window.innerHeight,11000);
摄像机位置z=1000;
//场面
场景=新的三个。场景();
var环境光=新的三个环境光(0x4444);
场景。添加(环境光);
var方向灯=新的三个方向灯(0xffeedd);
directionalLight.position.set(0,0,1).normalize();
场景。添加(方向光);
//模型
var onProgress=函数(xhr){
if(xhr.Length可计算){
var percentComplete=xhr.loaded/xhr.total*100;
log(Math.round(完成百分比,2)+'%download');
}
};
var onError=函数(xhr){};
var mtlLoader=new THREE.mtlLoader();
mtlLoader.setPath('obj/圆柱体/');
mtl装载机负载('cylinder.mtl',功能(物料){
材料。预加载();
var objLoader=new THREE.objLoader();
objLoader.setMaterials(物料);
objLoader.setPath('obj/cyland/');
objLoader.load('cylinder.obj',函数(对象){
object.position.y=0;
场景。添加(对象);
},onProgress,onError);
});
//
renderer=new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth、window.innerHeight);
container.appendChild(renderer.doElement);
document.addEventListener('mousemove',onDocumentMouseMove,false);
//
addEventListener('resize',onWindowResize,false);
}
函数onWindowResize(){
windowHalfX=window.innerWidth/2;
windowHalfY=window.innerHeight/2;
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectMatrix();
renderer.setSize(window.innerWidth、window.innerHeight);
}
onDocumentMouseMove函数(事件){
mouseX=(event.clientX-windowHalfX)/1;
mouseY=(event.clientY-windowHalfY)/2;
}
//
函数animate(){
请求动画帧(动画);
render();
}
函数render(){
camera.position.x+=(mouseX-camera.position.x)*.1;
camera.position.y+=(-mouseY-camera.position.y)*.1;
摄像机。注视(场景。位置);
渲染器。渲染(场景、摄影机);
}
你想要类似OrbitControl的东西吗?为什么不直接使用轨道控制?是的,这就是我的意思。然而,当我试图在代码中实现它时,obj模型就消失了。我如何正确使用它?您知道吗?
但是,当我尝试在代码中实现它时,obj模型就不存在了。
您浏览器的控制台日志中是否有错误消息?你能演示一下你是如何实现轨道控制的吗?只要使用轨道控制就行了。如果你看不到你的模型我怀疑。。。答:您没有正确地实施OrbitControl。B:你的相机设置错误(放大太远或不看模型)。。或者C:您的模型未定位在您期望的位置(在从建模程序导出之前是否正确居中?)。