Skip to content

Commit

Permalink
Clean up.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Jan 13, 2022
1 parent 7512205 commit e23cd92
Showing 1 changed file with 130 additions and 130 deletions.
260 changes: 130 additions & 130 deletions examples/webgl_materials_nodes_playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,180 +7,180 @@
<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"/>
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
overflow: hidden;
width: 100%;
height: 100%;
}
.renderer {
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
}
flow {
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 100%;
background: #222;
box-shadow: inset 0 0 20px 0px #000000;
}
</style>
</head>
<body>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<style>
body {
overflow: hidden;
width: 100%;
height: 100%;
}
.renderer {
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
}
flow {
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 100%;
background: #222;
box-shadow: inset 0 0 20px 0px #000000;
}
</style>
<script type="module">

import * as THREE from 'three';

import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';

import { NodeEditor } from './jsm/node-editor/NodeEditor.js';
import { StandardMaterialEditor } from './jsm/node-editor/materials/StandardMaterialEditor.js';

import Stats from './jsm/libs/stats.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js';

let stats;
let camera, scene, renderer;
let model;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.set( 0.0, 300, 400 * 3 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x333333 );

// Lights

const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
topLight.position.set( 0, 100000, 100000 );
scene.add( topLight );

const backLight = new THREE.PointLight( 0x0c1445, 1.4 );
backLight.position.set( - 100, 20, - 260 );
scene.add( backLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );
renderer.outputEncoding = THREE.sRGBEncoding;

renderer.domElement.className = 'renderer';
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<script type="module">

//
import * as THREE from 'three';

import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';

import { NodeEditor } from './jsm/node-editor/NodeEditor.js';
import { StandardMaterialEditor } from './jsm/node-editor/materials/StandardMaterialEditor.js';

import Stats from './jsm/libs/stats.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js';

let stats;
let camera, scene, renderer;
let model;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.set( 0.0, 300, 400 * 3 );

stats = new Stats();
document.body.appendChild( stats.dom );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x333333 );

const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 500;
controls.maxDistance = 3000;
// Lights

window.addEventListener( 'resize', onWindowResize );
const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
topLight.position.set( 0, 100000, 100000 );
scene.add( topLight );

onWindowResize();
const backLight = new THREE.PointLight( 0x0c1445, 1.4 );
backLight.position.set( - 100, 20, - 260 );
scene.add( backLight );

initEditor();
renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );
renderer.outputEncoding = THREE.sRGBEncoding;

}
renderer.domElement.className = 'renderer';

function initEditor() {
//

const nodeEditor = new NodeEditor();
stats = new Stats();
document.body.appendChild( stats.dom );

nodeEditor.addEventListener( 'new', () => {
const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 500;
controls.maxDistance = 3000;

const materialEditor = new StandardMaterialEditor();
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 );
window.addEventListener( 'resize', onWindowResize );

nodeEditor.add( materialEditor );
onWindowResize();

model.material = materialEditor.material;
initEditor();

} );
}

nodeEditor.addEventListener( 'load', () => {
function initEditor() {

const materialEditor = nodeEditor.nodes[ 0 ];
materialEditor.update(); // need move to deserialization
const nodeEditor = new NodeEditor();

model.material = materialEditor.material;
nodeEditor.addEventListener( 'new', () => {

} );
const materialEditor = new StandardMaterialEditor();
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 );

document.body.appendChild( nodeEditor.domElement );
nodeEditor.add( materialEditor );

const loaderFBX = new FBXLoader();
loaderFBX.load( 'models/fbx/stanford-bunny.fbx', ( object ) => {
model.material = materialEditor.material;

const materialEditor = new StandardMaterialEditor();
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 ); // canvas position
} );

nodeEditor.add( materialEditor );
nodeEditor.addEventListener( 'load', () => {

model = object.children[ 0 ];
model.position.set( 0, 0, 10 );
model.scale.setScalar( 1 );
model.material = materialEditor.material;
scene.add( model );
const materialEditor = nodeEditor.nodes[ 0 ];
materialEditor.update(); // need move to deserialization

} );
model.material = materialEditor.material;

}
} );

function onWindowResize() {
document.body.appendChild( nodeEditor.domElement );

const width = window.innerWidth;
const height = window.innerHeight / 2;
const loaderFBX = new FBXLoader();
loaderFBX.load( 'models/fbx/stanford-bunny.fbx', ( object ) => {

camera.aspect = width / height;
camera.updateProjectionMatrix();
const materialEditor = new StandardMaterialEditor();
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 ); // canvas position

renderer.setSize( width, height );
nodeEditor.add( materialEditor );

}
model = object.children[ 0 ];
model.position.set( 0, 0, 10 );
model.scale.setScalar( 1 );
model.material = materialEditor.material;
scene.add( model );

//
} );

}

function onWindowResize() {

const width = window.innerWidth;
const height = window.innerHeight / 2;

camera.aspect = width / height;
camera.updateProjectionMatrix();

renderer.setSize( width, height );

}

//

function animate() {
function animate() {

requestAnimationFrame( animate );
requestAnimationFrame( animate );

nodeFrame.update();
nodeFrame.update();

render();
render();

stats.update();
stats.update();

}
}

function render() {
function render() {

//if ( model ) model.rotation.y = performance.now() / 5000;
//if ( model ) model.rotation.y = performance.now() / 5000;

renderer.render( scene, camera );
renderer.render( scene, camera );

}
}

</script>
</script>

</body>
</html>

0 comments on commit e23cd92

Please sign in to comment.