내 과정 중 하나의 경우 html5 캔버스에서 3D 응용 프로그램을 프로그래밍해야합니다. 이를 위해 Three.js를 사용하기로했습니다. 지금 당장 제가하려는 것은 단순한 비행기를 렌더링하는 것입니다. 또한 마우스를 누른 상태에서 드래그하여 x 축을 따라 카메라를 움직일 수 있어야합니다. 나는 코드에서 코드를 기반으로 here을 발견했다. 그것은 기본적으로 주위를 돌고있는 비행기입니다 (또는 카메라가 어느 비행기인지는 확실하지 않습니다). 애니메이션에 대한 모든 코드를 버리고 mousedown, mousemove 등의 이벤트 코드를 추가했습니다. 페이지를로드 할 때 평면 (무생물)이 잘 렌더링되지만 마우스를 움직이면 주위를 움직여 완전히 응답하지 않습니다. 내 코드에서 일을 처리하기 위해 내가 가질 필요가없는 것들을 변경 (일부 변수를 전역으로 만들고 일부 함수 이름을 변경) 한 것을 알았지 만 그 결과는 동일하게 유지됩니다.javascript 확인 및 실행 문제 (html5 캔버스)
자바 스크립트로 작업하는 것은 이번이 처음이며 기존 코드를 변경하여 작동 할 수 없다는 것을 알았습니다. 자바 스크립트 검증을 살펴본 결과 JSLint를 발견했습니다. 메모장 + + 플러그인을 다운로드하고 내 코드를 그런 식으로 확인하려고했습니다. 그것은 html 태그를 좋아하지 않으며 특히 가져 오기 위해 노력하고있는 Three.js 라이브러리를 싫어합니다. url으로 가져 오면 가져 오지 않으며 파일을 다운로드하고 가져올 때 가져 오지 않습니다. 방금 전체 라이브러리의 코드를 파일에 복사했을 때 라이브러리 자체에 대한 많은 오류를 주었고 코드가 시작되기 전에 somehwere를 확인하는 것을 중단했습니다.
결론 : 나는 프로젝트 자체에 도움을주고 싶지만 즐거운 개발 환경을 조성하고 싶다. (수입을 무시하지 않는 적당한 검증으로).
마지막으로, 내 코드 지금까지 :
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas demo</title>
</head>
<body>
<script type="text/javascript" src="three.js">
</script>
<script type="text/javascript">
var camera;
var scene;
var plane;
var renderer;
var clickX;
var clickY;
var mousedown;
window.onload = function() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.y = -450;
camera.position.z = 400;
camera.rotation.x = 45;
//scene
scene = new THREE.Scene();
//plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshBasicMaterial({color: 0x0000ff}));
plane.overdraw = true;
scene.add(plane);
rerender();
};
window.requestAnimFrame = (function (callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/60);
};
})();
function rerender(){
//render
renderer.render(scene, camera);
//request new frame
requestAnimFrame(function(){
rerender();
});
}
$('#canvas').mousedown(function(e){
clickX = e.pageX - this.offsetLeft;
mousedown = true;
});
$('#canvas').mousemove(function(e){
if(mousedown) {
var xDiff = e.pageX - this.offsetLeft - clickX;
camera.position.x = xDiff;
rerender();
}
});
$('#canvas').mouseup(function(e){
mousedown = false;
});
$('#canvas').mouseleave(function(e){
mousedown = false;
});
</script>
</body>
</html>
http://jsfiddle.net/mplungjan/TVWYn/ – mplungjan
jsFiddle이 Three.js와 jQuery를 모두 포함하도록 수정되었습니다. http://jsfiddle.net/TVWYn/2/ - 그러나, 여전히 어떤 비행기도 보지 못했습니다. – Xenethyl
HTML에 넣은 url을 (내 질문에있는 것과 같은) 라이브러리 중 하나로 바꾸 었으며 브라우저에서와 같이 비행기를 보여줍니다. http://jsfiddle.net/TVWYn/3/ – Zypp