仓库

https://gitee.com/laddish/threejs-plane-2-mountain/tree/master/

预览地址

效果

右边这个 蓝色山体 旋转并且随着鼠标移动变化Three.js-创建一个自动转动的透明山体 - 图1

主要思路

  1. 创建一个平面
  2. 平面添加材质
  3. 渲染
  4. 添加动画

    亮点

    强大的THREE.MeshStandardMaterial
    可以添加
    map,添加材质
    mountain.jpg

displacementMap(通过图片黑白来确定高度),用的是下面这张图片
height.png 白色的地方高 黑色地方低 所以尽量保证 四个角都是黑的
height.png
alphaMap透明度map(本例用来淡化周围的山体)
alpha.png 白色的地方亮 黑色地方暗
alpha.png
中间亮周围暗

主要代码

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ThreeJS Starter</title>
  7. </head>
  8. <body>
  9.     <div class="container">
  10.         <h1>Take the Track</h1>
  11.         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero repudiandae dolore inventore aliquam, maiores facilis.</p>
  12.         <button>Go Biking</button>
  13.     </div>
  14.     <canvas class="webgl"></canvas>
  15. </body>
  16. </html>

script.js

材质加载+创建材料

  1. const loader = new THREE.TextureLoader();
  2. const texture = loader.load("/mountain.jfif");
  3. const height = loader.load("height.png");
  4. const alpha = loader.load("alpha.png");
  7. // Materials
  8. const material = new THREE.MeshStandardMaterial({
  9.   color: "white",
  10.   map: texture,
  11.   displacementMap: height,
  12.   displacementScale: 0.6,
  13.   alphaMap: alpha,
  14.   transparent: true,
  15.   depthTest: false,
  16. });

创建平面

  1. const geometry = new THREE.PlaneBufferGeometry(3, 3, 64, 64);
  2. // Mesh
  3. const plane = new THREE.Mesh(geometry, material);
  5. scene.add(plane);
  6. plane.rotation.x = 181;

添加光照

  1. const pointLight = new THREE.PointLight("#00a4ff", 2);
  2. pointLight.position.x = 0.2;
  3. pointLight.position.y = 10;
  4. pointLight.position.z = 4.4;
  5. scene.add(pointLight);

相机

  1. /**
  2.  * Sizes
  3.  */
  4. const sizes = {
  5.   width: window.innerWidth*.7,
  6.   height: window.innerHeight,
  7. };
  9. window.addEventListener("resize", () => {
  10.   // Update sizes
  11.   sizes.width = window.innerWidth*.7;
  12.   sizes.height = window.innerHeight;
  14.   // Update camera
  15.   camera.aspect = sizes.width / sizes.height;
  16.   camera.updateProjectionMatrix();
  18.   // Update renderer
  19.   renderer.setSize(sizes.width, sizes.height);
  20.   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  21. });
  23. /**
  24.  * Camera
  25.  */
  26. // Base camera
  27. const camera = new THREE.PerspectiveCamera(
  28.   75,
  29.   sizes.width / sizes.height,
  30.   0.1,
  31.   100
  32. );
  34. camera.position.x = 0;
  35. camera.position.y = 0;
  36. camera.position.z = 4;
  37. scene.add(camera);

