|
@@ -4,25 +4,7 @@
|
|
|
<title>three.js webgl - clipping stencil</title>
|
|
<title>three.js webgl - clipping stencil</title>
|
|
|
<meta charset="utf-8">
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <style>
|
|
|
|
|
- body {
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-family:Monospace;
|
|
|
|
|
- font-size:13px;
|
|
|
|
|
- text-align:center;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
-
|
|
|
|
|
- background-color: #000000;
|
|
|
|
|
- margin: 0px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- }
|
|
|
|
|
- #info {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0px; width: 100%;
|
|
|
|
|
- padding: 5px;
|
|
|
|
|
- }
|
|
|
|
|
- </style>
|
|
|
|
|
|
|
+ <link type="text/css" rel="stylesheet" href="main.css">
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
@@ -34,7 +16,7 @@
|
|
|
import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
|
import Stats from './jsm/libs/stats.module.js';
|
|
import Stats from './jsm/libs/stats.module.js';
|
|
|
|
|
|
|
|
- var camera, scene, renderer, startTime, object, stats;
|
|
|
|
|
|
|
+ var camera, scene, renderer, object, stats;
|
|
|
var planes, planeObjects, planeHelpers;
|
|
var planes, planeObjects, planeHelpers;
|
|
|
var clock;
|
|
var clock;
|
|
|
|
|
|
|
@@ -156,7 +138,7 @@
|
|
|
|
|
|
|
|
var poGroup = new THREE.Group();
|
|
var poGroup = new THREE.Group();
|
|
|
var plane = planes[ i ];
|
|
var plane = planes[ i ];
|
|
|
- var stencilGroup = createPlaneStencilGroup( geometry, plane, i + 1 )
|
|
|
|
|
|
|
+ var stencilGroup = createPlaneStencilGroup( geometry, plane, i + 1 );
|
|
|
|
|
|
|
|
// plane is clipped by the other clipping planes
|
|
// plane is clipped by the other clipping planes
|
|
|
var planeMat =
|
|
var planeMat =
|
|
@@ -246,7 +228,7 @@
|
|
|
var planeX = gui.addFolder( 'planeX' );
|
|
var planeX = gui.addFolder( 'planeX' );
|
|
|
planeX.add( params.planeX, 'displayHelper' ).onChange( v => planeHelpers[ 0 ].visible = v );
|
|
planeX.add( params.planeX, 'displayHelper' ).onChange( v => planeHelpers[ 0 ].visible = v );
|
|
|
planeX.add( params.planeX, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 0 ].constant = d );
|
|
planeX.add( params.planeX, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 0 ].constant = d );
|
|
|
- planeX.add( params.planeX, 'negated' ).onChange( d => {
|
|
|
|
|
|
|
+ planeX.add( params.planeX, 'negated' ).onChange( () => {
|
|
|
|
|
|
|
|
planes[ 0 ].negate();
|
|
planes[ 0 ].negate();
|
|
|
params.planeX.constant = planes[ 0 ].constant;
|
|
params.planeX.constant = planes[ 0 ].constant;
|
|
@@ -257,7 +239,7 @@
|
|
|
var planeY = gui.addFolder( 'planeY' );
|
|
var planeY = gui.addFolder( 'planeY' );
|
|
|
planeY.add( params.planeY, 'displayHelper' ).onChange( v => planeHelpers[ 1 ].visible = v );
|
|
planeY.add( params.planeY, 'displayHelper' ).onChange( v => planeHelpers[ 1 ].visible = v );
|
|
|
planeY.add( params.planeY, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 1 ].constant = d );
|
|
planeY.add( params.planeY, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 1 ].constant = d );
|
|
|
- planeY.add( params.planeY, 'negated' ).onChange( d => {
|
|
|
|
|
|
|
+ planeY.add( params.planeY, 'negated' ).onChange( () => {
|
|
|
|
|
|
|
|
planes[ 1 ].negate();
|
|
planes[ 1 ].negate();
|
|
|
params.planeY.constant = planes[ 1 ].constant;
|
|
params.planeY.constant = planes[ 1 ].constant;
|
|
@@ -268,7 +250,7 @@
|
|
|
var planeZ = gui.addFolder( 'planeZ' );
|
|
var planeZ = gui.addFolder( 'planeZ' );
|
|
|
planeZ.add( params.planeZ, 'displayHelper' ).onChange( v => planeHelpers[ 2 ].visible = v );
|
|
planeZ.add( params.planeZ, 'displayHelper' ).onChange( v => planeHelpers[ 2 ].visible = v );
|
|
|
planeZ.add( params.planeZ, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 2 ].constant = d );
|
|
planeZ.add( params.planeZ, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 2 ].constant = d );
|
|
|
- planeZ.add( params.planeZ, 'negated' ).onChange( d => {
|
|
|
|
|
|
|
+ planeZ.add( params.planeZ, 'negated' ).onChange( () => {
|
|
|
|
|
|
|
|
planes[ 2 ].negate();
|
|
planes[ 2 ].negate();
|
|
|
params.planeZ.constant = planes[ 2 ].constant;
|
|
params.planeZ.constant = planes[ 2 ].constant;
|
Mugen87