123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js - playground</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link rel="stylesheet" href="fonts/open-sans/open-sans.css" type="text/css"/>
- <link rel="stylesheet" href="fonts/tabler-icons/tabler-icons.min.css" type="text/css"/>
- <style>
- body {
- overflow: hidden;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- position: fixed;
- overscroll-behavior: none;
- background: #191919ed;
- }
- .renderer {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- }
- flow {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- box-shadow: inset 0 0 20px 0px #000000;
- pointer-events: none;
- overflow: hidden;
- }
- flow > * {
- pointer-events: auto;
- }
- flow f-canvas.focusing {
- pointer-events: none;
- }
- flow f-canvas:not(.focusing) {
- background: #191919ed;
- }
- flow f-menu {
- white-space: nowrap;
- }
- node-editor {
- position: relative;
- width: 100%;
- height: 100%;
- }
- f-preview {
- display: block;
- position: relative;
- width: 100%;
- height: 100%;
- }
- f-gutter {
- position: absolute;
- cursor: ew-resize;
- height: 100%;
- top: 0px;
- width: 2px;
- background-color: #191919ed;
- border-style: none solid none solid;
- border-width: 1px;
- border-color: #aaaaaa;
- box-shadow: 0 0 5px 0px #000000;
- z-index: 30;
- }
- .panel {
- position: absolute;
- overflow: visible;
- float: left;
- }
- </style>
- </head>
- <body>
- <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.48.0/min/vs/loader.min.js"></script>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.webgpu.js",
- "three/tsl": "../build/three.webgpu.js",
- "three/addons/": "../examples/jsm/",
- "flow": "./libs/flow.module.js"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { NodeEditor } from './NodeEditor.js';
- let camera, scene, renderer, composer;
- let nodeEditor;
- init();
- async function init() {
- const container = document.createElement( 'node-editor' );
- document.body.appendChild( container );
- //
- camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.5, 200 );
- camera.position.set( 0.0, 3, 4 * 3 );
- scene = new THREE.Scene();
- scene.background = new THREE.Color( 0x333333 );
- //
- renderer = new THREE.WebGPURenderer( { antialias: true } );
- renderer.setAnimationLoop( animate );
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.toneMapping = THREE.LinearToneMapping;
- renderer.toneMappingExposure = 1;
- // Additional container required for determining accurate pixel dimensions of the canvas when resizing
- const rendererContainer = document.createElement( 'f-preview' );
- container.appendChild( rendererContainer );
- rendererContainer.appendChild( renderer.domElement );
- renderer.domElement.className = 'renderer panel';
- //
- const controls = new OrbitControls( camera, renderer.domElement );
- controls.minDistance = 1;
- controls.maxDistance = 30;
- window.addEventListener( 'resize', onWindowResize );
- initEditor( container );
- onWindowResize();
- }
- function initEditor( container ) {
- nodeEditor = new NodeEditor( scene, renderer, composer );
- nodeEditor.addEventListener( 'new', () => {
- //renderer.dispose();
- } );
- container.appendChild( nodeEditor.domElement );
- nodeEditor.domElement.className = 'panel';
- }
- function onWindowResize() {
- checkResize();
- nodeEditor.setSize( window.innerWidth, window.innerHeight );
- }
- //
- function animate() {
- render();
- }
- function render() {
- checkResize();
- renderer.render( scene, camera );
- }
- function checkResize() {
- const canvas = renderer.domElement;
- const rendererContainer = canvas.parentNode;
- const width = rendererContainer.clientWidth;
- const height = rendererContainer.clientHeight;
- if ( canvas.width !== width || canvas.height !== height ) {
- camera.aspect = width / height;
- camera.updateProjectionMatrix();
- renderer.setSize( width, height );
- }
- }
- </script>
- </body>
- </html>
|