Bir küre oluşturdum ve bir bağlantı kümem var. Kürenin konumunu değiştirmek veya herhangi bir linke tıklayarak küre döndürmek istiyorum. Çok fazla aramaya çalıştım ama buna benzer bir örnek bulamıyorum.Üç.js'deki bağlantıya tıklayarak küre döndürün
Sadece bir HTML öğesi oluşturma ve bir JS işlevini "onclick" etkinliğiyle ilişkilendirmek meselesi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotate Mesh On Button Clicked</title>
</head>
<body>
<button onclick="myFunction()">Rotate</button>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="scene.js"></script>
</body>
</html>
JavaScript'i
HTML
var container, camera, scene, renderer;
var geometry, material, mesh;
var cameraControls;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xdbdbdb);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(3, 0.5, 40);
scene.add(camera);
// controls
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
// lights
scene.add(new THREE.AmbientLight(0x222222));
var light = new THREE.PointLight(0xffffff, 0.8);
camera.add(light);
// objects
geometry = new THREE.CylinderGeometry(5, 5, 5, 5);
material = new THREE.MeshPhongMaterial( {color: 0x00aafa});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
window.addEventListener('resize', onWindowResize, false);
}
function myFunction() {
mesh.rotateX(90);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
cameraControls.update();
}
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
Farklı: Burada temel bir sahnede çabuk uygulama bir düğmeyi kullanarak, var (siz istediğiniz gibi bir bağlantı veya değiştirebilirsiniz) Düğmeye tıklandığında, Mesh'i 90 derece döndüren oldukça basit olan "myFunction" işlevini görürsünüz.
Kolay ipucu. Kullanıcılar için kod yazmak iyi bir fikir değildir - özellikle bir ödev ise. Önce ne denediklerini göstermeliler. O zaman onlara yardım et. – WestLangley
Elbette, temel bir sahne kurulumunu hazırladım, böylece daha iyi bir genel bakış sunmak için her şeyi yayınlamayı düşündüm. – leota