原创 three.js cannon.js物理引擎之製作擁有物理特性的汽車

今天郭先生說一說使用cannon.js的車輛輔助類讓我們的汽車模型擁有物理特性。效果圖如下,在線案例請點擊博客原文。 下面我們說一下今天要使用的兩個類,並簡單的看看他們的物理意義 1. RaycastVehicle類 這是車輛輔助類,將光

原创 three.js cannon.js物理引擎之Heightfield

今天郭先生說一說cannon.js物理引擎之Heightfield高度場,學過場論的朋友都知道物理學中把某個物理量在空間的一個區域內的分佈稱爲場,高度場就是與高度相關的場,而cannon.js物理引擎的Heightfield的高度就是關於兩

原创 three.js cannon.js物理引擎地形生成器和使用指針鎖定控件

今天郭先生說一說使用cannon.js物理引擎繪製地形和使用指針鎖定控件。效果如下圖。線案例請點擊博客原文。 這裏面的生成地形的插件和指針鎖定控件也是cannon.js的作者schteppe封裝的,當然也可以自己寫一個這樣的小插件。好的我

原创 three.js cannon.js物理引擎之約束

今天郭先生繼續說cannon.js,主演內容就是點對點約束和2D座標轉3D座標。仍然以一個案例爲例,場景由一個地面、若干網格組成的約束體和一些擁有初速度的球體組成,如下圖。線案例請點擊博客原文。 下面來說說如何使用約束來完成一個這樣的物理

原创 three.js 之cannon.js物理引擎

今天郭先生說的是一個物理引擎,它十分小巧並且操作簡單,沒錯他就是cannon.js。這些優點都源自於他是基於js編寫的,對於js使用者來說cannon.js擁有其他物理引擎沒有的純粹性。從學習成本來看,cannon.js的學習成本比較低,對

原创 three.js 中使用多線程以及性能測試

今天郭先生說一下WebWorker以及WebWorker在three.js中的應用。我們都知道Javascript是單線程的,比如執行js代碼的同時UI渲染就會停止,對於多核CPU的點腦,這一點讓人難以接受,好在Web Worker的出現多

原创 three.js 顯示中文字體 和 tween應用

今天郭先生說一下如何在three中顯示中文字體,然後結合tween實現文字位置的動畫。線案例請點擊博客原文。 1. 生成中文字體 我們都使用過three.js的FontLoader加載typeface.json實現font的使用,但是很多案

原创 three.js WebGLRenderTarget

今天郭先生說一說WebGLRenderTarget,它是一個緩衝,就是在這個緩衝中,視頻卡爲正在後臺渲染的場景繪製像素。 它用於不同的效果,例如把它做爲貼圖使用或者圖像後期處理。線案例請點擊博客原文。 話不多說,下來看看他的屬性了方法。

原创 製作3D小汽車遊戲(下)

書接上回,這一節我們分模塊說一說怎麼寫一個這樣的遊戲 1. 初始化場景、相機和渲染器 這幾乎是繪製three必須做的事情,我們有兩套場景和相機,一個是主場景和相機,另一個是小地圖的場景和相機(用來俯視建築和小汽車),渲染器設置一級曝光,輸出

原创 製作3D小汽車遊戲(上)

之前一段時間家裏和公司的事太多,一直沒有時間寫博客,最近騰出一段時間,看了一遍官方的examples,收穫頗多,想整理一點東西出來,又苦於沒有好的東西,three寫點東西真是太難了。好吧,今天郭先生就寫一個小汽車的3D遊戲,如下圖 這個遊

原创 three.js 製作邏輯轉體遊戲(下)

上一篇已經對繞非定軸轉動有所瞭解,這篇郭先生繼續說一說邏輯轉體遊戲的製作,這部分我們同樣會遇到一些小問題,首先是根據數據渲染陷阱和目標區域,然後是對可以轉動的判定,最後是獲勝的判定。 1. 根據數據渲染陷阱和目標區域 首先我們P一張底圖和陷

原创 three.js 製作邏輯轉體遊戲(上)

今天郭先生又出來製作遊戲了,最近有小夥伴要做一個邏輯轉體小遊戲,我怎麼能不先來試試呢。玩法可以看上面的連接,下面附幾張圖。線案例請點擊博客原文。   遊戲規則不懂得可以看自行百度哈,其實玩起來還挺有難度的。關於這個問題,對於新手來說,主

原创 three.js 利用uv和ThreeBSP製作一個快遞櫃

最近有three網友,問我要不要學習blender,其實我感覺學習一下也無妨,不過花大量時間精通,尚可不必,術業有專攻給別人留一條路吧,哈哈。那我我們就是用ThreeBSP和uv貼圖的知識來製作一個定製化的快遞櫃,先上圖,在線案例請點擊博客

原创 three.js UV映射簡述

今天郭先生來說一說uv映射,什麼是uv映射?uv映射就是將二維的貼圖映射到對象的一個面(或者多個面)上。說到這個問題,我們就不得不瞭解一下Geometry的點、面和uv的結構。我們以BoxGeometry爲例。 new THREE.Box

原创 three.js 着色器材質內置變量

這篇郭先生說一下three.js着色器的內置變量,分別是 gl_PointSize:在點渲染模式中,控制方形點區域渲染像素大小(注意這裏是像素大小,而不是three.js單位,因此在移動相機是,所看到該點在屏幕中的大小不變) gl_Pos