Hi, I’m new to Three.js and trying to resist the collisions between Avator and 3D model. Myconcept is that there will be mutliple chairs and avator will move and go to sit that chairs. Avator is moving and sitting but the issue is that chair and avator is colliding. I wanted to resist that one. I tried raycaster but it didn’t help me much. I attached the main index.ts file code. If I did any mistakes plz let me know and help me on this.
**import { KeyDisplay } from './utils';**
**import { CharacterControls } from './characterControls';**
**import * as THREE from 'three'**
**import { CameraHelper } from 'three';**
**import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'**
**import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';**
**import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'**
**// SCENE**
**const scene = new THREE.Scene();**
**scene.background = new THREE.Color(0xa8def0);**
**// CAMERA**
**const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);**
**camera.position.y = 6;**
**camera.position.z = 6;**
**camera.position.x = 0;**
**// RENDERER**
**const renderer = new THREE.WebGLRenderer({ antialias: true });**
**renderer.setSize(window.innerWidth, window.innerHeight);**
**renderer.setPixelRatio(window.devicePixelRatio);**
**renderer.shadowMap.enabled = true**
**// CONTROLS**
**const orbitControls = new OrbitControls(camera, renderer.domElement);**
**orbitControls.enableDamping = true**
**orbitControls.minDistance = 5**
**orbitControls.maxDistance = 15**
**orbitControls.enablePan = false**
**orbitControls.maxPolarAngle = Math.PI / 2 - 0.05**
**orbitControls.update();**
**// LIGHTS**
**light()**
**// FLOOR**
**generateFloor()**
**// MODEL WITH ANIMATIONS**
**var characterControls: CharacterControls**
**new GLTFLoader().load('models/calra_4anim.gltf', function (gltf) {**
** const model = gltf.scene;**
** model.traverse(function (object: any) {**
** if (object.isMesh) object.castShadow = true;**
** });**
** //model.scale.setScalar(0.3);**
** model.position.set(0, 0 ,12);**
** scene.add(model);**
** console.log("scene",scene);**
** model.userData.draggable = true**
** model.userData.name = 'Model'**
** **
** const gltfAnimations: THREE.AnimationClip[] = gltf.animations;**
** const mixer = new THREE.AnimationMixer(model);**
** const animationsMap: Map<string, THREE.AnimationAction> = new Map()**
** gltfAnimations.filter(a => a.name != 'TPose').forEach((a: THREE.AnimationClip) => {**
** animationsMap.set(a.name, mixer.clipAction(a))**
** })**
** characterControls = new CharacterControls(model, mixer, animationsMap, orbitControls, camera, 'IDLE')**
**});**
**new GLTFLoader().load('models/Aircraft_Eco.glb', function (gltf) {**
** const model = gltf.scene;**
** model.traverse(function (object: any) {**
** if (object.isMesh) object.castShadow = true;**
** });**
** model.position.set(1.5, 0 ,0);**
** //model.scale.setScalar(0.09);**
** scene.add(model);**
**});**
**const keysPressed = { }**
**const keyDisplayQueue = new KeyDisplay();**
**document.addEventListener('keydown', (event) => {**
** keyDisplayQueue.down(event.key)//which key is pressed**
** if (event.shiftKey && characterControls) {**
** characterControls.switchRunToggle()**
** } else {**
** (keysPressed as any)[event.key.toLowerCase()] = true**
** }**
**}, false);**
**document.addEventListener('keyup', (event) => {**
** keyDisplayQueue.up(event.key);**
** (keysPressed as any)[event.key.toLowerCase()] = false**
**}, false);**
**const clock = new THREE.Clock();**
**// ANIMATE**
**function animate() {**
** dragObject();**
** let mixerUpdateDelta = clock.getDelta();**
** if (characterControls) {**
** characterControls.update(mixerUpdateDelta, keysPressed);**
** }**
** orbitControls.update()**
** renderer.render(scene, camera);**
** **
** requestAnimationFrame(animate);**
**}**
**document.body.appendChild(renderer.domElement);**
**animate();**
**// RESIZE HANDLER**
**function onWindowResize() {**
** camera.aspect = window.innerWidth / window.innerHeight;**
** camera.updateProjectionMatrix();**
** renderer.setSize(window.innerWidth, window.innerHeight);**
** keyDisplayQueue.updatePosition()**
**}**
**window.addEventListener('resize', onWindowResize);**
**function generateFloor() {**
** // TEXTURES**
**// const textureLoader = new THREE.TextureLoader();**
**// const placeholder = textureLoader.load("./textures/placeholder/placeholder.png");**
**// const sandBaseColor = textureLoader.load("./textures/sand/Sand 002_COLOR.jpg");**
**// const sandNormalMap = textureLoader.load("./textures/sand/Sand 002_NRM.jpg");**
**// const sandHeightMap = textureLoader.load("./textures/sand/Sand 002_DISP.jpg");**
**// const sandAmbientOcclusion = textureLoader.load("./textures/sand/Sand 002_OCC.jpg");**
**// const WIDTH = 80**
**// const LENGTH = 80**
**// const geometry = new THREE.PlaneGeometry(WIDTH, LENGTH, 512, 512);**
**// const material = new THREE.MeshStandardMaterial(**
**// {**
**// map: sandBaseColor, normalMap: sandNormalMap,**
**// displacementMap: sandHeightMap, displacementScale: 0.1,**
**// aoMap: sandAmbientOcclusion**
**// })**
**// wrapAndRepeatTexture(material.map)**
**// wrapAndRepeatTexture(material.normalMap)**
**// wrapAndRepeatTexture(material.displacementMap)**
**// wrapAndRepeatTexture(material.aoMap)**
**// // const material = new THREE.MeshPhongMaterial({ map: placeholder})**
**// const floor = new THREE.Mesh(geometry, material)**
**// floor.receiveShadow = true**
**// floor.rotation.x = - Math.PI / 2**
**// scene.add(floor)**
**// }**
** const width = 80;**
** const height = 80;**
** const loader = new THREE.TextureLoader();**
** const texture = loader.load('models/floor.jpg');**
** texture.wrapS = THREE.RepeatWrapping;**
** texture.wrapT = THREE.RepeatWrapping;**
** texture.magFilter = THREE.NearestFilter;**
** const repeats = width / 2;**
** texture.repeat.set(repeats, repeats);**
** const planeGeo = new THREE.PlaneBufferGeometry(width, height);**
** const planeMat = new THREE.MeshPhongMaterial({**
** map: texture,**
** side: THREE.DoubleSide,**
** });**
** const mesh = new THREE.Mesh(planeGeo, planeMat);**
** mesh.rotation.x = Math.PI * -.5;**
** scene.add(mesh);**
** }**
** **
**function wrapAndRepeatTexture (map: THREE.Texture) {**
** map.wrapS = map.wrapT = THREE.RepeatWrapping**
** map.repeat.x = map.repeat.y = 10**
**}**
**// Raycaster**
**const raycaster = new THREE.Raycaster();**
**const clickMouse = new THREE.Vector2();**
**const moveMouse = new THREE.Vector2();**
**var draggable: THREE.Object3D;**
**window.addEventListener('click',event => {**
** if(draggable) {**
** console.log('found draggable ${draggable.userData.name}')**
** draggable = null as any**
** return;**
** }**
** clickMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;**
** clickMouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;**
** raycaster.setFromCamera( clickMouse, camera );**
** const found = raycaster.intersectObjects( scene.children );**
** **
** if(found.length > 0 && found[0].object.userData.draggable){**
** draggable = found[0].object**
** console.log('found draggable ${draggable.userData.name}')**
** }**
**})**
**window.addEventListener('mousemove' , event => {**
** moveMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;**
** moveMouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;**
** **
**})**
**function dragObject(){**
** if (draggable != null) {**
** raycaster.setFromCamera(moveMouse, camera)**
** const found = raycaster.intersectObjects(scene.children)**
** if (found.length > 0) {**
** for(let o of found) {**
** if(!o.object.userData.ground)**
** continue**
** draggable.position.x = o.point.x**
** draggable.position.z = o.point.z**
** }**
** }**
** }**
**}**
**function light() {**
** scene.add(new THREE.AmbientLight(0xffffff, 1))**
** const dirLight = new THREE.DirectionalLight(0xffffff, 1)**
** dirLight.position.set(- 60, 100, - 10);**
** dirLight.castShadow = true;**
** dirLight.shadow.camera.top = 50;**
** dirLight.shadow.camera.bottom = - 50;**
** dirLight.shadow.camera.left = - 50;**
** dirLight.shadow.camera.right = 50;**
** dirLight.shadow.camera.near = 0.1;**
** dirLight.shadow.camera.far = 200;**
** dirLight.shadow.mapSize.width = 4096;**
** dirLight.shadow.mapSize.height = 4096;**
** scene.add(dirLight);**
** // scene.add( new THREE.CameraHelper(dirLight.shadow.camera))**
**}**
**function startRenderLoop() {**
** throw new Error('Function not implemented.');**
**}**
