本文github位址
用three.js構建場景,有三個不可或缺的場景元素:
其中透視相機由四個必要引數控制:
// 配置引數
var height = window.innerheight
var width = window.innerwidth
var aspect = width / height
var fov = 35
var near = .1
var far = 1500
// 建立 scene
var scene = new three.scene()
// 建立 camera
var camera = new three.perspectivecamera(fov,aspect,near,far)
// 設定相機位置
camera.position.set(0, 0, 20)
// 建立 renderer
renderer = new three.webglrenderer()
// 定義了最終呈現的尺寸
renderer.setsize(width, height)
// 需要分清該尺寸與相機中的aspect的區別
// 前者就好比一部電影可以在電腦上看也可以在手機上看(這裡的尺寸是最終呈現的尺寸)
// 後者好比一部電影我用綠幕拍和實景拍都可以(這裡的尺寸指物理空間的大小)
// 新增到dom中
這時候開啟瀏覽器就是一片白什麼也沒有,
因為scene裡面什麼都沒有
光源是場景中重要的組成部分,同樣的場景使用不同的光源可以達到迥然不同的效果
以上四種是比較常用的光
// 環境光更多種類光源及其引數var ambientlight = new three.ambientlight(0xffe8d8, 0.6)
// 主光
var mainlight = new three.directionallight(0xffe8d8, .8)
mainlight.position.set(-50, 40, -40)
這時候開啟瀏覽器依舊是一片白什麼也沒有,
不要打我,因為場景裡面還沒有新增物體
不負責任地說,乙個場景中的物體其實是由兩部分組成的geometry和material
three.js中的geometry
three.js中的material
var geometry = new three.boxgeometry(1, 1, 1)
// 建立乙個邊長為1的立方體
var material = new three.meshlambertmaterial()
// 建立顏色為0x6699ff的lambert材質
var cube = new three.mesh(geometry, material)
// 將骨架與材質合成物體
scene.add(cube)
// 新增這個物體
這樣在瀏覽器中就可以看見乙個物體了
這樣乙個物體顯得單調乏味,想個辦法讓他動起來
改造一下render:
在瀏覽器中可以看見立方體轉動起來了
下一節將介紹模型中各物體如山坡,房子的構建,以及如何建立陰影
我有乙個理想世界
一 十歲那年在我放學回家的路上,乙個瘋瘋癲癲的乞丐攔住了我。不得了啦不得了啦,睇你骨骼精奇,系萬中無一的練武奇才,以後維護世界和平的重任就要靠你啦!見同你有緣,我就將我的武功心法全部傳授俾你!我當時很奇怪為什麼這乞丐不像我之前遇到的要收我十塊錢才傳我武功,不過既然是免費的,所以我就跟他練了。他教了我...
2019 我的世界多了乙個 Python
大一時學過 c語言,大三時用 c 控制微控制器,之後就沒有別的和程式設計的交集了。大約十天前下定決心學 python,不開玩笑,版本我選 3。其實我也不是 100 的零基礎,因為一方面,我學過 c 另一方面,我以前看過一些公開課,比如 mit 的 程式設計導論 bit 的 python 語言程式設計...
乙個晚上我輸了整個世界(轉貼)
老婆的最後乙個簡訊 貼 世界上沒有後悔藥 妻子是個小尾巴,我走到 她都要問到 我厭煩,她卻樂此不疲。可是,這個小尾巴卻在那個下著大雨的深夜永遠消失了 我的 心情非常難過,內心充滿了內疚和痛楚,我無法原諒自己的過錯。結婚那天,老婆用買戒指的錢給我買了一款手機。那天夜裡,我們兩人在被窩裡一遍遍地除錯著手...