Editor: add RectAreaLight #28187
Editor: add RectAreaLight #28187
Conversation
|
They don't have shadows. I'd rather add projectors #24589 |
|
One issue with this PR is that the area light of published apps does not properly work because It seems full editor support of |
Thank you for your feedback. #9373 can be achieved this is really a good way. But I have a feeling it won't be done anytime soon. Whether we can use other ways to achieve this PR, like: on-demand bundling |
|
With #28195 in place, you can try to add support for area lights in published apps. The idea is to include three.js/editor/js/Sidebar.Project.App.js Lines 147 to 151 in 7376a8d Meaning you load the file separately via If all of that works, it would be ideal if this code runs conditionally. Meaning |
linbingquan
force-pushed
the
dev-editor-light
branch
from
7ad4fdd
to
2126aa2
Compare
| import { APP } from './js/app.js'; | ||
|
|
||
| window.THREE = THREE; // Used by APP Scripts. | ||
| /* init addons js */ |
There was a problem hiding this comment.
Thanks for giving this a shot!
I'm not sure yet how I feel about this solution. I understand the idea behind it but I wonder if we can inject imports and initialization code a bit cleaner. Need to think about this.
There was a problem hiding this comment.
I'm not sure yet how I feel about this solution. I understand the idea behind it but I wonder if we can inject imports and initialization code a bit cleaner. Need to think about this.
Thank you for your response.
At present, I think of two other methods, but may not be what you expect, if you have a good idea please let me know.
- ES6 Template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
- Use existing libraries. I try to use MagicString ( https://github.com/rich-harris/magic-string ), this library may not be suitable, there may be a more suitable library, but I do not know at the moment...
Example code for Method 1:
const content = `<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: sans-serif;
font-size: 11px;
background-color: #000;
margin: 0px;
}
canvas {
display: block;
}
</style>
</head>
<body ontouchstart="">
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js",
"three/addons/": "./js/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
${ hasRectAreaLight ? 'import { RectAreaLightUniformsLib } from \'three/addons/lights/RectAreaLightUniformsLib.js\';' : '' }
import { APP } from './js/app.js';
window.THREE = THREE; // Used by APP Scripts.
${ hasRectAreaLight ? 'RectAreaLightUniformsLib.init();' : '' }
var loader = new THREE.FileLoader();
loader.load( 'app.json', function ( text ) {
var player = new APP.Player();
player.load( JSON.parse( text ) );
player.setSize( window.innerWidth, window.innerHeight );
player.play();
document.body.appendChild( player.dom );
window.addEventListener( 'resize', function () {
player.setSize( window.innerWidth, window.innerHeight );
} );
} );
${editButton}
</script>
</body>
</html>`;
toZip[ 'index.html' ] = strToU8( content );Example code for Method 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"magic-string": "https://unpkg.com/magic-string@0.30.10/dist/magic-string.es.mjs",
"@jridgewell/sourcemap-codec": "https://unpkg.com/@jridgewell/sourcemap-codec@1.4.15/dist/sourcemap-codec.mjs"
}
}
</script>
<script type="module">
import MagicString from 'magic-string';
const htmlStr = `<!DOCTYPE html>
<html lang="en">
<head>
<title><!-- title --></title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: sans-serif;
font-size: 11px;
background-color: #000;
margin: 0px;
}
canvas {
display: block;
}
</style>
</head>
<body ontouchstart="">
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js",
"three/addons/": "./js/"
}
}
<\/script>
<script type="module">
<\/script>
</body>
</html>`;
const html = new MagicString(htmlStr);
html.replace('<!-- title -->', 'hello world');
const modulejs = /* js */`
import * as THREE from 'three';
import { APP } from './js/app.js';
window.THREE = THREE; // Used by APP Scripts.
var loader = new THREE.FileLoader();
loader.load( 'app.json', function ( text ) {
var player = new APP.Player();
player.load( JSON.parse( text ) );
player.setSize( window.innerWidth, window.innerHeight );
player.play();
document.body.appendChild( player.dom );
window.addEventListener( 'resize', function () {
player.setSize( window.innerWidth, window.innerHeight );
} );
} );`;
const js = new MagicString(modulejs);
const hasRectAreaLight = true;
const editable = true;
if (hasRectAreaLight) {
js.prependRight(33, `import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';\r\n\t\t\t`);
js.prependRight(116, `RectAreaLightUniformsLib.init();\r\n\r\n\t\t\t`);
}
let button;
if (editable) {
button = new MagicString(`
\t\t\tlet button = document.createElement( 'a' );
button.href = 'https://threejs.org/editor/#file=' + location.href.split( '/' ).slice( 0, - 1 ).join( '/' ) + '/app.json';
button.style.cssText = 'position: absolute; bottom: 20px; right: 20px; padding: 10px 16px; color: #fff; border: 1px solid #fff; border-radius: 20px; text-decoration: none;';
button.target = '_blank';
button.textContent = 'EDIT';
document.body.appendChild( button );\t\t\t
`);
}
if (button) {
js.append(button.toString());
}
console.log(js.toString());
html.prependRight(626, js.indent().indent().indent().toString());
console.log(html.toString());
</script>
</body>
</html>
Related PR: #16251
Description
Add RectAreaLight for Editor.
If this PR has any problem, please tell me.
Screenshot: