สร้างภาพ 3 มิติแบบโต้ตอบด้วย Three.js

Sep 12, 2025
วิธีการ

บทช่วยสอน WebGL นี้แสดงให้เห็นถึงวิธีการสร้างการจำลองสิ่งแวดล้อม 3 มิติที่แสดงให้เห็นว่าเกิดอะไรขึ้นกับโลกในการเปลี่ยนแปลงระดับ CO2 (คุณสามารถดูเพิ่มเติม การทดลอง WebGL ที่นี่.)

ผู้ใช้ควบคุมระดับโดยใช้ตัวเลื่อนช่วงอินพุต HTML ในขณะที่ผู้ใช้เพิ่ม CO2 มากขึ้นหมอกควันมากขึ้นจะปรากฏในฉากระดับน้ำจะเพิ่มขึ้นเนื่องจากอุณหภูมิที่เพิ่มขึ้นละลายฝาน้ำแข็งขั้วโลกมากขึ้นต้นไม้จะหายไปเมื่อพวกเขาดื่มด่ำกับน้ำ

องค์ประกอบที่มีการเคลื่อนไหวเข้าและออกโดยใช้ห้องสมุด Tween และลากแถบเลื่อนในทิศทางตรงกันข้ามจะกลับเอฟเฟกต์ ถ้าเพียงมันเป็นเรื่องง่ายในชีวิตจริง!

01. องค์ประกอบการแสดงผล

The basic layout of the page is shown here before the 3D scene has been added. The image is a transparent PNG at the top of the screen and there is a range slider at the bottom

เลย์เอาต์พื้นฐานของหน้าจะแสดงที่นี่ก่อนที่จะมีการเพิ่มฉาก 3 มิติ ภาพเป็น PNG โปร่งใสที่ด้านบนของหน้าจอและมีตัวเลื่อนช่วงที่ด้านล่าง

ในการเริ่มต้นโครงการให้เปิดโฟลเดอร์ 'เริ่ม' ใน IDE โค้ดของคุณ เปิดออก index.html และคุณจะเห็นว่ามีหน้านั่งร้านพื้นฐานที่นั่นพร้อมกับรหัสบางอย่างแล้ว ในส่วนของร่างกายเพิ่มองค์ประกอบการแสดงผลที่นี่ที่จะใช้เป็นส่วนต่อประสานกับเนื้อหา 3 มิติ 

 & lt; div id = "ส่วนหัว" & gt;
  & lt; img src = "img / co2.png" id = "ตรา" & gt;
  & lt; / div & gt;
  & lt; div id = "ภายใน" & gt;
  & lt; input class = "slide" type = "range" min = "0" max = "7" ขั้นตอน = "1" value = "0" oninput = "showval (นี้.Value)" & GT;
  & lt; p & gt; ลากแถบเลื่อนเพื่อเปลี่ยนระดับ co2 & lt; / p & gt;
  & lt; / div & gt;

02. การเชื่อมโยงไลบรารีขึ้น

เนื้อหา 3 มิติกำลังถูกแสดงผ่าน Three.js ซึ่งรวมอยู่ที่นี่ รุ่น Collada จะถูกเพิ่มเข้าไปในฉากในภายหลัง ห้องสมุดพิเศษที่จะโหลดนี้รวมอยู่ด้วยห้องสมุด Tween พื้นฐาน บรรทัดถัดไปเชื่อมโยงทั้งหมดเพื่อโพสต์เอฟเฟกต์การประมวลผลที่จะเพิ่มโปแลนด์การตกแต่ง 

 & lt; สคริปต์ src = "js / three.min.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; สคริปต์ src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = 'JS / PostProcessing / EffectComposer.js' & GT; & lt; / script & gt;
& lt; สคริปต์ src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; สคริปต์ src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; สคริปต์ src = 'js / postprocessing / maskpass.js' & gt; & lt; / script & gt;

03. โพสต์การประมวลผล shaders

หลังจากที่เกิดเหตุทำให้แต่ละเฟรมมีการเพิ่มเอฟเฟกต์กระบวนการโพสต์จำนวนมาก นี่คือห้องสมุดที่ให้อำนาจของเม็ดฟิล์มผลการเปลี่ยนเอียงเบลอที่ด้านบนและด้านล่างของหน้าจอจากนั้นในที่สุดบทความสั้น ๆ ที่จะจางหายไปที่ขอบของหน้าจอ

04. การเพิ่มตัวแปร

รหัสบางอย่างเสร็จสมบูรณ์สำหรับคุณ คุณจะเห็นความคิดเห็นที่จะเพิ่มรหัสส่วนที่เหลือของบทช่วยสอน มีการใช้ตัวแปรจำนวนหนึ่งในฉาก 3 มิตินี้ซึ่งดูแลความละเอียดหน้าจอรุ่น 3D ต่างๆและการประมวลผลโพสต์ ตัวแปรที่สำคัญสองตัวคือ น้ำ สำหรับความสูงของน้ำและ สุดท้าย ซึ่งจดจำตำแหน่งสุดท้ายของแถบเลื่อน 

 var screen_width = window.innerwidth, screen_height = window.innerheight,
 Mousex = 0, Mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, กล้อง, ฉาก, renderer, น้ำ, waterht = 1;
Var TextUreloader = ใหม่สาม.TextureLoader ();
Var Composer, Shadertime = 0, FilmPass, Renderpass, Copypass, EffectVignette, กลุ่ม, lastval = 0;

05. เริ่มต้นฉาก

ฟังก์ชั่น Init เป็นส่วนใหญ่ของรหัสทำให้มั่นใจได้ว่าฉากจะถูกตั้งค่าด้วยรูปลักษณ์ที่ถูกต้องที่จุดเริ่มต้น คอนเทนเนอร์ถูกเพิ่มเข้าไปในหน้าและนี่คือที่ที่ฉาก 3D จะปรากฏขึ้น มีการเพิ่มกล้องและมีหมอกพื้นหลังบางอย่างเพื่อจางหายไประยะทาง 

 ฟังก์ชั่นเริ่มต้น () {
  var container = document.createelement ('div');
  document.body.ephendchild (คอนเทนเนอร์);
  กล้อง = New Three.PerspectiveCamera (75, Screen_Width / Screen_Height, 1, 10,000);
  camera.position.set (2000, 100, 0);
  ฉาก = ใหม่สาม.Scene ();
  scene.fog = ใหม่สาม.fogexp2 (0xb6d9e6, 0.0025);
  Renderer = New Three.WebGlrenderer ({
  antialias: จริง
  });

06. การตั้งค่า renderer

Renderer จะได้รับสีพื้นหลังและความละเอียดถูกตั้งค่าเป็นขนาดเดียวกับอัตราส่วนพิกเซลของหน้าจอ เงาจะเปิดใช้งานในฉากและวางไว้บนหน้าในองค์ประกอบคอนเทนเนอร์ เพิ่มแสงซีกโลกซึ่งมีสีฟ้าและสีพื้น 

renderer.setclearcolor (0xdc9d4);
renderer.setpixelratio (window.devicepixelratio);
renderer.setsize (screen_width, screen_height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
container.ephendchild (renderer.domelement);
Var Light = New Three.Hemispherelight (0xa1e2f5, 0x6f4d25, 0.5);
Scene.add (แสง);

07. ตัวแปร Shader

ตัวแปรที่จะควบคุมเอฟเฟกต์กระบวนการโพสต์ Shader จะได้รับค่าของพวกเขาที่นี่ ตัวแปรเหล่านี้จะถูกใช้ในภายหลังเพื่อเพิ่มค่าที่จะควบคุมรูปลักษณ์ หากคุณดูในฟังก์ชั่นพารามิเตอร์คุณจะเห็นสิ่งนี้เสร็จสมบูรณ์สำหรับคุณ 

 RenderPass = New Three.RenderPass (ฉากกล้อง);
HBLUR = NEW THEE.SHADERPASS (THREE.HORIZONTALTISTSHIFTSHADER);
vblur = New Three.shaderpass (Three.verticalTiltShiftshader);
FilmPass = New Three.shaderpass (Three.Filmshader);
EffectVignette = New Three.shaderpass (three.vignetteshader);
Copypass = New Three.shaderpass (Three.copyshader);

08. การเขียนผลกระทบ

ผลกระทบจะต้องซ้อนกันในสิ่งที่เรียกว่าเอฟเฟกต์นักแต่งเพลง สิ่งนี้ใช้ผลกระทบแต่ละอย่างและใช้การจัดแต่งทรงผม จากนั้นทั้งหมดจะแสดงเป็นฉากสุดท้ายบนหน้าจอซึ่งคุณจะเห็นเมื่อมีการเพิ่มฟังก์ชั่นการแสดงผลในภายหลัง

09. กำลังโหลดภาพคลาวด์

The params() function is called in step 9, which sets the parameters for the post processing vignette and film grain effect

ฟังก์ชัน Params () เรียกว่าในขั้นตอนที่ 9 ซึ่งตั้งค่าพารามิเตอร์สำหรับโพสต์การประมวลผล Vignette และ Effect เม็ดฟิล์ม

ที่ พารามิเตอร์ ฟังก์ชั่นเรียกว่าและนี่เป็นชุดพารามิเตอร์แต่ละรายการสำหรับเอฟเฟกต์โพสต์ กลุ่มใหม่ถูกสร้างขึ้นและสิ่งนี้จะเก็บเนื้อหาฉากทั้งหมดไว้ในนั้นเพื่อให้ง่ายต่อการหมุนกลุ่มของวัตถุ อิมเมจ PNG ที่โปร่งใสเต็มไปด้วยวัสดุคลาวด์ที่จะใช้เป็นสไปรท์ภายในฉาก 

 พารามิเตอร์ ();
  กลุ่ม = ใหม่สามกลุ่ม ();
  Scene.add (กลุ่ม);
  var cloud = textureloader.load ("img / cloud.png");
  วัสดุ = ใหม่สาม.SprItematerial ({
  แผนที่: เมฆ, ความทึบแสง: 0.6, สี: 0x888888, หมอก: TRUE
});

10. ดับเบิลสำหรับลูป

แปดกลุ่มถูกสร้างขึ้นภายในครั้งแรก สำหรับ ลูป. แปดกลุ่มเหล่านี้ทั้งหมดได้รับ 35 เมฆเพิ่มให้กับพวกเขาในรอบที่สองสำหรับลูป แต่ละคลาวด์จะถูกวางไว้ในตำแหน่งสุ่มเหนือฉาก กลุ่มจะเปิดและปิดด้วยตัวเลื่อนโดยผู้ใช้เพื่อแสดงหมอกควันที่ถูกเพิ่มและลบออกในการสร้างภาพ 

 สำหรับ (j = 0; j & lt; 8; j ++) {
  var g = ใหม่สาม. กลุ่ม ();
  สำหรับ (i = 0; i & lt; 35; i ++) {
  Var X = 400 * Math.Random () - 200;
  var y = 60 * math.random () + 60;
  Var Z = 400 * Math.Random () - 200;
  สไปรต์ = ใหม่สาม.Sprite (วัสดุ);
  Sprite.Position.Set (X, Y, Z);

11. ปรับขนาดคลาวด์

The first group of clouds can be seen in the scene. The others are hidden and will be visible when controlled from the slider by the user

กลุ่มเมฆแรกสามารถเห็นได้ในฉาก คนอื่น ๆ ถูกซ่อนอยู่และจะมองเห็นได้เมื่อควบคุมจากตัวเลื่อนโดยผู้ใช้

คลาวด์นั้นปรับขนาดได้ถึงขนาดที่ช่วยให้สามารถมองเห็นได้ในที่เกิดเหตุ กลุ่มคลาวด์ทุกกลุ่มหลังจากกลุ่มแรกถูกปรับลดลงเพื่อให้พวกเขามองไม่เห็นเครื่องเรนเดอร์ นี่คือวิธีที่พวกเขาจะทำให้มองเห็นได้ในภายหลังโดยการปรับขนาดพวกเขากลับมาเป็นขนาดเต็มของพวกเขาเนื่องจากจะให้ผลที่ดี tweening

12. กำลังโหลดโมเดล

ตอนนี้ Collada Loader ถูกตั้งค่าให้โหลด scene.dae รุ่น เมื่อเสร็จสิ้นการโหลดแบบจำลองจะถูกสแกนและวัตถุใด ๆ ที่เกิดขึ้นเป็นตาข่ายจะถูกสร้างขึ้นเพื่อหล่อเงาและรับเงาเพื่อให้ความลึกพิเศษบางอย่างกับฉาก 

 var loader = ใหม่สาม.colladaloader ();
loader.options.convertupaxis = true;
loader.load ('scene.dae', ฟังก์ชั่น (collada) {
  Var Dae = Collada.Scene;
  dae.traverse (ฟังก์ชั่น (เด็ก) {
  ถ้า (เด็ก industryof three.mesh) {
  เด็ก castshadow = true;
  child.receiveshadow = true;
  }
});

13. การค้นหาเฉพาะในฉาก

ในขณะที่รุ่นนี้พร้อมสำหรับการแสดงผลมันถูกตั้งค่าเป็นขนาดที่เหมาะสมเพื่อให้พอดีกับฉาก รหัสจำเป็นต้องควบคุมความสูงของน้ำโดยเฉพาะเพื่อให้รุ่นน้ำพบในฉากและส่งผ่านไปยังตัวแปรทั่วโลก ในทำนองเดียวกันแสงหลักจะต้องพบเพื่อให้สามารถตั้งค่าเป็นเงาของโครงการ 

 dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
Dae.UpDatematrix ();
Group.add (DAE);
Water = Scene.getObjectByName ("น้ำ", จริง);
น้ำ = Water.Children 
;
Light = Scene.getObjectByName ("Splight", True);
Light = Light.Children 
;

14. การตั้งค่าแสง

The model has been added with the main light set to emit shadows onto the scene. There is something substantial to look at in the scene so the tilt shift blur effect can be seen at the front and back of the scene

โมเดลได้รับการเพิ่มเข้ากับแสงหลักที่ตั้งไว้เพื่อปล่อยเงาลงบนฉาก มีบางอย่างที่สำคัญในการดูในที่เกิดเหตุเพื่อให้เอฟเฟกต์การเปลี่ยนเอียงเบลอสามารถมองเห็นได้ที่ด้านหน้าและด้านหลังของฉาก

ตอนนี้เป็นสปอตไลท์พบว่าเฉพาะเจาะจงที่ทำให้เงาอยู่ในฉากถูกตั้งค่า การซีดจางของแสงที่ขอบของจุดยังตั้งไว้ที่นี่ ในที่สุดเมื่อรูปแบบเป็นองค์ประกอบที่ใหญ่ที่สุดในการโหลดฉากที่เหลือจะถูกตั้งค่าก่อนที่จะเรียกใช้รหัสนี้ดังนั้นฟังก์ชั่นการแสดงผลสามารถเรียกได้ว่าแต่ละเฟรม 

 light.target.position.set (0, 0, 0);
  light.castshadow = true;
   Light.shadow = New Three.lightshadow (ใหม่สาม.perspectivecamera (90, 1, 90, 5,000));
  light.shadow.bias = 0.0008;
  light.shadow.mapsize.width = 1024;
  Light.shadow.Mapsize.Height = 1024;
  light.penumbra = 1;
  Light.decay = 5;
  แสดงผล ();
});

15. รหัสการเริ่มต้นล่าสุด

With the mouse and touch events set up, the scene becomes reactive to the mouse movement, zooming in and out while being able to tilt the scene up and down

ด้วยการตั้งค่าเมาส์และการสัมผัสที่เกิดขึ้นฉากจะมีปฏิกิริยาต่อการเคลื่อนไหวของเมาส์การซูมเข้าและออกขณะที่สามารถเอียงฉากขึ้นและลง

ส่วนสุดท้ายของฟังก์ชั่น Init ตั้งค่าเมาส์และสัมผัสที่หลากหลายซึ่งจะย้ายกล้องขึ้นอยู่กับตำแหน่งของพวกเขา กิจกรรมยังลงทะเบียนเพื่อรับฟังหากหน้าจอถูกปรับขนาดและจะอัปเดตจอแสดงผลที่เรนเดอร์ 

 document.addeventristener ('mousemove', ondocumentmousemove, false);
  document.addeventristener ('touchstart', ondocumenttouchstart, false);
  document.addeventlistener ('touchmove', ondocumenttouchmove, false);
  window.addeventristener ('ปรับขนาด', onwindowresize, false);
}

16. การแสดงผลแต่ละเฟรม

ฟังก์ชั่นการแสดงนั้นถูกตั้งค่าให้ถูกเรียกว่าใกล้เคียงกับ 60 เฟรมต่อวินาทีเนื่องจากเบราว์เซอร์สามารถจัดการได้ กลุ่มซึ่งมีรุ่นทั้งหมดถูกตั้งค่าให้หมุนด้วยจำนวนเล็กน้อยแต่ละเฟรม ตำแหน่งของกล้องได้รับการอัพเดตจากเมาส์หรืออินพุตแบบสัมผัสและยังคงมองไปที่ศูนย์กลางของฉาก

17. การอัพเดตจอแสดงผล

เวลา shader เป็นตัวแปรที่เพิ่งเพิ่มขึ้น 0.1 เฟรมแต่ละเฟรมและสิ่งนี้จะถูกส่งไปยัง ฟิล์ม เพื่อให้มีการอัปเดตธัญพืชฟิล์มเสียงรบกวน เอฟเฟกต์นักแต่งเพลงได้รับการอัพเดตและแสดงผลให้กับหน้าจอ ในที่สุดเครื่องยนต์ Tween ก็มีการอัพเดทเช่นกัน 

 Shadertime + = 0.1;
  filmpass.uniforms ['เวลา'] ค่า = shadertime;
  composer.render (0.1);
  tween.Update ();
}

18. รับการป้อนข้อมูลของผู้ใช้

ตัวเลื่อนช่วงอินพุตเพิ่มในขั้นตอนที่ 1 โทร น่าจดจำ ฟังก์ชั่นซึ่งกำหนดไว้ที่นี่ เมื่อผู้ใช้คลิกที่นี่เพียงแค่ตรวจสอบว่าตัวเลื่อนถูกย้ายแล้ว หากมันถูกย้ายขึ้นจากนั้นกลุ่มคลาวด์ต่อไปจะถูกปรับขนาดด้วย Tween มากกว่า 0.8 วินาที อัปเดตความสูงของน้ำแล้วและนี่ก็สูงถึงความสูงใหม่ 

 ฟังก์ชั่น showval (val) {
  ถ้า (val! = lastval) {
  ถ้า (val & gt; lastval) {
  ใหม่ tween.tween (group.children [val] .scale) .to ({x: 1, y: 1, z: 1}, 800). easing (tween.easing.quadratic.inout) .start ();
  Waterht + = 0.07;
  ใหม่ tween.tween (water.scale) .to ({y: waterht}, 800). easing (tween.easing.quadratic.inout) .start ();

19. คว้าต้นไม้

ตัวแปรชั่วคราวพบว่ากลุ่มปัจจุบันของต้นไม้ที่ควรกำจัดออกจากที่เกิดเหตุและที่นี่มันปรับขนาดลงด้วยทวีตบนแกน Y เท่านั้น ใช้การผ่อนคลายความยืดหยุ่นเพื่อให้น้ำพุนี้หลุดพ้นอยู่บนหน้าจอเพื่อผลที่ชื่นชอบ เมื่อน้ำและเมฆมากขึ้นในที่เกิดเหตุต้นไม้หายไป

20. อินพุตตรงข้าม

เนื้อหาแรกที่ตรวจสอบว่าตัวเลื่อนเลื่อนขึ้นหรือไปทางขวา ตอนนี้รหัสตรวจพบผู้ใช้เลื่อนไปทางซ้าย เมฆถูกปรับขนาดลงด้วยทวีททวีและเป็นระดับน้ำเพื่อแสดงผลการระบายความร้อนบนโลก 

 tween.tween ใหม่ (กลุ่ม. เด็ก ๆ [lastval] .sscale) .TO ({x: 0.001, Y: 0.001, Z: 0.001}, 800). easing (tween.easing.quadratic.inout) .Start ( );
Waterht - = 0.07;
ใหม่ tween.tween (water.scale) .to ({y: waterht}, 800). easing (tween.easing.quadratic.inout) .start ();

21. จบการศึกษา

With everything working, you can see the background fog clearly as you move the mouse so that the camera gets a higher vantage point on the scene

ด้วยการทำงานทุกอย่างคุณสามารถเห็นหมอกพื้นหลังอย่างชัดเจนในขณะที่คุณเลื่อนเมาส์เพื่อให้กล้องได้รับจุดที่สูงขึ้นในฉาก

ขั้นตอนสุดท้ายคือการนำต้นไม้กลับมาเพื่อให้พวกเขาถูกปรับขนาดกลับไปสู่ขนาดดั้งเดิมของพวกเขาด้วย Tween ยืดหยุ่น บันทึกฉากและดูหน้าเว็บจากเซิร์ฟเวอร์ที่โฮสต์ในเครื่องคอมพิวเตอร์ของคุณเองหรือบนเว็บเซิร์ฟเวอร์ คุณจะสามารถโต้ตอบกับการเคลื่อนไหวของเมาส์และแถบเลื่อนเพื่อเปลี่ยนการแสดงฉาก

บทความนี้ปรากฏในเดิม นักออกแบบเว็บไซต์ ปัญหา 265 ซื้อมัน ที่นี่ .

บทความที่เกี่ยวข้อง:

  • วิธีการโค้ดเครื่องหมายความเป็นจริงที่เพิ่มขึ้น
  • 20 ตัวอย่างที่น่าทึ่งของ WebGL ในการดำเนินการ
  • 9 การใช้งานที่ยอดเยี่ยมของ 3D ในการออกแบบเว็บ

วิธีการ - บทความยอดนิยม

วิธีการสร้างความเรียบง่ายการสร้างรูปร่างแบบผสมผสานในมายา

วิธีการ Sep 12, 2025

(เครดิตภาพ: Antony Ward) ใน Maya ผสมผสานรูปร่างหรือเป�..

Lino Printmaking: บทนำ

วิธีการ Sep 12, 2025

(เครดิตภาพ: MEG Buick) Lino Printmaking เป็นวิธีการพิมพ์แบบ�..

วิธีการสร้างแอป AR

วิธีการ Sep 12, 2025

หน้า 1 จาก 3: สร้างแอป AR: ขั้นตอนที่ 01-10 ..

5 วิธีในการเพิ่ม SEO ของเว็บไซต์ของคุณ

วิธีการ Sep 12, 2025

SEO: มันเป็นงานที่สกปรก แต่มีคนต้องทำและถ้าคุณต..

ฝึกฝนเครื่องมือสะพาน

วิธีการ Sep 12, 2025

เครื่องมือบริดจ์คืออะไร? หากคุณยังใหม่ก�..

สร้างเอฟเฟกต์สแปลชใน Realflow

วิธีการ Sep 12, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

เริ่มต้นใน Amazon Lumberyard: การตั้งค่า

วิธีการ Sep 12, 2025

เครื่องยนต์เกมใหม่ของ Amazon คนตัดไม้ ฟรีและ..

วิธีการฝึกซ้อมผิวหนังในแบบ 3 มิติ

วิธีการ Sep 12, 2025

เป็นเวลานานแล้วตอนนี้ฉันติดอยู่ในร่องด้วยขอ..

หมวดหมู่