0
Je veux mettre un TROIS.WebGLRenderer dans un div. Pour faire certaines choses, mouseevents devrait fonctionner. Ce que j'ai trouvé jusqu'à présent est le suivant: http://jsfiddle.net/fek9ddg5/1/Trois.js dans un div
J'ai essayé d'implémenter ce code comme suit. Mon problème: Il semble que la souris frappe la géométrie (la console affiche "hit") mais la géométrie n'est pas affichée. Quelle est ma faute?
html:
` testeur
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../bootstrap-3.3.7-dist/css/portfolio-item.css" rel="stylesheet">
<style>
.container-main {
margin-top: 75px;
}
.container-canvas {
margin: 0 auto;
width: 200px;
}
canvas {
border: 1px solid #333;
background-color: #000;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container container-main">
<div class="container-canvas">
<canvas id="mycanvas" width="200" height="200">
This is my fallback content.
</canvas>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">Related Projects</h3>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
</a>
</div>
</div>`
javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var container, camera, scene, renderer, mesh,
mouse = { x: 0, y: 0 },
objects = [],
count = 0,
CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
canvas = document.getElementById('mycanvas');
renderer = new THREE.WebGLRenderer();
renderer.domElement = canvas;
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 1000);
camera.position.y = 150;
camera.position.z = 2000;
camera.lookAt(scene.position);
mesh = new THREE.Mesh(
new THREE.BoxGeometry(200, 200, 200, 1, 1, 1),
new THREE.MeshBasicMaterial({ color : 0xff0000, wireframe: true }
));
scene.add(mesh);
objects.push(mesh);
// find intersections
var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
// mouse listener
document.addEventListener('mousedown', function(event) {
// For the following method to work correctly, set the canvas position *static*; margin > 0 and padding > 0 are OK
mouse.x = ((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width) * 2 - 1;
mouse.y = - ((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height) * 2 + 1;
// For this alternate method, set the canvas position *fixed*; set top > 0, set left > 0; padding must be 0; margin > 0 is OK
//mouse.x = ((event.clientX - container.offsetLeft)/container.clientWidth) * 2 - 1;
//mouse.y = - ((event.clientY - container.offsetTop)/container.clientHeight) * 2 + 1;
vector.set(mouse.x, mouse.y, 0.5);
vector.unproject(camera);
raycaster.set(camera.position, vector.sub(camera.position).normalize());
intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
console.log("hit");
console.log(renderer);
}
}, false);
function render() {
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
(function animate() {
requestAnimationFrame(animate);
render();
})();
</script>
Merci beaucoup pour votre aide!
A première vue, il ressemble à votre maillage est trop loin pour l'appareil photo pour la rendre. Essayez d'agrandir la propriété 'far' de votre caméra:' camera = new TROIS.PerspectiveCamera (50, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 5000); ' – guardabrazo
Merci pour votre commentaire. Je crée un violon: [link] (https://jsfiddle.net/8mszqo83/3/). Changer la valeur à 5000 ne fait aucune différence. Si vous cliquez au milieu de la toile, il y a une intersection. –
J'ai changé la position de la caméra. Vous aurez une intersection sur la majeure partie de la zone de la toile [link] https://jsfiddle.net/8mszqo83/5/ Mais pourquoi la géométrie n'est pas affichée? –