I tried everything but Dat.gui controls is not showing up on the browser as expected. It looks like this:
My code to add the datgui is like this:
const gui = new dat.GUI();
gui.add(PointLight.position, ‘x’).min(-20).max(20).step(1).name(‘x’)
gui.add(PointLight.position, ‘y’).min(-20).max(20).step(1).name(‘y’)
gui.add(PointLight.position, ‘z’).min(-20).max(20).step(1).name(‘z’)
Please help me out, thanks in advance!
most likely there is something in your css that breaks its layout. or, if your PointLight is a class and not an instance of a class, you have some js access error in dat gui.
No CSS is been applied and also the pointlight is an instance, not a class. Please find my whole code below:
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import * as dat from 'dat.gui';
const gui = new dat.GUI();
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height)
const canvas = document.querySelector('.webgl')
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor(0xf8a5c2);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.shadowMap.enabled = true
camera.position.set(0.4, 3.9, 2.3);
camera.rotation.x = 0.129 //-6
camera.rotation.y = 3.222 //3
camera.rotation.z = -0.01
let controls;
const loader = new FBXLoader()
loader.load('/sample.fbx',
(object) => {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
scene.add(object)
console.log('loaded!!')
},
() => {
console.log('loading in progress..')
},
() => {
console.log('error!!')
})
THREE.ColorManagement.enabled = true;
scene.background = new THREE.Color(0x443333);
scene.add(camera)
//light--------------------------------------------
const PointLight = new THREE.PointLight(0x7F6C6C, 6, 80);
PointLight.position.set(-3.2, 11, 4.2);
scene.add(PointLight);
gui.add(PointLight.position, 'x').min(-20).max(20).step(1).name('x')
const hemiLight = new THREE.HemisphereLight(0x443333, 0x111122, 5);
scene.add(hemiLight);
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(),
new THREE.ShadowMaterial({
color: 0x000000,
transparent: true,
opacity: 0.7,
side: THREE.DoubleSide,
}),
);
plane.rotation.x = - Math.PI / 2;
plane.scale.setScalar(200);
plane.receiveShadow = true;
scene.add(plane);
console.log('calling orbit controls')
controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
controls.dampingFactor = 0.02
controls.target.set(0, 3, 0)
controls.update()
window.addEventListener('resize', () => {
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});
window.addEventListener('dblclick', () => {
const fullScreenElement = document.fullscreenElement || document.webkitFullscreenElement
if (!fullScreenElement) {
if (canvas.requestFullscreen)
canvas.requestFullscreen()
else if (canvas.webkitRequestFullscreen)
canvas.webkitRequestFullscreen
}
else {
document.exitFullscreen()
}
});
function tick() {
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
tick()
@makc3d Any suggestions here?
Does your console give any errors or warnings?
You can try your gui code like this…
const lightPositions = {
x: 0,
}
const gui = new dat.GUI();
gui.add(lightPositions, ‘x’, -20, 20).step( 1 ).onChange(changeLightPos)
const changeLightPos = () => {
PointLight.position.x = lightPositions.x
}
This also doesn’t work, the gui controls are still the same. The console doesn’t give any error, but gives a warning though. It says:
THREE.FBXLoader: Vertex has more than 4 skinning weights assigned to vertex. Deleting additional weights.
But I don’t think this is causing any issue with the gui.
What version of threejs are you using?
Dat.GUI was no longer included in threejs since r135.
Maybe you’ve built your dev environment manually by cutting pasting files around and you’ve messed something up.
Or your are mixing version numbers that span many years.
Explain how you setup your build environment, or even show your html.
Okay so I see that I’m using r140, is that the reason for this issue?
I had setup my dependencies using webpack and I remember now that I copied some of the dependencies from an older project in webpack to make it easier :
{
"repository": "#",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js"
},
"dependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@tweenjs/tween.js": "^19.0.0",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.2.4",
"css-loader": "^6.7.1",
"dat.gui": "^0.7.9",
"file-loader": "^6.2.0",
"gsap": "^3.5.1",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.0",
"portfinder-sync": "0.0.2",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.1",
"three": "^0.151.3",
"three-addons": "^1.2.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1",
"webpack-merge": "^5.8.0"
}
}
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack 01</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>
Dat.GUI works with all versions of Threejs, and anything really.
It’s just when you first posted your code, I thought I remembered that you imported using
import * as dat from 'three/examples/jsm/libs/dat.gui.module'
which would only work by default for versions of Three below r135 since they changed to lil-gui.module.min
Anyway, I still can’t pinpoint the cause of your issue.
I’ve never experienced the same as you. And I have hundreds of examples of using Dat.GUI dotted all over the internet.
Caveat : I don’t think my suggestions below will fix your particular issue.
If I am using NPM and a bundler, then what I do differently than you is,
npm install dat.gui
And in my code
import { GUI } from 'dat.gui'
...
const gui = new GUI()
...
Also, if I wanted to use querySelector to find the canvas, i’d search for it by id, and not by class.
HTML
<canvas id="canvas"></canvas>
JS
const canvas = document.querySelector('#canvas')
or use Lil-GUI
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min'
...
const gui = new GUI()
Well I had also used npm install to install all the dependencies and I agree with the use of id selector to find the canvas. This still did not fix the issue. Not sure what’s the issue here.
I used lil-gui module like you mentioned and it works perfectly fine. Thankyou!
Look at the large dark X,Y,Z in your screengrab.
I think there is a conflict in your CSS as originally suggested.
See in your code where you
import './style.css'
Delete the contents of your ./style.css and if it is better, then reintroduce bit by bit until you pinpoint the conflict.
That’s right, I just commented everything out in css earlier but that didn’t work. Deleting contents work fine. This is strange.
just this:
but I think the guy above has already told you.