three实现三维球体切片分割网格线条动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维球体切片分割网格线条动画效果代码
代码标签: 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 =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0