我正在尝试添加已加载的.STL 3D对象的交互式鼠标控件。我的困难是集成鼠标控制代码，而不是查找示例或显示对象。以下是我正在使用的工具。我的偏好是通过鼠标事件来控制相机的位置(而不是抓住对象上的定义点)，以使我看起来像是用鼠标旋转对象并使用滚轮放大和缩小。
<!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>
最佳答案
这是<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>行，可让您访问轨迹球控件。
但是您必须通过添加以下行来激活它:
var controls; controls = new THREE.TrackballControls( camera );
controls.addEventListener( 'change', render ); controls.update(); 这样，您可以实例化轨迹球控件对象，将其与渲染绑定并在每一帧进行更新。
在Three.js网站的misc_controls _ *。html示例中非常明显。
希望对您有帮助...
关于3d - 需要在three.js场景中对3D对象进行交互式鼠标控制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13585636/