Mixing
THREE.JS GLTFLoader, load blender scene WITH working lights
I just started testing the GLTFLoader from THREE.js with the new blender exporter here, and I'm able to add a model with (at least the same color) material, and when I add the imported scene to the THREE.js scene, the mesh is imported fine and when I log it to the console I also see the camera and light from the default blender scene imported as well.
However, I had to manually add a THREE.js light to be able to see anything, so it seems that the light that is imported is only recognized as a 3D object. Is there some way to automatically get the imported lights to work, or do you have to programatically add THREE.js lights at the position of the imported "light" object? If so is there a way to match sun lights from blender, and point lights, and get them to face the right direction? Or is there some built-in way to do this?
BTW this is the code I have to far (still didn't add ALL lights support):
function automaticallyAddLightsTo(inputScene) {
inputScene.children.forEach((x) => {
var light = new THREE.DirectionalLight( 0xffffff, 0),//placeholder
isActuallyALight = false;
if(x.name.includes("Sun")) {
light = new THREE.DirectionalLight( 0xffffff, 1);
isActuallyALight = true;
} else if(x.name.includes("Point")) {
light = newTHREE.PointLight( 0xffffff, 1, 100);
isActuallyALight = true;
} //etc for other lights
light.position.copy(x.position);
light.rotation.copy(x.rotation);
light.scale.copy(x.scale);
light.quaternion.copy(x.quaternion);
if(isActuallyALight)
s.add(light);
});
}
but how do I detect intensity?
javascript three.js blender
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
add a comment |
I just started testing the GLTFLoader from THREE.js with the new blender exporter here, and I'm able to add a model with (at least the same color) material, and when I add the imported scene to the THREE.js scene, the mesh is imported fine and when I log it to the console I also see the camera and light from the default blender scene imported as well.
However, I had to manually add a THREE.js light to be able to see anything, so it seems that the light that is imported is only recognized as a 3D object. Is there some way to automatically get the imported lights to work, or do you have to programatically add THREE.js lights at the position of the imported "light" object? If so is there a way to match sun lights from blender, and point lights, and get them to face the right direction? Or is there some built-in way to do this?
BTW this is the code I have to far (still didn't add ALL lights support):
function automaticallyAddLightsTo(inputScene) {
inputScene.children.forEach((x) => {
var light = new THREE.DirectionalLight( 0xffffff, 0),//placeholder
isActuallyALight = false;
if(x.name.includes("Sun")) {
light = new THREE.DirectionalLight( 0xffffff, 1);
isActuallyALight = true;
} else if(x.name.includes("Point")) {
light = newTHREE.PointLight( 0xffffff, 1, 100);
isActuallyALight = true;
} //etc for other lights
light.position.copy(x.position);
light.rotation.copy(x.rotation);
light.scale.copy(x.scale);
light.quaternion.copy(x.quaternion);
if(isActuallyALight)
s.add(light);
});
}
but how do I detect intensity?
javascript three.js blender
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
add a comment |
I just started testing the GLTFLoader from THREE.js with the new blender exporter here, and I'm able to add a model with (at least the same color) material, and when I add the imported scene to the THREE.js scene, the mesh is imported fine and when I log it to the console I also see the camera and light from the default blender scene imported as well.
However, I had to manually add a THREE.js light to be able to see anything, so it seems that the light that is imported is only recognized as a 3D object. Is there some way to automatically get the imported lights to work, or do you have to programatically add THREE.js lights at the position of the imported "light" object? If so is there a way to match sun lights from blender, and point lights, and get them to face the right direction? Or is there some built-in way to do this?
BTW this is the code I have to far (still didn't add ALL lights support):
function automaticallyAddLightsTo(inputScene) {
inputScene.children.forEach((x) => {
var light = new THREE.DirectionalLight( 0xffffff, 0),//placeholder
isActuallyALight = false;
if(x.name.includes("Sun")) {
light = new THREE.DirectionalLight( 0xffffff, 1);
isActuallyALight = true;
} else if(x.name.includes("Point")) {
light = newTHREE.PointLight( 0xffffff, 1, 100);
isActuallyALight = true;
} //etc for other lights
light.position.copy(x.position);
light.rotation.copy(x.rotation);
light.scale.copy(x.scale);
light.quaternion.copy(x.quaternion);
if(isActuallyALight)
s.add(light);
});
}
but how do I detect intensity?
javascript three.js blender
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
I just started testing the GLTFLoader from THREE.js with the new blender exporter here, and I'm able to add a model with (at least the same color) material, and when I add the imported scene to the THREE.js scene, the mesh is imported fine and when I log it to the console I also see the camera and light from the default blender scene imported as well.
However, I had to manually add a THREE.js light to be able to see anything, so it seems that the light that is imported is only recognized as a 3D object. Is there some way to automatically get the imported lights to work, or do you have to programatically add THREE.js lights at the position of the imported "light" object? If so is there a way to match sun lights from blender, and point lights, and get them to face the right direction? Or is there some built-in way to do this?
BTW this is the code I have to far (still didn't add ALL lights support):
function automaticallyAddLightsTo(inputScene) {
inputScene.children.forEach((x) => {
var light = new THREE.DirectionalLight( 0xffffff, 0),//placeholder
isActuallyALight = false;
if(x.name.includes("Sun")) {
light = new THREE.DirectionalLight( 0xffffff, 1);
isActuallyALight = true;
} else if(x.name.includes("Point")) {
light = newTHREE.PointLight( 0xffffff, 1, 100);
isActuallyALight = true;
} //etc for other lights
light.position.copy(x.position);
light.rotation.copy(x.rotation);
light.scale.copy(x.scale);
light.quaternion.copy(x.quaternion);
if(isActuallyALight)
s.add(light);
});
}
but how do I detect intensity?
javascript three.js blender
javascript three.js blender
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
edited Jan 2 at 8:15
bluejayke
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
asked Jan 2 at 7:55
bluejaykebluejayke
4242518
4242518
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002975%2fthree-js-gltfloader-load-blender-scene-with-working-lights%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002975%2fthree-js-gltfloader-load-blender-scene-with-working-lights%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
