Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

KIPKIPS/WebGLThree.js

Repository files navigation

Xie De Wang Zhan Bo Ke Lian Jie

Yi .An Zhuang three.js

1.npm `npm install three@0.106.2` vscode
2.Xia Zai three.jsWen Jian Tuo Ru Xiang Mu
3.Zai Xu Yao Ding Yi threeDui Xiang De jsWen Jian Tou Xie Ru import * as THREE from '../js/three.module.js';Lu Jing Wei Zi Ji De three.module.jsWen Jian De Lu Jing ,Zhe Yang Jiu Ke Yi Zi Dong Ti Shi three.jsZhong De Han Shu He Fang Fa

Er .Ji Ben Zu Jian

1.Chang Jing var scene = new THREE.Scene()
2.Xiang Ji
(1)Zheng Jiao Xiang Ji He Tou Shi Xiang Ji (Jin Da Yuan Xiao )
(2)Xiang Ji De Shu Xing
<1>fov(field of view),Ke Shi Jiao
<2>Jin Qie Mian ,Yuan Qie Mian ,Xiang Ji Shi Zhui Ti De Yuan Jin Xian Zhi Fan Wei
<3>aspect,Kuan Gao Bi ,Xiang Ji Qie Mian De Kuan Gao Bi Li w/h
Shi Li :
//Ding Yi Yi Ge Xiang Ji
var scene=new THREE.Scene();//Chang Jing
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,20);//Tou Shi Tou Ying Xiang Ji
//Tou Shi Xiang Ji ,Can Shu Han Yi (Ke Shi Jiao Du ,Kuan Gao Bi ,Jin Qie Mian ,Yuan Qie Mian )
//fov Ke Shi Jiao Du field of view
//Zheng Jiao Tou Ying Xiang Ji
var camera = new THREE.OrthographicCamera(
-window.innerWidth /2,
window.innerWidth / 2,
window.innerHeight / 2,
-window.innerHeight /2, 10, 1000
);
//Zheng Jiao Xiang Ji ,Can Shu Han Yi (Zuo Bian Jie ,You Bian Jie ,Shang Bian Jie ,Xia Bian Jie ,Jin Qie Mian ,Yuan Qie Mian )
3.Xuan Ran Qi Zhu Yao Zuo Yong Shi Jiang Chang Jing Xian Shi Dao Ping Mu Shang Gou Zao Fang Fa var render= new THREE.WebGLRenderer();
4.Ji He Ti (Wang Ge Mo Xing ) Ji He Ti Shi Bao Wei Bi Yao San Wei Shu Ju De Shu Ju Jie Gou
Shu Xing Bao Han Ding Dian Shu Zu this.vertices,Yan Se Xin Xi this.color,Pian Mian Shu Ju this.faces
(1)Xian Duan
//Sheng Ming He Fu Zhi
//1.Xian Duan
var geometry=new THREE.Geometry();
//geometry.vertices=[],Shi Yi Ge Shu Zu ,Zhi Wei Ding Dian Shu Ju
geometry.vertices.push(
new THREE.Vector3(5,5,0),
new THREE.Vector3(-5,5,0),
)
var color1 = new THREE.Color(154/255,1,1,1),color2 = new THREE.Color(0xFF0000);//Sheng Ming Yan Se Xin Xi
geometry.colors.push(color1, color2);//Wei Ding Dian She Zhi Yan Se
//Shi Yong Ding Yi Hao De Ding Dian Zuo Biao ,Cai Zhi Xin Xi Lai Gou Zao Ji He Ti
var line = new THREE.Line(geometry, material, THREE.LineSegments);
scene.add(line);//Jiang Mo Xing Tian Jia Dao Chang Jing Zhong
(2)Yin Qing Ti Gong De Ji He Ti
//Sheng Ming He Fu Zhi
//Yuan Zhu Ti Can Shu Lie Biao ,Shang Ping Mian Ban Jing ,Xia Ping Mian Ban Jing ,Gao Du ,Yuan Bei Hua Fen De Ci Shu ,Yue Da Yue Jie Jin Yuan
var geometry = new THREE.CylinderGeometry(100, 150, 400);
var material = new THREE.MeshLambertMaterial({ color: 0xFFFF00 });
var mesh=new THREE.Mesh(geometry,material)
mesh.position=new THREE.Vector3(0,0,0);

