├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── example
├── favicon.svg
├── index.html
├── package.json
├── public
│ ├── Parrot.glb
│ ├── Stork.glb
│ └── mesh.glb
├── src
│ ├── App.tsx
│ ├── Lights.tsx
│ ├── Model.tsx
│ ├── index.css
│ ├── index.tsx
│ └── useMesh.tsx
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
├── package.json
├── rollup.config.js
├── src
├── Scissor.tsx
├── ScissorTunnel.tsx
├── ScissorWindow.tsx
├── index.ts
└── useScissorEvents.tsx
├── tsconfig.json
└── yarn.lock
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "node": true
6 | },
7 | "extends": [
8 | "prettier",
9 | "prettier/react",
10 | "prettier/@typescript-eslint",
11 | "plugin:prettier/recommended",
12 | "plugin:react-hooks/recommended",
13 | "plugin:import/errors",
14 | "plugin:import/warnings",
15 | "prettier",
16 | "prettier/react",
17 | "prettier/@typescript-eslint"
18 | ],
19 | "plugins": [
20 | "@typescript-eslint",
21 | "react",
22 | "react-hooks",
23 | "import",
24 | "jest",
25 | "prettier"
26 | ],
27 | "parser": "@typescript-eslint/parser",
28 | "parserOptions": {
29 | "ecmaFeatures": {
30 | "jsx": true
31 | },
32 | "ecmaVersion": 2018,
33 | "sourceType": "module",
34 | "rules": {
35 | "curly": ["warn", "multi-line", "consistent"],
36 | "no-console": "off",
37 | "no-empty-pattern": "warn",
38 | "no-duplicate-imports": "error",
39 | "import/no-unresolved": "off",
40 | "import/export": "error",
41 | // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#eslint-plugin-import
42 | // We recommend you do not use the following import/* rules, as TypeScript provides the same checks as part of standard type checking:
43 | "import/named": "off",
44 | "import/namespace": "off",
45 | "import/default": "off",
46 | "no-unused-vars": [
47 | "warn",
48 | { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
49 | ],
50 | "@typescript-eslint/no-unused-vars": [
51 | "warn",
52 | { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
53 | ],
54 | "@typescript-eslint/no-use-before-define": "off",
55 | "@typescript-eslint/no-empty-function": "off",
56 | "@typescript-eslint/no-empty-interface": "off",
57 | "@typescript-eslint/no-explicit-any": "off",
58 | "jest/consistent-test-it": [
59 | "error",
60 | { "fn": "it", "withinDescribe": "it" }
61 | ]
62 | }
63 | },
64 | "settings": {
65 | "react": {
66 | "version": "detect"
67 | },
68 | "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
69 | "import/parsers": {
70 | "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
71 | },
72 | "import/resolver": {
73 | "node": {
74 | "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
75 | "paths": ["src"]
76 | },
77 | "alias": {
78 | "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
79 | "map": [["react-three-fiber", "./src/targets/web.tsx"]]
80 | }
81 | }
82 | },
83 | "overrides": [
84 | {
85 | "files": ["src"],
86 | "parserOptions": {
87 | "project": "./tsconfig.json"
88 | }
89 | }
90 | ]
91 | }
92 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "trailingComma": "es5",
4 | "singleQuote": true,
5 | "tabWidth": 2,
6 | "printWidth": 120
7 | }
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Poimandres
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | react-three-scissor
4 | Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.
5 |
6 |
9 |
Depricated! Use <View />react-three-drei
10 |
11 |
12 |
15 | Show depricated readme
16 |
17 | `scissor` lets you render an infinite number of individual scenes (limited by your processing capability of course) on one single WebGL context and canvas.
18 |
19 | It is as easy as:
20 |
21 | ```jsx
22 |
23 | // Add Scissored components to the canvas
24 |
26 |
27 | // Define sissor windows.
28 |
29 |
31 |
32 |
33 |
35 |
36 | // ... Any number of windows
37 | ```
38 |
39 | ## Why this?
40 |
41 | Havigng multiple WebGL contests within one webpage is generally a bad idea because (from [ThreeJS manual](https://threejs.org/manual/?q=mul#en/multiple-scenes)):
42 |
43 | - **The browser limits how many WebGL contexts you can have.** Typically that limit is around 8 of them. After which, the oldest ones lose context.
44 | - **WebGL resources can not be shared across contexts.** That means expensive operation like loading models and compiling shaders would have to be repeated.
45 |
46 | Instead, we create the illusion of multiple canvases by having one large one and drawing on very speciifc parts of it. This process is called Scissoring.
47 |
48 | ## Getting Started
49 |
50 | ### ⚡️ Jump Start
51 |
52 | ```shell
53 | # Install the entire library
54 | npm install @react-three/scissor
55 | ```
56 |
57 | ```jsx
58 | import { Box } from '@react-three/drei'
59 | import { Scissor, ScissorWindow } from '@react-three/scissor'
60 |
61 | export default function App() {
62 | return (
63 | <>
64 |
65 |
67 |
68 |
69 |
70 |
71 |
73 |
74 |
75 | {/* Any R3F Components */}
76 |
77 |
78 | )
79 | }
80 | ```
81 |
82 | It's as simple as that to create scroll-in animations.
83 |
84 | ### 💅 Styling Windows
85 |
86 | ### CSS
87 |
88 | `ScissorWindow` can be styled, positioned and scaled with any CSS property.
89 |
90 | ```jsx
91 |
97 | {/* Any R3F Components */}
98 |
99 | ```
100 |
101 | Or,
102 |
103 | ```css
104 | .window {
105 | width: 420px;
106 | height: 420px;
107 | border: 2px solid black;
108 |
109 | position: absolute;
110 | top: 0;
111 | ...;
112 | }
113 | ```
114 |
115 | ### Styled components
116 |
117 | It can also be wrapped in `styled-component` definitions like so:
118 |
119 | ```js
120 | const StyledScissorWindow = styled(ScissorWindow)`
121 | width: 420px;
122 | height: 420px;
123 | border: 2px solid black;
124 |
125 | position: absolute;
126 | top: 0;
127 | ...
128 | `
129 | ```
130 |
131 | ## Roadmap
132 |
133 | Major TODOs
134 |
135 | - [ ] Controls support
136 | - [ ] `
141 |
--------------------------------------------------------------------------------
/example/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-three-scissor example
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "@react-spring/core": "^9.2.4",
11 | "@react-spring/three": "^9.2.4",
12 | "@react-three/drei": "^7.2.1",
13 | "framer-motion": "^6.2.1",
14 | "leva": "^0.9.18",
15 | "react": "^17.0.2",
16 | "react-dom": "^17.0.2",
17 | "styled-components": "^5.3.0"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^17.0.14",
21 | "@types/react-router-dom": "^5.1.8",
22 | "@types/styled-components": "^5.1.11",
23 | "@vitejs/plugin-react-refresh": "^1.3.5",
24 | "typescript": "^4.3.5",
25 | "vite": "^2.4.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/example/public/Parrot.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmndrs/react-three-scissor/1d7b50e8ddd886d05eb5b63df887df4f541c3a17/example/public/Parrot.glb
--------------------------------------------------------------------------------
/example/public/Stork.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmndrs/react-three-scissor/1d7b50e8ddd886d05eb5b63df887df4f541c3a17/example/public/Stork.glb
--------------------------------------------------------------------------------
/example/public/mesh.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmndrs/react-three-scissor/1d7b50e8ddd886d05eb5b63df887df4f541c3a17/example/public/mesh.glb
--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react'
2 | import { Canvas } from '@react-three/fiber'
3 | import { Scissor, ScissorWindow } from '@react-three/scissor'
4 | import styled from 'styled-components'
5 | import { Leva, useControls } from 'leva'
6 |
7 | import { AnimatePresence, motion } from 'framer-motion'
8 |
9 | import useMesh from './useMesh'
10 | import Model from './Model'
11 |
12 | const variants = {
13 | container: {
14 | hidden: {
15 | scale: 0,
16 | transition: {
17 | staggerChildren: 0.05,
18 | },
19 | },
20 | show: {
21 | scale: 1,
22 | transition: {
23 | staggerChildren: 0.05,
24 | },
25 | },
26 | },
27 | item: {
28 | hidden: { scale: 0 },
29 | show: { scale: 1 },
30 | },
31 | }
32 |
33 | function Animals() {
34 | const { nMesh } = useControls({
35 | nMesh: {
36 | min: 1,
37 | max: 100,
38 | value: 1,
39 | label: 'Number of meshes',
40 | },
41 | })
42 | const meshes = useMesh(nMesh)
43 |
44 | return (
45 |
46 |
47 | {meshes.map((mesh, i) => (
48 |
49 |
50 |
52 |
53 | ))}
54 |
55 |
56 | )
57 | }
58 |
59 | export default function App() {
60 | return (
61 | <>
62 |
63 |
64 | react-three-scissor
65 | Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.
66 |
68 |
69 |
70 |
71 |
73 |
74 |
75 |
77 |
78 | )
79 | }
80 |
81 | const Copy = styled.section`
82 | width: 100%;
83 | text-align: center;
84 | font-family: 'Recursive', system-ui, sans-serif;
85 |
86 | display: flex;
87 | justify-content: center;
88 | align-items: center;
89 | flex-direction: column;
90 |
91 | padding: 16px 32px;
92 |
93 | & > main {
94 | max-width: 600px;
95 | }
96 |
97 | h1 {
98 | font-style: italic;
99 | }
100 |
101 | p {
102 | font-weight: lighter;
103 | opacity: 40%;
104 | }
105 | `
106 |
107 | const Grid = styled(motion.section)`
108 | padding: 16px 32px;
109 |
110 | height: 100%;
111 | width: 100%;
112 | display: flex;
113 | flex-wrap: wrap;
114 | gap: 0.5em;
115 | align-items: flex-start;
116 | justify-content: center;
117 | `
118 |
119 | const GridCell = styled(motion.div)`
120 | border: 1px solid black;
121 | border-radius: 5px;
122 |
123 | width: 200px;
124 | height: 200px;
125 | `
126 | const StyledScissorWindow = styled(ScissorWindow)`
127 | width: 100%;
128 | height: 100%;
129 | `
130 |
--------------------------------------------------------------------------------
/example/src/Lights.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 |
3 | export default function Lights() {
4 | const ref = useRef()
5 |
6 | // useHelper(ref, DirectionalLightHelper);
7 |
8 | return (
9 |
10 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/example/src/Model.tsx:
--------------------------------------------------------------------------------
1 | import { Center, Environment, OrbitControls, OrbitControlsProps, PerspectiveCamera, useCursor } from '@react-three/drei'
2 | import { useSpring, a } from '@react-spring/three'
3 | import React, { useEffect, useRef, useState } from 'react'
4 | import { MathUtils, Mesh } from 'three'
5 | import Lights from './Lights'
6 |
7 | export default function Model({ mesh }: { mesh: Mesh }) {
8 | const [hovered, setHover] = useState(false)
9 | const [active, setActive] = useState(false)
10 |
11 | useCursor(hovered, 'pointer', 'auto')
12 |
13 | const springs = useSpring({ scale: active ? 1.5 : 1 })
14 |
15 | return (
16 |
17 | setHover(true)}
23 | onPointerOut={() => setHover(false)}
24 | onClick={() => setActive(!active)}
25 | >
26 |
29 |
30 |
32 |
33 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | /*styles.css*/
2 |
3 | @font-face {
4 | font-family: 'Recursive';
5 | font-style: normal;
6 | font-weight: 500;
7 | font-display: swap;
8 | src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
9 | format('woff2');
10 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
11 | U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
18 | html,
19 | body,
20 | #root {
21 | width: 100%;
22 | height: auto;
23 | margin: 0;
24 | padding: 0;
25 | }
26 |
27 | body {
28 | background: #f0f0f0;
29 | font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto,
30 | segoe ui, arial, sans-serif;
31 | }
32 |
--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.render(",
37 | "license": "MIT",
38 | "bugs": {
39 | "url": "https://github.com/pmndrs/react-three-scissor/issues"
40 | },
41 | "devDependencies": {
42 | "@babel/core": "7.16.0",
43 | "@babel/plugin-proposal-class-properties": "^7.16.0",
44 | "@babel/plugin-transform-modules-commonjs": "7.16.0",
45 | "@babel/plugin-transform-parameters": "7.16.0",
46 | "@babel/plugin-transform-runtime": "7.16.0",
47 | "@babel/plugin-transform-template-literals": "7.16.0",
48 | "@babel/preset-env": "7.16.0",
49 | "@babel/preset-react": "7.16.0",
50 | "@babel/preset-typescript": "^7.16.0",
51 | "@react-three/fiber": "^7.0.25",
52 | "@rollup/plugin-babel": "^5.3.0",
53 | "@rollup/plugin-node-resolve": "^13.0.6",
54 | "@types/jest": "^27.0.2",
55 | "@types/node": "^16.11.6",
56 | "@types/react": "^17.0.33",
57 | "@types/react-dom": "^17.0.10",
58 | "@types/react-test-renderer": "^17.0.1",
59 | "@types/three": "^0.136.1",
60 | "@typescript-eslint/eslint-plugin": "^5.3.0",
61 | "@typescript-eslint/parser": "^5.3.0",
62 | "eslint": "^8.1.0",
63 | "eslint-config-prettier": "^8.3.0",
64 | "eslint-import-resolver-alias": "^1.1.2",
65 | "eslint-plugin-import": "^2.25.2",
66 | "eslint-plugin-jest": "^25.2.2",
67 | "eslint-plugin-prettier": "^4.0.0",
68 | "eslint-plugin-react": "^7.26.1",
69 | "eslint-plugin-react-hooks": "^4.2.0",
70 | "husky": "^7.0.4",
71 | "lint-staged": "^11.2.6",
72 | "prettier": "^2.4.1",
73 | "react": "^17.0.1",
74 | "rollup": "^2.59.0",
75 | "rollup-plugin-size-snapshot": "^0.12.0",
76 | "rollup-plugin-terser": "^7.0.2",
77 | "three": "^0.136.0",
78 | "tunnel-rat": "^0.0.2",
79 | "typescript": "^4.4.4",
80 | "zustand": "^3.6.9"
81 | },
82 | "dependencies": {}
83 | }
84 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import babel from '@rollup/plugin-babel'
3 | import resolve from '@rollup/plugin-node-resolve'
4 |
5 | const root = process.platform === 'win32' ? path.resolve('/') : '/'
6 | const external = (id) => !id.startsWith('.') && !id.startsWith(root)
7 | const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']
8 |
9 | const getBabelOptions = ({ useESModules }) => ({
10 | babelrc: false,
11 | extensions,
12 | exclude: '**/node_modules/**',
13 | babelHelpers: 'runtime',
14 | presets: [
15 | [
16 | '@babel/preset-env',
17 | {
18 | include: [
19 | '@babel/plugin-proposal-optional-chaining',
20 | '@babel/plugin-proposal-nullish-coalescing-operator',
21 | '@babel/plugin-proposal-numeric-separator',
22 | '@babel/plugin-proposal-logical-assignment-operators',
23 | ],
24 | bugfixes: true,
25 | loose: true,
26 | modules: false,
27 | targets: '> 1%, not dead, not ie 11, not op_mini all',
28 | },
29 | ],
30 | '@babel/preset-react',
31 | '@babel/preset-typescript',
32 | ],
33 | plugins: [['@babel/transform-runtime', { regenerator: false, useESModules }]],
34 | })
35 |
36 | export default [
37 | {
38 | input: `./src/index.ts`,
39 | output: { file: `dist/index.js`, format: 'esm' },
40 | external,
41 | plugins: [babel(getBabelOptions({ useESModules: true })), resolve({ extensions })],
42 | },
43 | {
44 | input: `./src/index.ts`,
45 | output: { file: `dist/index.cjs.js`, format: 'cjs' },
46 | external,
47 | plugins: [babel(getBabelOptions({ useESModules: false })), resolve({ extensions })],
48 | },
49 | ]
50 |
--------------------------------------------------------------------------------
/src/Scissor.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useFrame, useThree } from '@react-three/fiber'
3 | import { useLayoutEffect } from 'react'
4 | import ScissorTunnel from './ScissorTunnel'
5 | import useScissorEvents from './useScissorEvents'
6 | import { Object3D } from 'three'
7 |
8 | export default function Scissor() {
9 | const gl = useThree((s) => s.gl)
10 |
11 | useScissorEvents()
12 | useFrame((state) => {
13 | const { gl, camera } = state
14 |
15 | gl.setScissorTest(false)
16 | gl.clear(true, true)
17 | gl.setScissorTest(true)
18 |
19 | const children = state.scene.children
20 | children.forEach((child: Object3D) => {
21 | if (child.userData.__Scissor) {
22 | // console.log(child.userData.__Scissor);
23 | const element = child.userData.__Scissor as HTMLDivElement
24 | const rect = element.getBoundingClientRect()
25 | const { left, right, top, bottom, width, height } = rect
26 |
27 | const isOffscreen =
28 | bottom < 0 || top > gl.domElement.clientHeight || right < 0 || left > gl.domElement.clientWidth
29 |
30 | if (!isOffscreen) {
31 | const positiveYUpBottom = gl.domElement.clientHeight - bottom
32 | gl.setScissor(left, positiveYUpBottom, width, height)
33 | gl.setViewport(left, positiveYUpBottom, width, height)
34 |
35 | // @ts-ignore
36 | camera.aspect = width / height
37 | camera.updateProjectionMatrix()
38 |
39 | gl.render(child, camera)
40 | }
41 | }
42 | })
43 | }, 1)
44 |
45 | useLayoutEffect(() => {
46 | if (gl.domElement.parentElement) {
47 | gl.domElement.parentElement.style.position = 'fixed'
48 | gl.domElement.parentElement.style.top = '0'
49 | gl.domElement.parentElement.style.left = '0'
50 | gl.domElement.parentElement.style.width = '100%'
51 | gl.domElement.parentElement.style.height = '100%'
52 | }
53 | }, [gl])
54 |
55 | return ((set) => ({
14 | scenes: [],
15 | addScene: (scene) => set((s) => ({ scenes: [...s.scenes, scene] })),
16 | }))
17 |
18 | return {
19 | Store: useStore,
20 | In: ({ children }: Props) => {
21 | const addScene = useStore((state) => state.addScene)
22 | useLayoutEffect(() => addScene(children), [])
23 | return null
24 | },
25 | Out: () => {
26 | const scenes = useStore((state) => state.scenes)
27 | return scenes as unknown as ReactElement
28 | },
29 | }
30 | }
31 |
32 | export default tunnel()
33 |
--------------------------------------------------------------------------------
/src/ScissorWindow.tsx:
--------------------------------------------------------------------------------
1 | import React, { useLayoutEffect, useRef, useState } from 'react'
2 | import ScissorTunnel from './ScissorTunnel'
3 |
4 | export default function ScissorWindow({ children, ...rest }: React.PropsWithChildren>) {
5 | const [win, setWindow] = useState()
6 | const ref = useRef(null)
7 |
8 | useLayoutEffect(() => void (ref.current && setWindow(ref.current)), [])
9 |
10 | return (
11 | <>
12 |
13 | {win && (
14 |
15 | {children}
16 |
17 | )}
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Scissor from './Scissor'
2 | import ScissorWindow from './ScissorWindow'
3 |
4 | export { Scissor, ScissorWindow }
5 |
--------------------------------------------------------------------------------
/src/useScissorEvents.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useThree } from '@react-three/fiber'
3 | import { DomEvent } from '@react-three/fiber/dist/declarations/src/core/events'
4 | import { Color, Object3D, Scene, Texture } from 'three'
5 | import ScissorTunnel from './ScissorTunnel'
6 |
7 | export default function useScissorEvents() {
8 | const events = useThree((state) => state.events)
9 | const raycaster = useThree((state) => state.raycaster)
10 | const scene = useThree((state) => state.scene)
11 | const gl = useThree((state) => state.gl)
12 | const size = useThree((state) => state.size)
13 |
14 | const scenes = ScissorTunnel.Store((s) => s.scenes)
15 |
16 | useEffect(() => {
17 | scene.children.forEach((child: Object3D) => {
18 | if (child.userData.__Scissor) {
19 | ;(child as Scene).environment = scene.environment as Texture
20 | ;(child as Scene).background = scene.background as Texture
21 | }
22 | })
23 |
24 | if (events.handlers) {
25 | for (const [key, handler] of Object.entries(events.handlers)) {
26 | const prevHandler = handler
27 |
28 | // @ts-ignore
29 | events.handlers![key] = (e: PointerEvent, state) => {
30 | scene.children.forEach((child: Object3D) => {
31 | if (child.userData.__Scissor) {
32 | const element = child.userData.__Scissor
33 | const rect = element.getBoundingClientRect()
34 | const { left, right, top, bottom, width, height } = rect
35 |
36 | if (
37 | e.clientX >= left && //
38 | e.clientX <= right &&
39 | e.clientY >= top &&
40 | e.clientY <= bottom
41 | ) {
42 | raycaster.filter = (e) => {
43 | return e.filter((intersection) => child.getObjectById(intersection.object.id))
44 | }
45 |
46 | const prevSize = { ...size }
47 | raycaster.computeOffsets = (event: DomEvent, state) => {
48 | state.size.height = height
49 | state.size.width = width
50 |
51 | return {
52 | offsetX: event.offsetX - left, //
53 | offsetY: event.offsetY - top,
54 | }
55 | }
56 |
57 | size.height = prevSize.height
58 | size.width = prevSize.width
59 |
60 | prevHandler(e)
61 | }
62 | }
63 | })
64 | }
65 | }
66 | }
67 | }, [scenes, scene, events, gl, raycaster])
68 | }
69 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "target": "es2018",
5 | "allowSyntheticDefaultImports": true,
6 | "jsx": "react",
7 | "strict": true,
8 | "preserveSymlinks": true,
9 | "moduleResolution": "Node",
10 | "esModuleInterop": true,
11 | "declaration": true,
12 | "declarationDir": "dist",
13 | "skipLibCheck": true,
14 | "removeComments": false,
15 | "baseUrl": "."
16 | },
17 | "include": ["src"]
18 | }
19 |
--------------------------------------------------------------------------------