11
Canvas ba.js là hình vuông 500 x 500 bên trong trang web lớn hơn với nội dung khác và tôi cần điều khiển bằng chuột của máy ảnh (để phóng to và xoay xung quanh đối tượng) chỉ xảy ra khi chuột ở trong hình vuông 500 x 500.Chỉ cho phép điều khiển chuột của cảnh ba.js khi chuột ở trên canvas
Ngoài ra, tôi không thể cuộn trang web nhưng có thể điều đó sẽ được sửa khi chúng tôi cách ly trình xử lý sự kiện chuột với canvas 500 x 500.
đang hiện tại:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:relative;
left:100px;
top:100px;
background-color: #eeeeee;
border:1px solid black;
width:500px;
height:500px;
}
canvas {
width:500px;
height:500px;
}
</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, controls;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var width = container.clientWidth;
var height = container.clientHeight;
camera = new THREE.PerspectiveCamera(10 , width/height , .1 , 10000);
camera.position.set(0, 0, 10);
scene = new THREE.Scene();
controls = new THREE.TrackballControls(camera); // mouse control
controls.addEventListener('change', render); // mouse control
// object
var loader = new THREE.STLLoader();
loader.addEventListener('load', function (event) {
var geometry = event.content;
var material = new THREE.MeshLambertMaterial({ ambient: 0xff5533, color: 0xff5533 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
loader.load('slotted_disk.stl'); // from https://raw.github.com/mrdoob/three.js/master/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(width , height);
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 = width/height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Có hoạt động! Cảm ơn bạn! – ForumLeech
** Về cơ bản, đảm bảo dòng này: ** 'document.getElementById ("WebGL đầu ra") appendChild (renderer.domElement); ' ** xuất hiện trước dòng này:. ** ' var trackballControls = mới BA.TrackballControls (máy ảnh, renderer.domElement); ' –