Three.js 學習之路（一）

時間 2019-11-18

標籤 three.js 學習之路欄目 JavaScript 简体版

原文原文鏈接

1.一個友好的編輯器能夠提升工做效率，webstrom,vscode是開發three.js的不錯選擇。css

2.快速學習Three.js，能夠從官網https://threejs.org/ 下載源碼，查閱經常使用API，關注threejs分享案例。中文手冊http://techbrood.com/threejs/docs/html

3.快速構建一個通用的Three.js框架：web

　　首先引入下載的three.js源文件到咱們的項目中,接着建立必須的三個對象canvas

（1）.scence ：存放全部3d場景中的對象，可經過scence.children快速拿到全部場景對象的信息（基於對象命名的索引，So命名規範極其重要）；app

（2）.camera：攝像機包括透視攝像機（正交攝像機，立方體攝像機）；框架

　　　　屏幕中心爲世界三維座標系原點，屏幕向外爲Z，屏幕右方爲X，屏幕上方爲Y
（3）.renderer:渲染器包括webgl和canvas，canvas是2d渲染的回退。經過渲染器把攝像機視口渲染到咱們的網頁中;dom

　　如今咱們須要添加一個簡單的3d模型，光源和一個render（）實時渲染函數，一個3D Web Demo就能夠完美運行了。編輯器

示例:函數

<!DOCTYPE html>

<html>

<head>

<title>My first three.js 框架</title>

body {

margin: 0px;

border: none;

cursor: pointer;

width: 100%;

height: 100vh;/* //800px */

overflow: hidden;

}

</style>

var renderer,scene,camera,cube;

function Init(){

scene= new THREE.Scene();

renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);//可自定義畫布大小

renderer.setClearColor(0x000000, 1.0);//設置畫布背景色

document.body.appendChild(renderer.domElement);//畫布

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);//透視相機

camera.position.set(0,4,10);

camera.up = { x: 0, y: 1, z: 0 };//自身up向量的朝向

camera.lookAt({ x: 0, y: 0, z: 0 });//聚焦

var pointlight = new THREE.PointLight(0xffffff);

pointlight.position.set(0, 0, 0);

scene.add(pointlight);

var cubegeometry = new THREE.BoxGeometry(1, 1, 1);//保存頂點數據

var cubematerial = new THREE.MeshBasicMaterial({color:0x00ff00});//材質對象

cube = new THREE.Mesh(cubegeometry, cubematerial);//網格對象

cube.rotation.x = 1.57;

scene.add(cube);

}

function update() {

cube.rotation.y += 0.05;//弧度自身旋轉但自身軸向不變

renderer.render(scene, camera);//每一幀的渲染

requestAnimationFrame(update);//下一幀執行一次參數中的函數

}

function start(){

Init();

update();

}

</script>

</head>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。