San .Ju Zhen

TODO:Ping Yi Ju Zhen Biao Shi Yi Ge Ding Dian Zuo Biao Yan Zhao X Y ZZhou Fen Bie Ping Yi Tx Ty Tz
| 1 0 0 Tx |
| 0 1 0 Ty |
| 0 0 1 Tz |
| 0 0 0 1 |
Yi Ge Dian De Zuo Biao Shi (x,y,z),Jia She Yan Zhao X Y ZZhou Fen Bie Ping Yi Tx Ty Tz Ping Yi Hou De Zuo Biao Shi (x+Tx,y+Ty,z+Tz)
Ju Zhen He Biao Shi Ding Dian Zuo Biao De Xiang Liang Jin Xing Cheng Fa Yun Suan
| 1 0 0 Tx | | x | | x+Tx |
| 0 1 0 Ty | x | y | = | y+Ty |
| 0 0 1 Tz | | z | | z+Tz |
| 0 0 0 1 | | 1 | | 1 |
TODO:Suo Fang Ju Zhen
Yi Ge Ji He Ti De Suo You Ding Dian Zuo Biao Yan Zhao X Y ZZhou Fen Bie Suo Fang Ju Zhen Sx Sy SzBei
Ding Dian Zuo Biao Suo Fang Bian Huan
| Sx 0 0 0 | | x | | x*Sx |
| 0 Sy 0 0 | x | y | = | y*Sy |
| 0 0 Sz 0 | | z | | z*Sz |
| 0 0 0 1 | | 1 | | 1 |
TODO:Xuan Zhuan Ju Zhen
XZhou Rao XZhou Xuan Zhuan aDu Dui Ying De Xuan Zhuan Ju Zhen Rx
| 1 0 0 0 | | x | | x |
| 0 cosa -sina 0 | x | y | = | cosa*y-sina*z |
| 0 sina cosa 0 | | z | | sina*y+cosa*z |
| 0 0 0 1 | | 1 | | 1 |
YZhou Rao YZhou Xuan Zhuan aDu Dui Ying De Xuan Zhuan Ju Zhen Ry
| cosa 0 -sina 0 | | x | | cosa*x+sina*z |
| 0 1 0 0 | x | y | = | y |
| sina 0 cosa 0 | | z | | -sina*x+cosa*z |
| 0 0 0 1 | | 1 | | 1 |
ZZhou Rao ZZhou Xuan Zhuan aDu Dui Ying De Xuan Zhuan Ju Zhen Rz
| cosa -sina 0 0 | | x | | cosa*x-sina*y |
| sina cosa 0 0 | x | y | | sina*x+cosa*y |
| 0 0 1 0 | | z | | z |
| 0 0 0 1 | | 1 | | 1 |
jsFeng Zhuang De Ju Zhen De Yi Xie Fang Fa
Rao xZhou Xuan Zhuan .makeRotationX(theta)
Rao yZhou Xuan Zhuan .makeRotationY(theta)
Rao zZhou Xuan Zhuan .makeRotationZ(theta)
Suo Fang .makeScale(Sx,Sy,Sz)
Ping Yi .makeTranslation(Tx,Ty,Tz)
Jian Qie .makeShear

Si .Tween.jsDong Hua Ku

1.An Zhuang Fang Fa :
(1)vscodeZhong Duan Kong Zhi Tai Yun Xing npm i @tweenjs/tween.js@^18
(2)htmlYin Ru node_modules/@tweenjs/tween.js/dist/tween.umd.js
Xiang Xi An Li Jian demo_3.js
2.Shi Yong new TWEEN.Tween(objs.rotation).to({y:360,z:360},10000).repeat(In finity).start();Lai Ding Yi Yi Ge Dong Hua
objsWei Xu Yao Cao Zuo De Shu Xing ,to(Shu Xing Zhuang Tai De Zui Zhong Zhi ),10000Wei Dong Hua Suo Xu Shi Jian ,InfinityWei Yi Zhi Bo Fang ,Ke Tian Ru Zheng Zheng Shu Biao Shi Dong Hua
Zhi Xing Ci Shu
3.Zai Dong Hua Geng Xin Han Shu Zhong Diao Yong TWEEN.update()

Wu .DAT.GUIGong Ju

