First setup
- Grab three.js from three.js. You will get something like mrdoob-three.js-r60-....zip.
- Also get a version of jQuery.
Luckily we don't need the whole package from mrdoob. The docs are very helpful, but to bring our project to life we just need the build/three.min.js. jQuery isn't requiered as well, but for this tutorials, it is.
Structure
Creating an index.html our structure looks like this:
Minimum index.html
You want to see a 3D scene already, so just copy this into your index.html and you should get your scene. Even if it won't look like 3D, it is.
<html>
<html>
<head>
<script src="three/build/three.min.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
//show canvas
$("#canvas-container").html(renderer.domElement);
//cube
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//render scene
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
});
</script>
</head>
<body style="background: black">
<div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
</body>
</html>
First Scene
If WebGL is supported, we get a blue square. Actually it is a blue cube, seen from the back!
What we need
We skipped the explanation, so here it's how it works.
- A scene which contains all the objects we want to see.
- A camera so we have a view on the scene.
- A renderer who draws the scene. The render() is called periodically, so changes on the scene will be redrawn "immediately"
Camera Controls for Starters
For starters it is nice to move the camera via mouse control. There is a plugin OrbitControls.js which will do the job. I will keep the folder structure so you can find it easily in your three.js package.
To use it we need to include the OrbitControls.js and create the controls.
<script src="three/examples/js/controls/OrbitControls.js"></script>
//controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
Here the whole script:
<html>
<html>
<head>
<script src="three/build/three.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
//controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//show canvas
$("#canvas-container").html(renderer.domElement);
//cube
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//render scene
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
});
</script>
</head>
<body style="background: black">
<div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen