three.js 用中文字作為貼圖
閒來無事，把three.js其中有一個例子改了一下，變成從一箇中心點噴射出中文字的例子，
效果圖：
下面直接貼程式碼好了
html:
<html lang="en">
<head>
<title>three.js canvas - text - sprites</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" css只是表現層讓他看起來稍微好看一點，所以不算是最重要的，除此之外寫了一小部分便於在手機上瀏覽響應式css
css:
@media var container, stats;
//首先最開始要生宣告變數
var camera, scene, renderer, particle;
var mouseX = 0, mouseY = 0;
var text = "彈幕";
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
//初始化函式
init();
//動畫函式 遞迴的方式呼叫
animate();
//初始化
function init() {
// 初始化canvas元素
container = document.createElement( 'div' );
document.body.appendChild( container );
//建立相機
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 1000;
//建立場景
scene = new THREE.Scene();
var color = "red";
var material = new THREE.SpriteMaterial( {
map: new THREE.CanvasTexture( generateSprite(text,color) ),
blending: THREE.AdditiveBlending
} );
//生成100個並且每隔100ms出現一個
for ( var i = 0; i < 100; i++ ) {
particle = new THREE.Sprite( material );
initParticle( particle, i * 100 );
scene.add( particle );
}
//使用的渲染器是THREE的2Dcanvas渲染器而非webgl
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0x000040 );//設定清屏的顏色一般來說是背景的顏色這裡設定了深藍色
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//用於展現幀數等資料資訊
stats = new Stats();
container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
//當網頁視窗發生變化時改變canvas渲染部分的大小的函式
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//這個才是建立單個字元片段的函式
function generateSprite(text,style) {
var canvas = document.createElement( 'canvas' );
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext( '2d' );
context.beginPath();
context.font='50px Microsoft YaHei';
context.fillStyle = style;
context.fillText(text,0,50);
context.fill();
context.stroke();
return canvas;
}
//將例子中建立一個類似於星星的圓點的畫布的函式換了名字
function generateTextSprite() {
//建立canvas畫布
var canvas = document.createElement( 'canvas' );
canvas.width = 16;
canvas.height = 16;
//繪製
var context = canvas.getContext( '2d' );
//生成漸變圓點
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
return canvas;
}
function initParticle( particle, delay ) {
var particle = this instanceof THREE.Sprite ? this : particle;
var delay = delay !== undefined ? delay : 0;
particle.position.set( -500, 0, 0 );
particle.scale.x = particle.scale.y = 300 /*Math.random() * 32 + 16*/;
//用了線性函式外掛
new TWEEN.Tween( particle )
.delay( delay )
.to( {}, 10000 )
.onComplete( initParticle )/*這是一個遞迴 用於持續產生 間隔10s鍾*/
.start();
new TWEEN.Tween( particle.position )
.delay( delay )
.to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1500 - 750, z: Math.random() * 4000 - 2000 }, 10000 )
.start();
new TWEEN.Tween( particle.scale )
.delay( delay )
.to( { x: 0.03, y: 0.03 }, 10000 )
.start();
}
//
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
//event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
//event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
TWEEN.update();
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
function changeText(t){
if ( t != ''){
text = t;
}
console.log("nyan");
return text;
}
function changeTextAndShow(text,color){
//確定材料
//檢測在場景中是否過多材料
if(scene.children.length>2000){return;};
var material = new THREE.SpriteMaterial( {
map: new THREE.CanvasTexture( generateSprite(text,color) ),
blending: THREE.AdditiveBlending
} );
//生成 並且加入到渲染環境中
for ( var i = 0; i < 10; i++ ) {
particle = new THREE.Sprite( material );
initParticle( particle, i * 10 );
scene.add( particle );
}
console.log("nyan");
}
function sendText(){
var texts = document.getElementById("danmuInput").value;
if(texts == '')return;
var color = getRandomColor();
changeTextAndShow(texts,color);
console.log("nyannnnn");
}
function getRandomColor(){
var color = "rgba(" + Math.floor(Math.random() * 155 + 100 ) + "," +
Math.floor(Math.random() * 155 + 100) + "," +
Math.floor(Math.random() * 155 +100) + "," +
(Math.random() * 0.5 + 0.5) + ")";
return color;
}
//個人惡趣味
setTimeout('changeTextAndShow("驚嚇","yellow")',2000);
setTimeout('changeTextAndShow("nyancat","blue")',3000);
setTimeout('changeTextAndShow("QwQ","rgba(233,155,233,0.6)")',4000);
changeTextAndShow("驚嚇","green");
function clearAll(){
scene.children.splice(0,scene.children.length);
}
//個人惡趣味 清空之後如果螢幕內沒有彈幕則會過11秒加入10個彈幕，鑑於迴圈週期是10秒所以110秒之後有會有10秒的迴圈
function showTextWhenNoTextHere(){
if(scene.children.length>100){return;}
else{
console.log("show more");
相關推薦
three.js 用中文字作為貼圖
閒來無事，把three.js其中有一個例子改了一下，變成從一箇中心點噴射出中文字的例子，
效果圖：
下面直接貼程式碼好了
html:
<html lang="en">
<head>
<title>three.js ca
three.js--如何給一個場景貼圖
var skyBoxGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 );
var texture = new THREE.TextureLoader().load("images/sky.jpg");
67 - three.js 筆記 - 使用 bumpMap 凹凸貼圖建立皺紋
凹凸貼圖用於為材質增加厚度，在三維環境中使表面產生凹凸不平的視覺效果。 它主要的原理是通過改變表面光照的法線。凹凸貼圖是一種灰度影象素的密集程度定義的是凹凸的程度。凹凸貼圖只包含畫素的相對高度，不包含傾斜方向的資訊，凹凸貼圖不會改變物體的形狀。
1、示例
示例 http://it
three.js用THREE.CubeCamera和環境貼圖建立反光效果
在在文章：three.js貼圖之CubeTextureLoader全景貼圖中已經講過全景貼圖的應用，本文將進一步擴充套件全景貼圖的功能，結合THREE.CubeCamera功能，創建出一個具有反光效果的場景，首先來看看看看THREE.CubeCamera的用法：
let c
MFC中靜態文字框貼圖處理
1.靜態文字控制元件貼png圖片
在建立控制元件時新增SS_BITMAP屬性SS_NOTIFY
CImage m_Icon.Load(wstring(L"tupian.png").c_str());
RECT rect;
HDC pDC =
Unity中的法線貼圖、漫反射及高光
我們都知道，一個三維場景的畫面的好壞，百分之四十取決於模型，百分之六十取決於貼圖，可見貼圖在畫面中所佔的重要性。在這裡我將列舉一些貼圖，並且初步闡述其概念，理解原理的基礎上製作貼圖，也就順手多了。
我在這裡主要列舉幾種UNITY3D中常用的貼圖，與大家分享，希望對大家有幫助。
OpenGL中顯示背景貼圖
轉載請宣告出處:http://blog.csdn.net/xiaoge132/article/details/51448326
導言:
通常在OpenGL裡面繪製的都是預設的黑色背景,對於有些時候,
讓我們來匯出unity3d中的mainTexture貼圖轉換儲存為png
有這麼一個需求，我們知道unity3d的模型一般用fbx格式進行匯入的。
但fbx裡面所引用的貼圖檔案格式那就是很多，比如TGA，DDS，BMP，等等，各式各樣。
我的想法很簡單，就是把這些貼圖匯出成PNG就行了。
大家覺得會說，你用其它軟體進行批量轉換不就好了？這個可以有
GLSL入門2 關於GLSL中的紋理貼圖
我將註解以及原始碼直接放到這裡了
// GLSL01.cpp : 定義控制檯應用程式的入口點。
//
#include "stdafx.h"
#include <iostream>
#include <fstream>
#include <G
cocos creator 粒子特效中，使貼圖不改變顏色
cocos creator 粒子特效之貼圖不變色
直接貼圖，
start color
start color 變化範圍
End color
結束顏色的變化範圍
貼圖
Unity Shader 在Shader中使用法線貼圖
首先我們在Unity中建立一個小球
然後通過"Create->Shader->Standard Surface Shader"建立一個表面著色器，並修改名字為Diffuse Bump
然後通過"Create->Material"建立一個材質,並修改名字為
用BitBlt實現透明貼圖
把透明貼圖的原理記下來！ 實驗素材：有兩張點陣圖：bk.bmp是背景點陣圖，football.bmp包含透明區域，透明色為藍色RGB(0,0,0xff)
實驗目的：以bk.bmp為背景，將football.bmp繪製到背景中，形成如下的最終效果圖。
1.透明點陣圖繪製原理
假設football.bmp -&
使用FreeImage在OpenGL中生成影象貼圖的方法
這是之前做本科畢設時碰到的問題，拖到現在才有時間整理，沒想到一轉眼已經在研究生實驗室了，時間飛逝啊~
言歸正傳，當時我需要在OpenGL中重繪FBX格式的三維模型，由於不同美工人員給人物模型貼的圖可能是不同格式的，因此需要解析不同格式的貼圖，然後將該貼圖的長、
three.js 帶更新文字的旋轉地球
檢視旋轉地球效果
主要用到幾個知識點
（1）顯示文字是使用了three.js 的精靈（Sprite），精靈的文字方向始終面向相
如何在 Creator3D 中切換模型貼圖，超級簡單！
效果預覽
前兩天有夥伴在 QQ 上詢問，如何在 Creator 3D 中切換模型貼圖。Shawn 之前也沒嘗試過，不過根據之前 Cocos Creator 的經驗以及這幾天對 Creator 3D 的學習，簡單嘗試了一下，方法可行，在此將它分享給大家。
模型材質資源
在 Creator 3D 中，一個 3
three.js 多面幾何體進行多面貼圖 (貼圖後需要再次渲染才能顯現出來）
let materials = [];
for (var i = 0; i < 6; ++i) {
materials.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('../
70 - three.js 筆記 - 使用環境貼圖 建立虛假的反光效果
計算環境反光會非常耗費CPU，而且通常會使用光線追蹤演算法，在three.js中通過環境貼圖envMap來偽裝反光，並且可以將環境貼圖用到指定的物件上。
1、示例
示例 http://ithanmang.com/threeJs/home/201809/20180905/07-env
69 - three.js 筆記 - 使用光照貼圖 lightMap 建立假陰影
Material的lightMap屬性，是光照貼圖，使用光照貼圖可以模擬出真實的陰影效果，但是陰影的位置不能隨著隨著物體的移動而移動。
1、示例
示例 http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-tex
75 - three.js 筆記 - 用 VideoTexture 視訊輸出作為紋理
1、示例
示例 http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html 效果
2、實現步驟
2.1、新增 video 標籤
<video id="video" autopla
73 - three.js 筆記 - 設定折射貼圖比率 refractionRatio 加環境貼圖實現反射效果
通過給物體設定環境貼圖envMap可以實現虛假的反射效果，通過設定CubeCamera可以實現動態的反光，設定材質的refractionRatio 屬性可以實現透明反射的效果。
1、示例
示例 http://ithanmang.com/threeJs/home/201809/201