需要three.js场景的3D对象的互动鼠标控制 [英] need interactive mouse control of 3D object in three.js scene
问题描述
我想补充装.STL 3D对象的互动鼠标控制。我的困难是与集成鼠标控制code，找不到实例或显示对象。下面是我与。我的preference是控制与鼠标事件的摄像机位置（相对于抓住物体上的定义的点），使得其看起来像我旋转用鼠标对象和放大和缩小用滚轮。
I'm trying to add interactive mouse control of loaded .stl 3D objects. My difficulty is with integrating mouse control code, not finding examples or displaying objects. Below is what I'm working with. My preference is to control the camera position with mouse events (as opposed to grabbing a defined point on the object) such that it looks like I'm rotating the object with the mouse and zooming in and out with the scroll wheel.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - STL</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: #000000;
margin: 0px;
overflow: hidden;
}
a { color: skyblue }
</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script>
var container, camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(
35, // field of view
window.innerWidth / window.innerHeight, // aspect ratio
1 , // distance to nearest side of rendered space
10000 // distance to farthest side of rendered space
);
camera.position.set( 3, -3, -3 ); // initial camera position x,y,z coordinates
scene = new THREE.Scene();
// object
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } ); //color: object hexadecimal color after the 0x
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
loader.load( 'slotted_disk.stl' ); // from https://raw.github.com/mrdoob/three.js/dev/examples/models/stl/slotted_disk.stl
// lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position = camera.position;
scene.add( directionalLight );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function addLight( x, y, z, color, intensity ) {
var directionalLight = new THREE.DirectionalLight( color, intensity );
directionalLight.position.set( x, y, z )
scene.add( directionalLight );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
//var timer = Date.now() * 0.0005; // optional for auto rotation
//camera.position.x = Math.sin ( timer ) * 5; // optional for auto rotation
//camera.position.z = Math.cos( timer ) * 5; // optional for auto rotation
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
推荐答案
这是该行＆LT;脚本src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>这使您可以访问轨迹球控制。
It's the line <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script> that gives you access to the trackball control.
但你必须激活它，加上下面几行：
But you have to activate it, by adding the following lines :
-
在变量声明头：
无功控制;
On the variable declaration header :
var controls;
在init（）函数：
控制=新THREE.TrackballControls（摄像头）;
controls.addEventListener（'变'，渲染）;
In the init() function :
controls = new THREE.TrackballControls( camera );
controls.addEventListener( 'change', render );
在动画（）函数，调用之前渲染（）：
controls.update（）;
In the animate() function, before the call to render() :
controls.update();
这样，你实例化你的轨迹球控制研究的对象，与渲染绑定，并在每一帧进行更新。
This way, you instanciate your trackball controll object, bind it with the rendering and update it at every frame.
这是对misc_controls _ *。从Three.js网站的HTML例子非常明显。
It's quite visible on the misc_controls_*.html examples from Three.js site.
希望对大家有所帮助...
Hope it'll help...
这篇关于需要three.js场景的3D对象的互动鼠标控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
