Rotate in 3D with JavaScript
Posted by markhwebster on February 21st, 2018 • 0 Comments
I’m taking online classes in Javascript for a few months while I’m between contracts. I learned how to animate a cube in 3 dimensions today. It uses a library called three.js. As with Jquery libraries, we plug them in (three.js) to make things easier.
I wrote these 50 lines of code that makes it work. It’s a fun lesson, but the full credit needs to go developer.mozilla.org. A lot of that stuff makes no sense to me. I gotta be honest…some of these lessons are so far above my head I wonder sometimes if I’m totally wasting my time learning this stuff. I mean these people are geniuses, probably with masters degrees in computer science. I can write their code and make the lesson work…but full understanding would only come with doing it full time.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
var scene = new THREE.Scene(); /*1. field of view in degree; 2. aspect ratio; 3. Minimum render distance; 4. Max render distance */ //takes 4 arguments 1 2 3 4 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); /*set the camera's position to be 5 distance units out of the Z axis, which, like in CSS, is out of the screen towards you, the viewer.*/ camera.position.z = 5; var renderer = new THREE.WebGLRenderer();//creates a <canvas> renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);//appends <canvas> var cube; var loader = new THREE.TextureLoader(); loader.load( 'metal003.png', function (texture) { texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(2,2); var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); cube = new THREE.Mesh(geometry, material); scene.add(cube); draw(); }//end function (texture) );//end loader.load var light = new THREE.AmbientLight('rgb(255, 255, 255)');//soft white scene.add(light); var spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); spotLight.position.set( 100, 1000, 1000 ); spotLight.castShadow = true; scene.add(spotLight); function draw(){ cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(draw);//self loop at 60fps call } |
In other news, I removed my woocomerce store and shopping cart. I had zero sales from it, and it was always worrisome that I would have a purchase while I wasn’t paying attention…which could lead to an unhappy customer. I’m thinking I might try etsy at some point as some artists are selling there.
Selling my paintings is very low on my priority list right now. I think of myself as being in college full-time. I’m hitting the books every weekday, 9 to 5. The only unusual thing is that I’m not enrolled anywhere. I’m doing self study. This stuff is all free online…no need to pay a teacher. Hmmm, that might be a contributing factor to why I’m not working this quarter as a teacher. Go figure.