1.vscodeZhong Duan Kong Zhi Tai Yun Xing npm install --save dat.gui
2.HTMLJie Mian Yin Ru Jiao Ben dat.gui/build/dat.gui.min.js
3.Shi Yong Fang Fa
var param;//Shi Yong paramLai Kong Zhi Xiang Ji De Shi Jiao Da Xiao
function CreateGUI(){
var paramObj=function(){
this.fov=45;
}
param=new paramObj();
var gui=new dat.GUI;
gui.add(param,"fov",0,180).name("Shi Jiao Da Xiao ");
}
//Zai Chu Shi Hua De Shi Hou Diao Yong CreateGUI();Han Shu Lai Chuang Jian Yi Ge GUI
//Zai Dong Hua Han Shu Zhong Diao Yong ChangeFov();Han Shu Lai Gai Bian Xiang Ji De Shi Jiao
//ChangeFovHan Shu ,Jiang paramDe Zhi Fu Gei cameraDe fov(Shi Jiao )Can Shu ,Ran Hou Geng Xin Xiang Ji De Ju Zhen
function ChangeFov(){
camera.fov=param.fov;
camera.updateProjectionMatrix();
}

Liu .Xing Neng Jian Ce Gong Ju staus.jsDe Shi Yong

1.Zai vscodeZhong Duan Kong Zhi Tai Shi Yong npm install stats.jsAn Zhuang Cha Jian
2.Yin Ru node_modules/stats.js/build/stats.min.jsWen Jian
3.Chu Shi Hua
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.right = "0px";
document.getElementById("canvas-frame").appendChild(stats.domElement);
4.Jian Ce Xing Neng ,Zai Jian Ce Dai Ma De Qian Hou Jia Shang stats.begin();He stats.end();Liang Ge Fang Fa //Xiang Xi Shi Yong Jian demo_3.js

Qi .Guang Yuan

1.Qi Chu Shen Chuang Zao Tian Di
Di Shi Kong Xu Hun Dun ,Yuan Mian Hei An ,Shen De Ling Yun Xing Zai Shui Mian Shang
Shen Shuo ,Yao You Guang ,Yu Shi Jiu You Liao Guang ,Bu Hao Yi Si Pao Ti Liao ......
2.THREE.jsTi Gong De Ji Zhong Guang Yuan :
THREE.AmbientLight(Huan Jing Guang )
THREE.AreaLight(Qu Yu Guang )
THREE..DirectionalLight(Fang Xiang Guang )
THREE.SpotLight(Ju Guang Deng )
THREE.PointLight(Dian Guang Yuan ) new THREE.PointLight(0xFFFF00,1,100,0.5);
Dian Guang Yuan Can Shu Lie Biao Han Yi ,Guang Zhao Yan Se ,Guang Zhao Qiang Du ,Dian Guang Yuan De Zui Da Ju Chi ,Dao Zui Da Ju Chi De Shuai Jian Zhi
3.Li :light = new THREE.AmbientLight(0xFFFF00,1);Can Shu Lie Biao :Guang Zhao Yan Se ,Guang Zhao Qiang Du

Ba .JQuery.js

1.Yin Ru Fang Fa ,
2.Zai HTMLJie Mian Yin Ru

Jiu .spectrum-colorpickerYan Se Xuan Ze Qi Cha Jian

1.An Zhuang Fang Fa :Xu Yao Xian Yin Ru jquery.js,Bu Zou Jian Di Ba Bu
(1)vscodeZhong Duan Kong Zhi Tai Yun Xing npm install spectrum-colorpicker,Zhi Hou Yun Xing npm install -g grunt-cli
(2)htmlTian Jia

