three.js从入门到精通系列教程030 - three.js创建五彩斑斓的旋转立方体

原创

已于 2024-01-21 08:50:41 修改 · 498 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #three.js #数字孪生 #元宇宙

于 2024-01-21 08:46:05 首次发布

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>three.js从入门到精通系列教程030 - three.js创建五彩斑斓的旋转立方体</title>
  <script src="ThreeJS/three.js"></script>
  <script src="ThreeJS/jquery.js"></script>
</head>

<body>
  <div id="myContainer"></div>
  <script id="myVertexShader" type="x-shader/x-vertex">
   //创建顶点着色器
    varying vec2 vUv;
    void main() {
      vUv = uv;
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_Position = projectionMatrix * mvPosition;
    }
</script>
  <script id="myFragmentShader" type="x-shader/x-fragment">
    //创建片元着色器
    uniform float time;
    uniform vec2 resolution;
    varying vec2 vUv;
    void main( void ) {
      vec2 position = -1.0 + 2.0 * vUv;
      float red = abs( sin( position.x * position.y + time / 5.0 ) );
      float green = abs( sin( position.x * position.y + time / 4.0 ) );