裁切平面（clipping plane）
生活随笔
收集整理的這篇文章主要介紹了
裁切平面（clipping plane）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
裁切平面（clipping plane）
- 示例
- HTML
更多有趣示例 盡在知屋安磚社區
示例
HTML
<!DOCTYPE html> <html lang="en"><head><title>three.js webgl - clipIntersection</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {margin: 0px;background-color: #000000;overflow: hidden;}</style></head><body><script src="https://threejs.org/build/three.js"></script><script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script><script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.min.js"></script><script>var camera, scene, renderer;var params = {clipIntersection: true,planeConstant: 0,showHelpers: false};var clipPlanes = [new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 )];var clipPlane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 )init();render();function init() {renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.localClippingEnabled = true;document.body.appendChild( renderer.domElement );scene = new THREE.Scene();camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.8, 200 );camera.position.set( - 1.5, 2.5, 3.0 );var controls = new THREE.OrbitControls( camera, renderer.domElement );controls.addEventListener( 'change', render ); // use only if there is no animation loopcontrols.minDistance = 1;controls.maxDistance = 10;controls.enablePan = false;var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );light.position.set( - 1.25, 1, 1.25 );scene.add( light );// var helper = new THREE.CameraHelper( light.shadow.camera );// scene.add( helper );//var group = new THREE.Group();for ( var i = 1; i <= 50; i += 2 ) {var geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );var material = new THREE.MeshLambertMaterial( {color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),side: THREE.DoubleSide,clippingPlanes: clipPlanes,clipIntersection: params.clipIntersection} );group.add( new THREE.Mesh( geometry, material ) );}scene.add( group );// helpersvar helpers = new THREE.Group();helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );helpers.visible = false;scene.add( helpers );// guivar gui = new dat.GUI();gui.add( params, 'clipIntersection' ).name( 'clip intersection' ).onChange( function ( value ) {var children = group.children;for ( var i = 0; i < children.length; i ++ ) {children[ i ].material.clipIntersection = value;}render();} );gui.add( params, 'planeConstant', - 1, 1 ).step( 0.01 ).name( 'plane constant' ).onChange( function ( value ) {for ( var j = 0; j < clipPlanes.length; j ++ ) {clipPlanes[ j ].constant = value;}render();} );gui.add( params, 'showHelpers' ).name( 'show helpers' ).onChange( function ( value ) {helpers.visible = value;render();} );//window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );render();}function render() {renderer.render( scene, camera );}</script></body> </html>總結
以上是生活随笔為你收集整理的裁切平面（clipping plane）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LintCode_138——子数组和为零
- 下一篇： 软件工程项目之随心所欲—食堂点菜系统