three.js學習(1):
阿新 • • 發佈:2018-11-17
1.three.js是:
three.js是用JavaScript編寫的WebGL第三方庫。官網(www.threejs.org)
2.three.js功能:
three.js 是一款執行在瀏覽器中的 3D 引擎,你可以用它建立各種三維場景,包括了攝影機、光影、材質等各種物件。
3.three.js用法
(1)匯入three.js;
(2)建立場景Scene及設定;
(3)建立相機Camera及設定;
(4)建立渲染器Renderer;
(5)建立模型或匯入模型,設定材質等;
(6)新增模型到場景中;
(7)設定燈光等;
(8)新增動畫等;
(9)渲染場景;
官方例項
<html> <head> <title>My First three.js app</title> <script src="js/three.js"></script> <style> body{margin:0;} canvas{width:100%;height:100%;} </style> </head> <body> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color:0x00ff00}); var cube = new THREE.Mesh(geometry,material); scene.add(cube); camera.position.z = 5; var animate = function(){ requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene,camera); }; animate(); </script> </body> </html>