Xiang Xi An Li Jian demo_6.html
(3)Dai Ma :
$("#color-input-diy").spectrum({
color: "red",//Chu Shi Hua Yan Se
showInput: true,//Xian Shi Shu Ru
//allowEmpty:true,//Yun Xu Wei Kong ,Xian Shi Qing Chu Yan Se An Niu
clickoutFiresChange: false,//Dan Ji Xuan Ze Qi Wai Bu ,Ru Guo Yan Se You Gai Bian Ze Ying Yong
containerClassName: "full-spectrum",
showInitial: true,//Xian Shi Chu Shi Yan Se ,Ti Gong Xian Zai Xuan Ze De Yan Se He Chu Shi Yan Se Dui Bi
showPalette: true,//Xian Shi Xuan Ze Qi Mian Ban ,Ji Zuo Ce You An Niu De Mian Ban
showSelectionPalette: true,//Ji Zhu Xuan Ze Guo De Yan Se
showAlpha: true,//Xian Shi Tou Ming Du Xuan Ze
maxPaletteSize: 7,//Ji Zhu Xuan Ze Guo De Yan Se De Zui Da Shu Liang
cancelText: "Qu Xiao ",//Qu Xiao An Niu ,An Niu Wen Zi
chooseText: "Que Ding ",//Xuan Ze An Niu ,An Niu Wen Zi
noColorSelectedText: "Wu Yan Se Xuan Ze ",//Qing Chu ,An Niu Wen Zi
preferredFormat: "hex",//Shu Ru Kuang Yan Se Ge Shi ,(hexShi Liu Jin Zhi ,hex3Shi Liu Jin Zhi Ke Yi De Hua Zhi Xian Shi 3Wei ,hsl,rgbSan Yuan Se ,nameYing Wen Ming Xian Shi )
localStorageKey: "spectrum.demo",//Ba Xuan Ze Guo De Yan Se Cun Zai Liu Lan Qi Shang
//Xuan Ze Qi You Bian Mian Ban Yi Dong Shi Hong Fa
move: function (color) {
updateBorders(color);
},
//Xuan Ze Qi Mian Ban Xian Shi Shi Hong Fa
show: function () {
},
//Xuan Ze Qi Mian Ban Xian Shi Zhi Qian Hong Fa ,Fan Hui falseShi Bu Xian Shi
beforeShow: function () {
},
//Guan Bi Mian Ban Huo Dian Ji Xuan Ze An Niu ,Yan Se Bian Hua Shi Hong Fa
change:function(){
},
//Xuan Ze Qi Mian Ban Yin Cang Shi Hong Fa
hide: function (color) {
updateBorders(color);
},
//Diao Se Xuan Ze Qi Mian Ban Xian Shi De Yan Se
palette: [
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(153, 153, 153)","rgb(183, 183, 183)",
"rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(239, 239, 239)", "rgb(243, 243, 243)", "rgb(255, 255, 255)"],
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)"],
["rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"],
["rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)"],
["rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)"],
["rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)"],
["rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
]

});
function updateBorders(color) {
//hexColorBiao Shi Shang Ci Diao Se Ban Xian Shi De Yan Se
var hexColor = "transparent";
//Ru Guo Dang Qian She Zhi Yan Se ,Ze Jiang Yan Se She Zhi Wei Dang Qian Yan Se ,Fou Ze ,Ru Guo Mei You Dian Ji Que Ding ,Ze Jiang Yan Se Hui Fu Wei Shang Ci Xuan Ze De Yan Se
if(color) {
hexColor = color.toHexString();
}
//Ru Guo Mei You Xia Mian Zhe Xing Dai Ma ,Dian Ji Xuan Ze Qi Mian Ban Shi ,Ji Shi Bu Dian Ji Bao Cun ,Ye Hui Zao Cheng inputKuang Zhong De Zhi Gai Bian
$("#docs-content").css("border-color", hexColor);
}

Shi .Wen Li

1.Wen Li De Ji Ben Shu Xing :image(Tu Pian ),wrapS(Hui Huan Fang Shi ),offset(Pian Yi )
2.Three.jsZhong De Wen Li Dui Xiang ,Shi Yong THREE.Texture(image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)
Can Shu Lie Biao :image:Tu Pian Lei Xing ,Shi Yong ImageUtilsLai Jia Zai
mapping:Ding Yi Tu Pian Ying She Dao Mo Xing Shang De Fang Shi
wrapS:Biao Shi xZhou De Wen Li Hui Huan Fang Shi ,Ji Wen Li Kuan Du Xiao Yu Xu Yao De Tie Tu Kuan Du Shi ,Ping Mian Sheng Xia De Di Fang Ying Dang Ru He Jin Xing Tie Tu
wrapTBiao Shi yZhou De Wen Li Hui Huan Fang Shi
3.Wen Li De Jia Zai Fang Shi ,Shi Yong THREE.TextureLoader()Lai Jia Zai
4.cross-originJiao Cha Yu Wen Ti ,Liu Lan Qi Wu Fa Du Xie Ben Di Wen Jian ,Suo Yi Ben Di De Tu Pian Zai Liu Lan Qi Shang Bu Neng Zhi Jie Fang Wen Dao
5.Jia Zai De Tu Pian Chi Cun Ying Wei 2De Ci Fang Shu

