<div id="container">
  <div>

<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 vUv;
	void main()
	{
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
    
<script id="fragmentShader" type="x-shader/x-vertex">
  varying vec2 vUv;
  uniform vec3 color1; //渐变1
  uniform vec3 color2; //渐变2
  uniform float power;  //透明范围
  void main( void ) {
    //第一种写法
    vec3 aColor =(1.0-vUv.y)*(color1-color2)+color2;
    //第二种写法
    //vec3 aColor  = mix(color1,color2,vUv.y);
    //第三种写法
    //vec3 aColor =(1.0-vUv.y)*color1+color2*vUv.y;
    float alp =pow((1.0-vUv.y),power);
    gl_FragColor =vec4(aColor,alp);
  }
</script>
html, body {
			height: 100%;
			width: 100%;
		}
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';

import { DRACOLoader } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';
import Stats from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/libs/stats.module.js';


var WIDTH = window.innerWidth;
	var HEIGHT = window.innerHeight;
	var camera, scene, renderer, uniforms;
	var cameraControls, composer, stats, gui, orbitcontrols, controls, Box;
	var clock = new THREE.Clock();
	let mesh
	let next = 0;
	//辅助箭头
	init();
	animate();


	function init() {
		initStats()
		initRenderer();
		initScene();
		initLights();
		initCamera();
		initBox();

		window.addEventListener('resize', onWindowResize, false);
		initHelp();

	}

	function initStats() {
		stats = new Stats();
		document.body.appendChild(stats.dom);
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.left = '0px';
		stats.domElement.style.top = '0px';
	}

	function initRenderer() {
		var container = document.getElementById('container');
		renderer = new THREE.WebGLRenderer({antialias: true, alpha: true, logarithmicDepthBuffer: true});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(WIDTH, HEIGHT);

		// renderer.setClearColor(0x092b59)
		container.appendChild(renderer.domElement);
	}

	function initScene() {
		scene = new THREE.Scene();
		// scene.background = new THREE.Color(0x092b59);
		scene.background = new THREE.Color(0x000000);
	}

	function initCamera() {
		camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 100000);
		// 确定相机位置 并将相机指向场景中心
		camera.position.set(23,68,175);
		camera.lookAt(scene.position);
		orbitcontrols = new OrbitControls(camera, renderer.domElement);
		orbitcontrols.addEventListener('change', printPosition);
	}

	function printPosition() {
		console.info("X=" + camera.position.x);
		console.info("Y=" + camera.position.y);
		console.info("Z=" + camera.position.z);
		// console.info(cameraControls.target)
	}

	function initLights() {
		scene.add(new THREE.AmbientLight(0x444444, 1));
		var light = new THREE.PointLight(0xffffff);
		light.position.set(0, 50, 0);
		light.castShadow = true;
		scene.add(light);
	}

	function initBox() {

		var uniforms = {
			color1: {
				value: new THREE.Color('#0eb3ff')
			},
			color2: {
				value: new THREE.Color('#0eb3ff')
			},
			power: {
				value: 2.0
			},

		};
		var material = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: document.getElementById('vertexShader').textContent,
			fragmentShader: document.getElementById('fragmentShader').textContent,
			side:THREE.DoubleSide,
			transparent:true
		})

		var geometry = new THREE.PlaneGeometry(200, 100);
		mesh = new THREE.Mesh(geometry, material);
		scene.add(mesh);
	}



	function initHelp() {
		//AxisHelper是一个坐标轴对象,添加到场景中我们就可以看到世界坐标系的具体位置
		var axes = new THREE.AxesHelper(10000);
		scene.add(axes);
	}

	function onError() {
		alert("报错了");
	}


	function onWindowResize() {
		camera.aspect = container.offsetWidth / container.offsetHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}


	function animate() {
		stats.update();
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}


// https://codepen.io/tengj/pen/YNGYMw

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.