|
@@ -14,52 +14,12 @@
|
|
|
a {
|
|
a {
|
|
|
color: #08f;
|
|
color: #08f;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- #controls {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- text-align:left;
|
|
|
|
|
- top: 60px;
|
|
|
|
|
- left: 5px;
|
|
|
|
|
- padding: 5px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .control { margin-bottom: 3px; }
|
|
|
|
|
-
|
|
|
|
|
- input { width: 50px; }
|
|
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
<div id="container"></div>
|
|
<div id="container"></div>
|
|
|
<div id="info">
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - raycast texture<br>Left to right: buffer geometry - geometry - indexed buffer geometry
|
|
|
|
|
- <fieldset id="controls">
|
|
|
|
|
- <legend>Circle</legend>
|
|
|
|
|
- <div class="control">
|
|
|
|
|
- WrapS : <select id="setwrapS">
|
|
|
|
|
- <option value="1001">ClampToEdgeWrapping</option>
|
|
|
|
|
- <option value="1000" selected>RepeatWrapping</option>
|
|
|
|
|
- <option value="1002">MirroredRepeatWrapping</option>
|
|
|
|
|
- </select>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="control">
|
|
|
|
|
- WrapT : <select id="setwrapT">
|
|
|
|
|
- <option value="1001">ClampToEdgeWrapping</option>
|
|
|
|
|
- <option value="1000" selected>RepeatWrapping</option>
|
|
|
|
|
- <option value="1002">MirroredRepeatWrapping</option>
|
|
|
|
|
- </select>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="control">
|
|
|
|
|
- Offset : X <input id="setOffsetU" type="number" value="0" step="0.05" />
|
|
|
|
|
- Y <input id="setOffsetV" type="number" value="0" step="0.05" /><br />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="control">
|
|
|
|
|
- Repeat : X <input id="setRepeatU" type="number" value="1" step="0.1" />
|
|
|
|
|
- Y <input id="setRepeatV" type="number" value="1" step="0.1" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="control">
|
|
|
|
|
- Rotation : <input id="setRotation" type="number" value="0" step="0.1" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </fieldset>
|
|
|
|
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - raycast texture
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Import maps polyfill -->
|
|
<!-- Import maps polyfill -->
|
|
@@ -78,6 +38,25 @@
|
|
|
|
|
|
|
|
import * as THREE from 'three';
|
|
import * as THREE from 'three';
|
|
|
|
|
|
|
|
|
|
+ import { GUI } from './jsm/libs/lil-gui.module.min.js';
|
|
|
|
|
+
|
|
|
|
|
+ const WRAPPING = {
|
|
|
|
|
+ 'RepeatWrapping': THREE.RepeatWrapping,
|
|
|
|
|
+ 'ClampToEdgeWrapping': THREE.ClampToEdgeWrapping,
|
|
|
|
|
+ 'MirroredRepeatWrapping': THREE.MirroredRepeatWrapping
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ wrapS: THREE.RepeatWrapping,
|
|
|
|
|
+ wrapT: THREE.RepeatWrapping,
|
|
|
|
|
+ offsetX: 0,
|
|
|
|
|
+ offsetY: 0,
|
|
|
|
|
+ repeatX: 1,
|
|
|
|
|
+ repeatY: 1,
|
|
|
|
|
+ rotation: 0,
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
function CanvasTexture( parentTexture ) {
|
|
function CanvasTexture( parentTexture ) {
|
|
|
|
|
|
|
|
this._canvas = document.createElement( 'canvas' );
|
|
this._canvas = document.createElement( 'canvas' );
|
|
@@ -289,13 +268,19 @@
|
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
|
container.addEventListener( 'mousemove', onMouseMove );
|
|
container.addEventListener( 'mousemove', onMouseMove );
|
|
|
|
|
|
|
|
- document.getElementById( 'setwrapS' ).addEventListener( 'change', setwrapS );
|
|
|
|
|
- document.getElementById( 'setwrapT' ).addEventListener( 'change', setwrapT );
|
|
|
|
|
- document.getElementById( 'setOffsetU' ).addEventListener( 'change', setOffsetU );
|
|
|
|
|
- document.getElementById( 'setOffsetV' ).addEventListener( 'change', setOffsetV );
|
|
|
|
|
- document.getElementById( 'setRepeatU' ).addEventListener( 'change', setRepeatU );
|
|
|
|
|
- document.getElementById( 'setRepeatV' ).addEventListener( 'change', setRepeatV );
|
|
|
|
|
- document.getElementById( 'setRotation' ).addEventListener( 'change', setRotation );
|
|
|
|
|
|
|
+ //
|
|
|
|
|
+
|
|
|
|
|
+ const gui = new GUI();
|
|
|
|
|
+ gui.title( 'Circle Texture Settings' );
|
|
|
|
|
+
|
|
|
|
|
+ gui.add( params, 'wrapS', WRAPPING ).onChange( setwrapS );
|
|
|
|
|
+ gui.add( params, 'wrapT', WRAPPING ).onChange( setwrapT );
|
|
|
|
|
+ gui.add( params, 'offsetX', 0, 5 );
|
|
|
|
|
+ gui.add( params, 'offsetY', 0, 5 );
|
|
|
|
|
+ gui.add( params, 'repeatX', 0, 5 );
|
|
|
|
|
+ gui.add( params, 'repeatY', 0, 5 );
|
|
|
|
|
+ gui.add( params, 'rotation', 0, 2 * Math.PI );
|
|
|
|
|
+ gui.open();
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -347,53 +332,35 @@
|
|
|
function render() {
|
|
function render() {
|
|
|
|
|
|
|
|
requestAnimationFrame( render );
|
|
requestAnimationFrame( render );
|
|
|
- renderer.render( scene, camera );
|
|
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function setwrapS( event ) {
|
|
|
|
|
|
|
+ // update texture parameters
|
|
|
|
|
|
|
|
- circleTexture.wrapS = parseFloat( event.target.value );
|
|
|
|
|
- circleTexture.needsUpdate = true;
|
|
|
|
|
|
|
+ circleTexture.offset.x = params.offsetX;
|
|
|
|
|
+ circleTexture.offset.y = params.offsetY;
|
|
|
|
|
+ circleTexture.repeat.x = params.repeatX;
|
|
|
|
|
+ circleTexture.repeat.y = params.repeatY;
|
|
|
|
|
+ circleTexture.rotation = params.rotation;
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ //
|
|
|
|
|
|
|
|
- function setwrapT( event ) {
|
|
|
|
|
-
|
|
|
|
|
- circleTexture.wrapT = parseFloat( event.target.value );
|
|
|
|
|
- circleTexture.needsUpdate = true;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function setOffsetU( event ) {
|
|
|
|
|
-
|
|
|
|
|
- circleTexture.offset.x = parseFloat( event.target.value );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function setOffsetV( event ) {
|
|
|
|
|
-
|
|
|
|
|
- circleTexture.offset.y = parseFloat( event.target.value );
|
|
|
|
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function setRepeatU( event ) {
|
|
|
|
|
|
|
+ function setwrapS( value ) {
|
|
|
|
|
|
|
|
- circleTexture.repeat.x = parseFloat( event.target.value );
|
|
|
|
|
|
|
+ circleTexture.wrapS = value;
|
|
|
|
|
+ circleTexture.needsUpdate = true;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function setRepeatV( event ) {
|
|
|
|
|
|
|
+ function setwrapT( value ) {
|
|
|
|
|
|
|
|
- circleTexture.repeat.y = parseFloat( event.target.value );
|
|
|
|
|
|
|
+ circleTexture.wrapT = value;
|
|
|
|
|
+ circleTexture.needsUpdate = true;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function setRotation( event ) {
|
|
|
|
|
-
|
|
|
|
|
- circleTexture.rotation = parseFloat( event.target.value );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
Michael Herzog