Shi Yi .Zi Ding Yi Ji He Ti

Bu Zou :(Li :Chuang Jian Yi Ge San Jiao Xing )
//1.Xu Yao Xian De Ding Yi Yi Ge Kong De Ji He Ti Dui Xiang
var obj;
var geometry=new THREE.Geometry();//Zi Ding Yi Ji He Ti
var material=new THREE.MeshBasicMaterial({
vertexColors:THREE.VertexColors,
//color:0x00FF00,
wireframe: false,//Gai Can Shu De Han Yi Wei Xian Shi Xian Kuang
});
//2.Ding Yi Ding Dian
var p1=new THREE.Vector3(0,0,0);
var p2=new THREE.Vector3(0,200,0);
var p3=new THREE.Vector3(200,0,0);
//3.Jiang Ding Dian Fang Zhi Dao Ji He Ti Kong Jian Zhong
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
//4.Wei Ji He Ti Xin Jian Mian Pian ,Bing Wei Mian Pian Tian Jia Yan Se
var color1 = new THREE.Color(0xFF0000);
var color2 = new THREE.Color(0x00FF00);
var color3 = new THREE.Color(0x0000FF);
var face=new THREE.Face3(0,1,2);//Xin Jian Mian Pian
//Wei Mian Pian Ding Dian Tian Jia Yan Se
face.vertexColors[0] = color1;
face.vertexColors[1] = color2;
face.vertexColors[2] = color3;
geometry.faces.push(face)//Jiang Mian Pian Fu Yu Ji He Ti

Shi Er .3DMo Xing De Jia Zai

LoderDe Zhi Xing Shi Yi Bu De ,Suo Yi Zai Shi Yong Jia Zai De Dui Xiang Shi Xu Yao Xian Jin Xing Pan Kong
Jia Zai objGe Shi Mo Xing De Bu Zou ,Xu Yao Yin Ru OBJLoader.js(Yong Yu Jia Zai objWen Jian ),MTLLoader.js(Yong Yu Jia Zai Cai Zhi Wen Jian )Wen Jian
Xiang Xi Jian demo_13.jsAn Li
//Chuang Jian MTLJia Zai Qi
var mtlLoader = new THREE.MTLLoader();
//She Zhi Wen Jian Lu Jing
mtlLoader.setPath('../js/models/obj/');
//Jia Zai mtlWen Jian
mtlLoader.load('female02.mtl', function (material) {
//Chuang Jian OBJJia Zai Qi
var objLoader = new THREE.OBJLoader();
//She Zhi Dang Qian Jia Zai De Wen Li
objLoader.setMaterials(material);
objLoader.setPath('../js/models/obj/');
objLoader.load('female02.obj', function (object) {
//Tian Jia Yin Ying
object.traverse(function (item) {
if (item instanceof THREE.Mesh) {
item.castShadow = true;
item.receiveShadow = true;
}
});
//Suo Fang
object.scale.set(.3, .3, .3);
scene.add(object);
})
});
// OBJWen Jian Shi Yi Chong Biao Zhun De 3DMo Xing Wen Jian Ge Shi ,Gua He 3DMo Xing Zhi Jian De Hu Xiang Zhuan Huan
// OBJWen Jian De Ge Shi :
// #Dai Biao Zhu Shi Xing ,Yi Ban Xie Mo Xing Sheng Cheng De Ruan Jian ,Jie Xi Shi Hui Bei Hu Lue Diao
// Xia Mian De Xing Shou Zi Fu Wei Guan Jian Zi ,Dai Biao Fa Xian ,Cai Zhi ,Dian ,Wen Li Deng
// o:Dai Biao Dui Xiang Ming Cheng
// v:Ji He Ti Ding Dian
// vt:Tie Tu Zuo Biao Dian
// vn:Ding Dian Fa Xian
// vp:Can Shu Kong Ge Ding Dian
// deg:Du
// l:Xian
// f:Mian Hou Mian San Xing Shu Ju Yi Yi :(Ding Dian Suo Yin /UVZuo Biao De Suo Yin /Fa Xian De Suo Yin )Xun Huan San Ci ,Biao Shi San Jiao Xing Mian Pian San Ge Dian De Shu Ju
// curv:Qu Xian
// curv2:2DQu Xian
// surf:Biao Mian
// mtllib:Biao Shi Mo Xing Shi Yong De Cai Zhi
// Li :objWen Jian De Shu Ju (Yi Ge Shuang Mian De Si Bian Xing Mian Pian )
Han Yi :vDai Biao Si Ge Ding Dian De xyzZuo Biao ,fBiao Shi Yi Zen Yang De Shun Xu Qu Bao Wei Zhe Ge Mian ,Shun Xu Jue Ding You Shou Zuo Biao Xi Xia Mian De Zheng Fan Mian
# custom shap
v -0.58 0.84 0
v 2.68 1.17 0
v 2.84 -2.03 0
v -1.92 -2.98 0
f 4 3 2 1
f 1 2 3 4
//Three.jsTong Guo Zheng Ze Biao Da Shi Lai Jie Xi objGe Shi De Wen Jian You OBJLoader.jsLai Chu Li
//Zheng Ze Biao Da Shi Zai jsZhong De Shi Yong Fang Fa
var str1="sxo05110511"
var str2="wkp01220122"
/Zheng Ze Biao Da Shi Zi Fu Chuan /gm.test(str1) //Fan Hui trueHuo Zhe false
//Shi Yong Zheng Ze Biao Da Shi Jie Xi objGe Shi Wen Jian De Mei Yi Xing ,Chai Fen Cheng Ding Dian Zuo Biao ,Fa Xiang Liang ,uvZuo Biao ,Zai Shi Yong BufferGeometryLai Zhuan Hua Cheng Mian Pian
//Zui Hou Jiang Duo Ge Zhuan Hua De Mian Pian Pin Jie Cheng Ji He Ti ,Zai Zhuan Hua Wei objectDui Xiang Ji Ke Jia Zai Dao Chang Jing Zhong

