Hi guys, why my LOD object generate itself there ??
what do you mean?
The cap that stops at position (0,0,0) is part of the machine. It shouldn’t be there.
can you put the code to jsfiddle or codepen?
<title>three.js</title>
<style>
</style>
<script src="three.js"></script>
<script src="dat.gui.module.js"></script>
<script src="./DragControls.js"></script>
<script src="renderer_stats.js"></script>
<div id="info">
</div>
<div id="container"></div>
<script type="module">
//import * as THREE from 'https://threejs.org//build/three.module.js';
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
import { GUI } from "./dat.gui.module.js";
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { RoomEnvironment } from 'https://threejs.org/examples/jsm/environments/RoomEnvironment.js';
//import{DragControls} from "https://threejs.org/examples/jsm/controls/DragControls.js";
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'https://threejs.org/examples/jsm/loaders/DRACOLoader.js';
//import { DragControls } from "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/controls/DragControls.js";
//import { GLTFLoader } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/loaders/GLTFLoader.js';
//import { DRACOLoader } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/loaders/DRACOLoader.js';
//import { DragControls } from '../DragControls.js'
let camera, scene, renderer;
let stats;
let spotLight, lightHelper, shadowCameraHelper;
let grid;
let controls;
const objects = [];
const lod = new THREE.LOD()
var group = new THREE.Group(), geometry, plane;
function init() {
scene = new THREE.Scene();
let material = new THREE.MeshPhongMaterial({
color: 0x808080,
dithering: true,
});
let geometry = new THREE.PlaneBufferGeometry(2000, 2000);
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, -1, 0);
mesh.rotation.x = -Math.PI * 0.5;
mesh.receiveShadow = true;
scene.add(mesh);
const container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
//var ambient = new THREE.AmbientLight (0xffffff,0.5);
//scene.add(ambient);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(render);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
container.appendChild(renderer.domElement);
spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(15, 40, 35);
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.1;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 512;
spotLight.shadow.mapSize.height = 512;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 200;
spotLight.shadow.focus = 1;
scene.add(spotLight);
lightHelper = new THREE.SpotLightHelper(spotLight);
//scene.add(lightHelper);
shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
//scene.add(shadowCameraHelper);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
window.addEventListener('resize', onWindowResize, false);
stats = new Stats();
container.appendChild(stats.dom);
stats.update();
//
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(7, 5, 7);
controls = new OrbitControls(camera, renderer.domElement);
controls.rotatSpeed = 0.01;
controls.dampingFactor = 0.05
// controls.enableDamping = true
//controls.screenSpacePanning = false
// controls.target.set(0, 0, 0);
//controls.addEventListener('change', renderer);
controls.anablePan = false;
controls.update();
const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(renderer);
//scene.environment = pmremGenerator.fromScene( environment ).texture;
scene.fog = new THREE.Fog(0xeeeeee, 10, 50);
grid = new THREE.GridHelper(100, 40, 0x000000, 0x000000);
grid.material.opacity = 0.1;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add(grid);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, 0, 0);
directionalLight.castShadow = true;
scene.add(directionalLight);
//const shadow = new THREE.TextureLoader().load( '"texture_file"' );
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/NEW');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
const bakedMaterial = new THREE.MeshBasicMaterial({ color: 0xffffe5, transparent: 0.5 })
const dragmesh = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: 0.1 })
const lod = new THREE.LOD()
loader.load('./Test_LOD/New_Names/testNew2LOD.glb', function (gltf) {
var austinMesh = gltf.scene
austinMesh.rotation.set(3.14, 5, 0);
austinMesh.position.set(0, 0, 0);
//gltf.scene.scale.set(0.1, 0.1, 0.1)
//gltf.scene.position.set(0,0,-10)
gltf.scene.traverse(function (child) {
});
var dragControls = new THREE.DragControls([gltf.scene], camera, renderer.domElement);
dragControls.addEventListener('dragstart', function (event) {
controls.enabled = false
event.object.material.color.set(0xff0000)
event.object.material.transparent = 0.33
})
dragControls.addEventListener('dragend', function (event) {
controls.enabled = true
//event.material.color.set(gltf.scene)
event.object.material.transparent = 1
})
const lod = new THREE.LOD();
// scene.add(lod);
let theResult4 = gltf.scene.getObjectByName("part1_1");
let theResult = gltf.scene.getObjectByName("part1_2");
let theResult2 = gltf.scene.getObjectByName("part1_3");
let theResult3 = gltf.scene.getObjectByName("part1");
theResult3.updateMatrix();
theResult3.matrixAutoMatrixUpdate = false
lod.addLevel(theResult, 10);
lod.addLevel(theResult2, 12);
lod.addLevel(theResult3, 13);
lod.addLevel(theResult4, 17);
lod.scale.set(0.01,0.01,0.01)
//group.add(lod)
scene.add(lod);
console.log(mouse)
//
//
//
// if (children.isMesh) {
//
// const geometry = children.geometry;
// var material = children.material;
// theResult = gltf.scene.clone(geometry,material);
// gltf.scene.opacity = false ;
//
//
//
// scene.add( theResult );
// for (var i = gltf.scene.length - 1; i >= 0; i--) {
// theResult.remove(gltf.scene);
//}
// lod.addLevel(theResult, 1);
// }
//
//
//let theResult2 = gltf.scene.getObjectByName("474-1801X10", true);
//
//
//
////console.log(theResult2);
//
//
//
//if (children.isMesh) {
//
//
//
// var geometry = children.geometry;
// var material = children.material;
// theResult2 = gltf.scene.clone(geometry,material);
//
//
//
// scene.add( theResult2 );
// lod.addLevel(theResult2, 2);
// }
//
//
//
//let theResult3 = gltf.scene.getObjectByName("474-1151X39 1", true);
//
//
//
////console.log(theResult3);
//
//
//if (children.isMesh) {
// var geometry = children.geometry;
// var material = children.material;
// theResult3 = gltf.scene.clone(geometry,material);
//
//
//
// scene.add( theResult3 );
// lod.addLevel(theResult3, 3);
// }
//
// // // Get each object
//const LOD1 = gltf.scene.getObjectByName("D_912-M8X25", true);
//const LOD2 = gltf.scene.getObjectByName("474-1801X10", true);
//const LOD3 = gltf.scene.getObjectByName("474-1801X10", true);
// console.log(LOD1)
// console.log(LOD2)
// console.log(LOD3)
//
//scene.add(lod);
//scene.add(gltf.scene);
//console.log(children);
//scene.add(gltf.scene)
//children.material = bakedMaterial
//console.log(LOD1);
//console.log(typeof children);
// if ( children instanceof THREE.Mesh ) {
//child.material.ambient.setHex(0xFF0000);
//child.material.color.setHex(0xaa0000);
// }
//Origin Axes
var arrowHelper = new THREE.Scene();
arrowHelper.background = new THREE.Color(0xdddddd);
arrowHelper.add(new THREE.AxesHelper(1000));
scene.add(arrowHelper);
//austinMesh.scale.set(1, 1, 1);
//controls.update();
var stats = new Stats();
//renderer.render(scene, camera);
//renderer_stats_update(0);
const gui = new GUI();
const rotationFolder = gui.addFolder("Rotation")
austinMesh.rotation.reorder("YXZ")
rotationFolder.add(austinMesh.rotation, "x", 0, Math.PI * 2)
rotationFolder.add(austinMesh.rotation, "z", 0, Math.PI * 2)
rotationFolder.add(austinMesh.rotation, "y", 0, Math.PI * 2)
rotationFolder.open();
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'z', 0, 10)
cameraFolder.open();
const positionFolder = gui.addFolder("Position")
positionFolder.add(austinMesh.position, 'x', -15, Math.PI * 2)
positionFolder.add(austinMesh.position, 'y', 0, Math.PI * 2)
positionFolder.add(austinMesh.position, 'z', 0, Math.PI * 2)
positionFolder.open();
const params = {
"light color": spotLight.color.getHex(),
intensity: spotLight.intensity,
distance: spotLight.distance,
angle: spotLight.angle,
penumbra: spotLight.penumbra,
decay: spotLight.decay,
focus: spotLight.shadow.focus,
};
const LightFolder = gui.addFolder("Light")
{
LightFolder.addColor(params, "light color").onChange(function (val) {
spotLight.color.setHex(val);
render();
});
LightFolder.add(params, "intensity", 0, 2).onChange(function (val) {
spotLight.intensity = val;
render();
});
LightFolder.add(params, "distance", 50, 200).onChange(function (val) {
spotLight.distance = val;
render();
});
LightFolder.add(params, "angle", 0, Math.PI / 3).onChange(function (val) {
spotLight.angle = val;
render();
});
LightFolder.add(params, "penumbra", 0, 1).onChange(function (val) {
spotLight.penumbra = val;
render();
});
LightFolder.add(params, "decay", 1, 2).onChange(function (val) {
spotLight.decay = val;
render();
});
LightFolder.add(params, "focus", 0, 1).onChange(function (val) {
spotLight.shadow.focus = val;
render();
});
}
function search() {
}
function render() {
lightHelper.update();
shadowCameraHelper.update();
renderer.render(scene, camera);
}
//scene.add(gltf.scene);
// shadow
const mesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(0.655 * 4, 1.3 * 4),
new THREE.MeshBasicMaterial({
blending: THREE.MultiplyBlending, toneMapped: false, transparent: true
})
);
mesh.rotation.x = - Math.PI / 2;
mesh.rotation.y = - Math.PI / 2;
mesh.rotation.z = - Math.PI / 2;
mesh.renderOrder = 2;
austinMesh.add(mesh);
scene.add(austinMesh);
//console.log(renderer.info);
});
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render() {
//scene.add(lod);
const time = - performance.now() / 10;
// grid.position.z = - ( time ) % 5;
renderer.render(scene, camera);
stats.update();
}
init();
</script>
Have you tried put the model to Blender or THREEJS Editor see if that works?Can’t run your code
Because that model loading from my folder