three实现三维球体切片分割网格线条动画效果代码-html代码-BFW代码库

three实现三维球体切片分割网格线条动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维球体切片分割网格线条动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
  margin: 0;
}

.webgl {
  position: fixed;
  left: 0;
  top: 0;
  outline: none;
}
</style>




</head>

<body  >
  <canvas class="webgl"></canvas>

  
      <script type="module">
import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

// Object
const geometry = new THREE.SphereGeometry(1.5, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);

const shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    uColor: {
      value: new THREE.Color(0xffffff) },

    uTime: {
      value: 0 } },


  vertexShader: `
            // attribute vec2 uv;
            attribute float scale;
            uniform float uTime;
            
            varying vec2 vUv;

            const float PI = 3.1415926535897932384626433832795;

            void main(){
              vUv = uv;

              vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
              // gl_PointSize = scale * (300.0 / - mvPosition.z);
              gl_PointSize = 4.0;
              gl_Position = projectionMatrix * mvPosition;
              
              // gl_Position.x += sin(position.x + uTime) * 0.1;
              // gl_Position.x += sin(uTime);
              gl_Position.y += tan(position.y + uTime) * 0.1;
              // gl_Position.z += cos(position.z + uTime) * 0.1;

              // gl_Position.x += tan(position.x + uTime) * 0.1;
    .........完整代码请登录后点击上方下载按钮下载查看