Shi San .THREEDe RaycasterLei

//Gou Zao Han Shu
THREE.Raycaster=function (origin,direction,near,far)
// Can Shu De Han Yi origin:Guang Xian Fa She Chu Qu De Di Fang direction:Gui Yi Hua De Fang Xiang Xiang Liang near:Guang Xian Fa She Zui Jin De Di Fang far:Guang Xian Fa She Zui Yuan De Di Fang
// Bu Chuan Can Shu Hui Mo Ren Qi Shi Wei Zhi He Fang Xiang Du Wei Yuan Dian
var raycaster = new THREE.Raycaster();

// Gen Ju Zai Ping Mu De Er Wei Wei Zhi Yi Ji Xiang Ji De Ju Zhen Geng Xin She Xian De Wei Zhi ,Di Yi Ge Can Shu Wei Gui Yi Hua De She Bei Zuo Biao (xyzZai -1Dao 1Zhi Jian ),Di Er Ge Can Shu Guang Xian Qi Yuan De Wei Zhi
raycaster.setFromCamera(mouse, camera);//De Dao Yi Ge You Xiang Ji Zhi Xiang Shu Biao De Guang Xian Xiang Liang

// Can Shu Wei Jian Ce Xiang Jiao Wu Ti De Shu Zu
// Fan Hui Yi Ge Shu Zu ,Wei Xiang Jiao De Dui Xiang De Shu Zu
// Zeng Jia Di Er Ge Can Shu ,Ke Yi Bian Li Zi Zi Sun Sun Dui Xiang
var intersects = raycaster.intersectObjects(scene.children, true);
// intersectsShi Fan Hui De Yi Ge Shu Zu ,Ru Guo Dang Qian Wei Zhi Mei You Ke Xuan Zhong De Dui Xiang ,Na Zhe Ge Shu Zu Wei Kong ,Fou Ze Wei Duo Ge Dui Xiang Zu Cheng De Shu Zu ,Pai Lie Shun Xu Wei Ju Chi Ping Mu De Ju Chi Cong Jin Dao Yuan De Shun Xu Pai Lie
// Shu Zu De Mei Yi Ge Zi Dui Xiang Nei Bao Han :
// distance:Ju Chi Ping Mu De Ju Chi
// face:Yu She Xian Xiang Jiao De Mo Xing De Mian
// faceIndex:Yu She Xian Xiang Jiao De Mo Xing De Mian De Xia Biao
// object:Yu She Xian Xiang Jiao De Mo Xing Dui Xiang
// point:She Xian Yu Mo Xing Xiang Jiao De Dian De Wei Zhi Zuo Biao
// uv:Yu She Xian Xiang Jiao De Mo Xing De Mian De uvYing She Wei Zhi

