threejs 繪製第乙個3維場景

2021-09-10 02:04:00 字數 1603 閱讀 8893

threejs 文件 

//建立場景物件

var scene = new three.scene();

//建立乙個立方體幾何物件

var box = new three.boxgeometry(100, 100, 100);

//材質物件

var material = new three.meshlambertmaterial();

//網格模型物件

var mesh = new three.mesh(box, material);

//網格模型新增到場景中

scene.add(mesh);

//建立乙個球體幾何物件

var sphere = new three.spheregeometry(40, 40, 40);

//材質物件

var spherematerial = new three.meshphongmaterial();

//網格模型物件

var spheremesh = new three.mesh(sphere, spherematerial);

spheremesh.translatex(100);

scene.add(spheremesh);

//點光源

var point = new three.pointlight(0xffffff);

//點光源位置

point.position.set(400, 200, 300);

//點光源新增到場景中

scene.add(point);

//環境光

var ambient=new three.ambientlight(0x444444);

scene.add(ambient);

var width = window.innerwidth;

var height = window.innerheight;

//視窗寬高比

var k = width / height;

//三維場景縮放係數

var s = 150;

//建立相機物件

var camera = new three.orthographiccamera(-s * k, s * k, s, -s, 1, 1000);

//設定相機位置

camera.position.set(200, 300, 200);

//設定相機方向(指向的場景物件)

camera.lookat(scene.position);

// 建立渲染器物件

var renderer = new three.webglrenderer();

renderer.setsize(width, height);

//設定背景顏色

renderer.setclearcolor(0xb9d3ff, 1);

console.log(renderer.domelement);

//執行渲染操作

camera);

let t0 = new date(); //上次時間

function render()

render();

ThreeJs 建立第乙個案例

1 場景sence 2 網格模型mesh 幾何體 geometry 幾何體材質 material 3 光源 點光源 point 需調位置 環境光源 ambient 4 相機camera 需調相機的位置以及攝像頭的朝向位置 5 渲染器render 6 掛載 將渲染器生成的canvas物件掛載到dom上...

3 第乙個Python程式

無論讀者使用的是哪種作業系統,相信都已經安裝好了 python 環境,可以通過命令列視窗或者 python 自帶的 idle 成功啟動互動式直譯器 如圖 1 所示 圖 1 啟動 python 互動式直譯器 本節將帶領讀者正式編寫第乙個 python 輸出 hello world 在圖 1 中的提示符...

3 第乙個python程式

學習任何一門語言的第一步,首先要寫個 hello world 這算是程式設計師的乙個傳統。但在寫之前,還有注意幾個問題。首先,python是一門指令碼語言,而指令碼語言的特點就是 我們寫的 會先由直譯器進行編譯以後,再去執行。但是當我們的程式執行在作業系統之上時,系統並沒有那麼智慧型,能夠自動識別出...