Home/ Questions/Q 7923997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T17:30:51+00:00

For one of my courses I need to program a 3D application in html5

  • 0

For one of my courses I need to program a 3D application in html5 canvas. For this I chose to use Three.js. For now, all I’m trying to do is render a simple plane. I also want to be able to move the camera along the x-axis by holding down the mouse and dragging. I based my code on the code found here. It’s basically a plane which is spinning around (or the camera is circling around the plane, not sure which). I threw away all the code for the animation and added code for mousedown, mousemove, etc events. When I load the page it renders the plane (inanimate) just fine, but when I try to use my mouse to move it around it remains completely unresponsive. In my code you may have noticed I changed some things I maybe shouldn’t have (made some variables global and changed some function names) in order to get things working, but the result remained the same.

This is the first time I’m working with javascript and I realize I can’t just change existing code and expect it to work. I looked into javascript verification and I found JSLint. I downloaded the plugin for notepad++ and tried to verify my code that way. It doesn’t like the html tags and it especially hates the Three.js library I’m trying to import. It doesn’t pick up on it when I import it as url and it doesn’t import it when I download it and import the file either. When I just copied the code of the entire library into the file it just gave me a lot of errors about the library itself and stopped verifying somehwere before my code even started.

In conclusion: I would like some help with the project itself but also with setting up a pleasant development environment (with proper verification that doesn’t ignore imports).

Finally, my code so far:

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have various issues here that are preventing your code from running properly. I’ve gone through and fixed them, and you can now move the camera along the x-axis:

    http://jsfiddle.net/TVWYn/6/

    Your issues were:

    1. You’re using jQuery and not including the jQuery library. The dollar
      sign function is not part of JavaScript, it’s (in this case) part of
      a third-party library called jQuery that makes working with the DOM
      easier. Without including the jQuery library, your mouse handlers
      couldn’t run.

    2. Even with jQuery included, the order in which your setup functions
      executed was incorrect. Originally you had your Three.js setup
      process such that it would execute once the DOM was initialized.
      That’s good. However, you were trying to register mouse event
      handlers immediately after the JS was acquired by the browser. This
      is not good. You’re asking JS to attach mouse event handlers to DOM elements that don’t exist at that point in time. To fix this,
      you need to ensure that the DOM has been initialized (ex. running your setup inside a window.onload) and your
      required elements have already been inserted (in this case,
      #canvas). Or, attach your event handlers to the DOM objects directly (ex. renderer.domElement).

    3. You were referencing #canvas without ever setting the id of your
      canvas element.

    With regard to setting up a proper development environment, I would strongly suggest that you start using Chrome and its developer tools (which are launched via ctrl+shift+j).

    • 0