Hi,
I’m trying to make some cools anims using GSAP & Three in my Nuxt 2 project. It actually works pretty nice but my two SpotLight are not working & the helper show NOTHING.
Actually my objets are juste made of flat color so… Looks like a flat shape, not 3D one.
I think i miss something but i don’t have the point after some researches…
Here is my class :
import {
Scene,
PerspectiveCamera,
WebGLRenderer,
Group,
MeshPhysicalMaterial,
Mesh,
IcosahedronGeometry,
Vector3,
PCFSoftShadowMap,
ACESFilmicToneMapping,
Color,
sRGBEncoding,
AmbientLight,
SpotLight,
SpotLightHelper
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
class Three {
constructor({ context }) {
this.context = context;
this.settings = {
frontLight: {
color: new Color(0xbe7c7c),
intensity: 13.6,
distance: 26.9,
penumbra: 0,
x: 10,
y: 14,
z: 20,
},
backLight: {
color: new Color(0xc9f0f0),
intensity: 13,
distance: 23,
penumbra: 0,
x: -19,
y: -5.3,
z: 3,
},
};
}
init({ container }) {
this.container = container;
this.createScene();
}
createScene() {
const pixelRatio = window.devicePixelRatio;
const AA = pixelRatio <= 1;
this.renderer = new WebGLRenderer({
antialias: AA,
alpha: true,
});
this.renderer.setPixelRatio(pixelRatio);
this.renderer.toneMappingExposure = 0.6;
this.renderer.outputEncoding = sRGBEncoding;
this.renderer.toneMapping = ACESFilmicToneMapping;
this.renderer.powerPreference = "high-performance";
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = PCFSoftShadowMap;
this.container.appendChild(this.renderer.domElement);
this.scene = new Scene();
this.camera = new PerspectiveCamera(
32,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.camera.position.y = 5;
this.camera.position.z = 10;
this.camera.lookAt(new Vector3(0, 0, 0));
// this.controls = new OrbitControls(this.camera, this.container);
// this.controls.update();
const ambientLight = new AmbientLight('blue');
this.scene.add(ambientLight);
this.createLights;
this.addObjects();
this.onResize();
this.render();
}
addObjects() {
this.meshesContainer = new Group();
this.scene.add(this.meshesContainer);
const objects = [
{
size: 1,
position: {
x: -1,
y: 1,
z: 0,
},
speed: -3,
color: 0x2b6cb0,
},
{
size: 1,
position: {
x: 1,
y: -5,
z: -8,
},
speed: 1,
color: 0x2b6cb0,
},
];
objects.forEach((el, index) => {
const material = new MeshPhysicalMaterial({
color: el.color,
});
const obj = new IcosahedronGeometry(el.size);
const ico = new Mesh(obj, material);
ico.name = "mainCube" + index;
ico.position.set(el.position.x, el.position.y, el.position.z);
ico.scale.set(0, 0, 0);
this.meshesContainer.add(ico);
gsap.to(ico.rotation, {
y: el.speed * 3,
z: el.speed * 3,
ease: "power1.inOut",
scrollTrigger: {
trigger: "#fullscreen",
endTrigger: "footer",
scrub: 1,
end: "bottom bottom",
},
});
gsap.to(
ico.scale,
{
x: 1,
y: 1,
z: 1,
duration: 2,
ease: "power1.inOut",
scrollTrigger: {
trigger: "#fullscreen",
start: "top top",
scrub: 1,
end: "bottom bottom",
},
},
1
);
})
}
createLights() {
this.frontLight = new SpotLight(
this.settings.frontLight.color,
this.settings.frontLight.intensity,
this.settings.frontLight.distance
);
this.frontLight.castShadow = true;
this.frontLight.shadow.mapSize.width = 1024; // default
this.frontLight.shadow.mapSize.height = 1024; // default
this.frontLight.shadow.camera.near = 0.5; // default
this.frontLight.shadow.camera.far = 500;
this.frontLight.shadow.normalBias = 0.2;
this.scene.add(this.frontLight);
this.backLight = new SpotLight(
this.settings.frontLight.color,
this.settings.frontLight.intensity,
this.settings.frontLight.distance
);
this.backLight.castShadow = true;
this.backLight.shadow.mapSize.width = 1024; // default
this.backLight.shadow.mapSize.height = 1024; // default
this.backLight.shadow.camera.near = 0.5; // default
this.backLight.shadow.camera.far = 500;
this.backLight.shadow.normalBias = 0.2;
this.backLight.penumbra = this.settings.backLight.penumbra;
this.scene.add(this.backLight);
this.frontLight.position.set(
this.settings.frontLight.x,
this.settings.frontLight.y,
this.settings.frontLight.z
);
this.backLight.position.set(
this.settings.backLight.x,
this.settings.backLight.y,
this.settings.backLight.z
);
const spotLightHelper2 = new SpotLightHelper(this.backLight);
this.scene.add(spotLightHelper2);
const spotLightHelper1 = new SpotLightHelper(this.frontLight);
this.scene.add(spotLightHelper1);
}
render() {
this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(() => {
this.render();
});
}
onResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
getObject({ name }) {
console.log(this.scene);
return this.scene.getObjectByName(name);
}
}
export default (context, inject) => {
const init = () => {
const scene = new Three({ context: context });
inject("three", scene);
}
init()
}
Thanks a LOT