three实现三维线框物体旋转效果代码-html代码-BFW代码库

three实现三维线框物体旋转效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维线框物体旋转效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0px;
  background:#1d233b;
  overflow: hidden
}
</style>

  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.89.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
  attribute vec3 center; varying vec3 vCenter; void main() { vCenter = center; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
  varying vec3 vCenter; uniform float lineWidth; 
  float edgeFactorTri() { 
  vec3 d = fwidth( vCenter.xyz ); 
  vec3 a3 = smoothstep( vec3( 0.0 ), d * lineWidth, vCenter.xyz ); 
  return min( min( a3.x, a3.y ), a3.z ); } 
void main() {
  float factor = edgeFactorTri();
  if ( factor > 0.8 ) discard; // <===============
  gl_FragColor.rgb = mix( vec3(
  1.0 ), vec3( 0.2 ), factor); 
  gl_FragColor.a = 1.0;
}
</script>


	<script type="text/javascript">

var camera, scene, renderer;

init();
animate();

function init() {

  var geometry, material, mesh;

  var size = 150;

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = 1000;

  scene = new THREE.Scene();
  // Change Background Color
scene.background = new THREE.Color(0x1d233b);


  //



  //

  geometry = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(size, size, size));
  //geometry = new THREE.EdgesGeometry(new THREE.BoxGeometry(size, size, size));
  setupAttributes(geometry);

  material = new THREE.ShaderMaterial({
	uniforms: {
	  lineWidth: {
		value: 3
	  }
	},
	vertexShader: document.getElementById("vertexShader").textContent,
	fragmentShader: document.getElementById("fragmentShader").textContent,
	side: THREE.DoubleSide // <===============
});

  material.ext.........完整代码请登录后点击上方下载按钮下载查看