Shi Si .Ji He Wu Ti De Xuan Zhuan (Rao Ren Yi Zhou ,Fei Ji He Zhong Xin )

// 1.Jie Jue Si Lu :Wu Ti Fang Zhi Zai Yi Ge Zu Dui Xiang Dang Zhong ,Ran Hou Xuan Zhuan Zu Dui Xiang
//Shi Yong rotateOnAxis(v1,0.1);Lai Xuan Zhuan De Zhu Yi Shi Xiang
//v1Wei Xuan Zhuan Zhou ,Bi Xu Jin Xing Gui Yi Hua ,Fou Ze Rao Zhou Xuan Zhuan Hui Gai Bian Wu Ti De Bi Li
var v1 = new THREE.Vector3(1,1,0).normalize();//Xuan Zhuan Zhou
mesh.rotateOnAxis(v1,0.1);

Shi Wu .Li Zi Xi Tong

//Jia Zai De Mo Xing objloaderZi Ding Yi Cai Zhi
objLoader.load('xxx.obj',
//onloadHan Shu
function (object) {
object.scale.set(0.3,0.3,0.3)
//She Zhi Cai Zhi
for (let i = 0; i < object.children.length; i++) {
var mat=object.children[i].material
mat.color.set(0xffffff)
mat.wireframe=true
}
scene.add(object);
}
)
1.Li Zi Xi Tong Lei THREE.Points() Dian Cai Zhi THREE.PointsMaterial

mesh.geometry.verticesNeedUpdate = true;//Zhi You Jiang Zhe Ge Shu Xing She Zhi Wei true,GPUCai Hui Zhong Xin Ji Suan Ding Dian De Wei Zhi ,Xin De Tu Xing Cai Hui Bei Xuan Ran

Shi Liu .Bei Sai Er Qu Xian

//Bei Sai Er Qu Xian ,You Liang Ge Duan Dian De Zu Cheng ,Zhong Jian You Ruo Gan Kong Zhi Dian ,Qu Xian Bi Xu Jing Guo Liang Duan Duan Dian ,Bu Bi Jing Guo Zhong Jian Kong Zhi Dian ,Dan Shi Zhong Jian Kong Zhi Dian Qi Dao Ying Xiang Qu Xian Lu Jing De Xiao Guo
//Zhe Yang De Qu Xian Bei Cheng Zuo Bei Sai Er Qu Xian
//Yi Jie Bei Sai Er Qu Xian :Zhong Jian Wu Kong Zhi Dian De Qu Xian (Xian Duan )
Yi Jie Bei Sai Er Qu Xian Gong Shi :B(t) = (1 - t) * P0 + t * P1 ,t[0,1]
//Er Jie Bei Sai Er Qu Xian :Zhong Jian Yi Ge Kong Zhi Dian
Er Jie Bei Sai Er Qu Xian Gong Shi :B(t) = (1 - t)2 * P0 + 2 * t * (1 - t) * P1 + t2 * P2 ,t[0,1]
//San Jie Bei Sai Er Qu Xian :Zhong Jian Liang Ge Kong Zhi Dian
San Jie Bei Sai Er Qu Xian Gong Shi :B(t) = (1 - t)3 * P0 + 3 * P2 * t2 * (1 - t) + t3 * P3 ,t[0,1]

//Bei Sai Er Qu Xian Zai THREE.jsZhong
Er Jie :
circleShape.moveTo(circleRadius, 0);//Duan Dian 1
//Can Shu Wei Kong Zhi Dian He Duan Dian 2
circleShape.quadraticCurveTo(0, circleRadius, -circleRadius, 0);
San Jie :
//Xu Yao You Duan Dian 1Diao Yong ,Can Shu Wei Kong Zhi Dian 1,2He Duan Dian 2
THREE.Path.portotype.bezierCurveTo=function (aCP1x,aCP1y,aCP2x,aCP2y,aX,aY) {

}

About

Xue Xi WebGLHe three.jsDe Cang Ku He Bi Ji

Topics

Resources

Readme

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors

Languages