master

分支 (1)

管理

管理

master

tree.js-demo
/
CullFaceFront.html

<html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <title>threejs 剔除效果</title>
	  <script src="http://threejs.outsidelook.cn/r89/source/build/three.js"></script>
	  <script src="http://static.outsidelook.cn/js/lib/jquery/jquery-3.1.0.min.js"></script>
	  <style>
	    html,body,canvas{
		  width:100%;
		  height:100%;
		}
	  </style>


</head>
   <body>

      <script type="text/javascript" >
      	let camera,scene,renderer;
      	let width = window.innerWidth,height=window.innerHeight;
      	function init(){
      		scene =  new THREE.Scene();
      		camera = new THREE.PerspectiveCamera(45,width/height,100,1000);
      		camera.position.z = 100;
      		camera.lookAt(new THREE.Vector3(0,0,0));//相机朝向原点
      		scene.add(camera);
      		renderer = new THREE.WebGLRenderer({antialias:true});
      		renderer.setSize(width,height);
      		renderer.setClearColor(0xffffff);
      		renderer.setFaceCulling(THREE.CullFaceFront,THREE.FrontFaceDirectionCW);
      		document.body.appendChild(renderer.domElement);

      	}
      	function createShapes(){
      		createShapeList();
      	}
      	function render(){
      		requestAnimationFrame(render);
      		mesh.rotation.y+=0.01;//每帧网格模型的沿y轴旋转0.05弧度
      		renderer.render(scene,camera);
      	}
      	function run(){
      		init();
      		createShapes();
      		render();
      	}
      	run();
      	function createShapeList(){
      		let geometry = new THREE.BoxGeometry(100,100,100);
      		let materials=[
      			new THREE.MeshBasicMaterial({color:0xff0000}),
      			new THREE.MeshBasicMaterial({color:0x0ff000}),
      			new THREE.MeshBasicMaterial({color:0x00ff00}),
      			new THREE.MeshBasicMaterial({color:0xaaaaaa}),
      			new THREE.MeshBasicMaterial({color:0x0000ff}),
      			new THREE.MeshBasicMaterial({color:0x000000})
      		];
      		let material = new THREE.MultiMaterial(materials);
      		mesh = new THREE.Mesh(geometry,material);
      		mesh.rotation.x = THREE.Math.degToRad(0);
      		scene.add(mesh);
      	}

      </script>
   </body>
</html>