动画

  1. /**
  2.  * Animate
  3.  */
  5.  document.addEventListener("mousemove", animateTerrain, false);
  6.  let mouseY = 0;
  8.  function animateTerrain(event) {
  9.     mouseY = event.clientY;
  10.  }
  13. const clock = new THREE.Clock();
  15. const tick = () => {
  16.   const elapsedTime = clock.getElapsedTime();
  18.   // Update objects
  19.   plane.rotation.z = 0.5 * elapsedTime;
  20.   plane.material.displacementScale = 1+mouseY*0.0003;
  22.   // Update Orbital Controls
  23.   // controls.update()
  25.   // Render
  26.   renderer.render(scene, camera);
  28.   // Call tick again on the next frame
  29.   window.requestAnimationFrame(tick);
  30. };
  32. tick();
  1. import "./style.css";
  2. import * as THREE from "three";
  3. import * as dat from "dat.gui";
  5. // Texture loader 
  6. const loader = new THREE.TextureLoader();
  7. const texture = loader.load("/mountain.jfif");
  8. const height = loader.load("height.png");
  9. const alpha = loader.load("alpha.png");
  11. // Debug
  12. const gui = new dat.GUI();
  14. // Canvas
  15. const canvas = document.querySelector("canvas.webgl");
  17. // Scene
  18. const scene = new THREE.Scene();
  20. // Objects
  21. const geometry = new THREE.PlaneBufferGeometry(3, 3, 64, 64);
  23. // Materials
  24. const material = new THREE.MeshStandardMaterial({
  25.   color: "white",
  26.   map: texture,
  27.   displacementMap: height,
  28.   displacementScale: 0.6,
  29.   alphaMap: alpha,
  30.   transparent: true,
  31.   depthTest: false,
  32. });
  34. // Mesh
  35. const plane = new THREE.Mesh(geometry, material);
  37. scene.add(plane);
  38. plane.rotation.x = 181;
  40. //GUI
  42. gui.add(plane.rotation, "x").min(0).max(200);
  43. gui.add(plane.rotation, "y").min(0).max(200);
  44. gui.add(plane.rotation, "z").min(0).max(200);
  46. // Lights
  48. const pointLight = new THREE.PointLight("#00a4ff", 2);
  49. pointLight.position.x = 0.2;
  50. pointLight.position.y = 10;
  51. pointLight.position.z = 4.4;
  52. scene.add(pointLight);
  54. gui.add(pointLight.position, "x").min(0).max(200);
  55. gui.add(pointLight.position, "y").min(0).max(200);
  56. gui.add(pointLight.position, "z").min(0).max(200);
  58. const col = { color: "#00ff00" };
  59. gui.addColor(col, "color").onChange(() => {
  60.   pointLight.color.set(col.color);
  61. });
  63. /**
  64.  * Sizes
  65.  */
  66. const sizes = {
  67.   width: window.innerWidth*.7,
  68.   height: window.innerHeight,
  69. };
  71. window.addEventListener("resize", () => {
  72.   // Update sizes
  73.   sizes.width = window.innerWidth*.7;
  74.   sizes.height = window.innerHeight;
  76.   // Update camera
  77.   camera.aspect = sizes.width / sizes.height;
  78.   camera.updateProjectionMatrix();
  80.   // Update renderer
  81.   renderer.setSize(sizes.width, sizes.height);
  82.   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  83. });
  85. /**
  86.  * Camera
  87.  */
  88. // Base camera
  89. const camera = new THREE.PerspectiveCamera(
  90.   75,
  91.   sizes.width / sizes.height,
  92.   0.1,
  93.   100
  94. );
  96. camera.position.x = 0;
  97. camera.position.y = 0;
  98. camera.position.z = 4;
  99. scene.add(camera);
  101. // Controls
  102. // const controls = new OrbitControls(camera, canvas)
  103. // controls.enableDamping = true
  105. /**
  106.  * Renderer
  107.  */
  108. const renderer = new THREE.WebGLRenderer({
  109.   canvas: canvas,
  110.   alpha: 1,
  111. });
  112. renderer.setSize(sizes.width, sizes.height);
  113. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  115. /**
  116.  * Animate
  117.  */
  119.  document.addEventListener("mousemove", animateTerrain, false);
  120.  let mouseY = 0;
  122.  function animateTerrain(event) {
  123.     mouseY = event.clientY;
  124.  }
  127. const clock = new THREE.Clock();
  129. const tick = () => {
  130.   const elapsedTime = clock.getElapsedTime();
  132.   // Update objects
  133.   plane.rotation.z = 0.5 * elapsedTime;
  134.   plane.material.displacementScale = 1+mouseY*0.0003;
  136.   // Update Orbital Controls
  137.   // controls.update()
  139.   // Render
  140.   renderer.render(scene, camera);
  142.   // Call tick again on the next frame
  143.   window.requestAnimationFrame(tick);
  144. };
  146. tick();

style.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. html,
  7. body {
  8.     height: 100vh;
  9.     font-family: 'Poppins';
  10.     background: rgba(27, 27, 31)
  11. }
  13. .webgl {
  14.     position: fixed;
  15.     top: 0;
  16.     right: 0;
  17.     outline: none;
  18. }
  21. .container {
  22.     position: absolute;
  23.     top: 0;
  24.     left: 0;
  25.     z-index: 1;
  26.     color: white;
  27.     margin: 16em 8em;
  29. }
  31. h1 {
  32.     font-size: 4rem;
  33.     ;
  34. }
  36. p {
  37.     font-size: 1.3rem;
  38.     width: 55%;
  39.     color: rgb(107, 107, 122);
  40. }
  42. button {
  43.     font-size: 1.3rem;
  44.     padding: .5em 1em;
  45.     margin-top: 3em;
  46.     background-color: rgb(0, 114, 255);
  47.     border: none;
  48.     color: white;
  49.     font-weight: bold;
  50.     text-transform: uppercase;
  51. }

GUI调试部分

需要安装包dat.gui

  1. import * as dat from "dat.gui";
  2. // Debug
  3. const gui = new dat.GUI();
  5. //GUI
  7. gui.add(plane.rotation, "x").min(0).max(200);
  8. gui.add(plane.rotation, "y").min(0).max(200);
  9. gui.add(plane.rotation, "z").min(0).max(200);