Hey,guys!I’m here again.
Recently, I’ve been looking for ways to keep the controller behind model. Regardless of rotation or translation.The following picture is just a model move without controller.I’m just learning and looking for advice 
1 Like
Sorry but it’s not really clear what you are looking for. In general, it’s more efficient to share a live example that shows your current work of progress instead of sharing screenshots of code. This makes it easier to debug and update the example with a possible solution. Consider to use a website like jsfiddle to make your demo: https://jsfiddle.net/f2Lommf5/. And please also describe in more detail your expected behavior.
Emmm…,jsfiddle can’t be opened here.all my code is that:
<body >
<div id="index" ></div>
<script type="module">
import * as THREE from '../build/three.module.js'
import {OrbitControls} from './jsm/controls/OrbitControls.js'
import {GLTFLoader} from './jsm/loaders/GLTFLoader.js'
let buildFlag=true,model,GLTFObject, moveforward=false,moveback=false, moveleft=false,moveright=false;
let direction=new THREE.Vector3(), velocity=new THREE.Vector3(),prevTime=performance.now(),vec=new THREE.Vector3()
let scene,renderer,camera,orbitcontrol,light,amlight;
let screenWidth=window.innerWidth,
screenHeight=window.innerHeight;
mounted()
function initParam(){
scene=new THREE.Scene()
renderer=new THREE.WebGLRenderer()//{canvas:demo}
renderer.setSize( screenWidth, screenHeight)
renderer.setClearColor(0xffffff)
document.getElementById('index').appendChild( renderer.domElement)
camera=new THREE.PerspectiveCamera(45, screenWidth/ screenHeight,0.1,1000)
camera.position.set(0, 6,20)
camera.up.set(0,1,0)
orbitcontrol=new OrbitControls(camera,renderer.domElement)
orbitcontrol.enableZoom=false
orbitcontrol.maxPolarAngle=Math.PI/2
orbitcontrol.minPolarAngle=Math.PI/2
window.addEventListener('keydown',keyDownOperation,false)
window.addEventListener('keyup',keyUpOperation,false)
light=new THREE.DirectionalLight(0xffffff,1,100)
light.position.set(0,200,-500)
light.castShadow=true
amlight=new THREE.AmbientLight(0xffffff)
scene.add(amlight)
createAxis(new THREE.Vector3( 1, 0, 0 ),new THREE.Vector3( 0, 0, 0 ),10,0xff0000)
createAxis(new THREE.Vector3( 0, 1, 0 ),new THREE.Vector3( 0, 0, 0 ),10,0x00ff00)
createAxis(new THREE.Vector3( 0, 0, 1 ),new THREE.Vector3( 0, 0, 0 ),10,0x0000ff)
}
function createAxis(dir,origin,length,hex){
dir.normalize();
let arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );
}
function keyDownOperation(e){
switch(e.code){
case 'KeyQ':
;break;
case 'KeyW':
moveforward=true
;break;
case 'KeyA':
moveleft=true
;break;
case 'KeyS':
moveback=true
;break;
case 'KeyD':
moveright=true
;break;
default:break;
}
}
function keyUpOperation(e){
switch(e.code){
case 'KeyQ':
;break;
case 'KeyW':
moveforward=false
;break;
case 'KeyA':
moveleft=false
;break;
case 'KeyS':
moveback=false
;break;
case 'KeyD':
moveright=false
;break;
default:break;
}
}
function initModel(){
let gridHelper = new THREE.GridHelper( 100, 100 );
scene.add( gridHelper );
GLTFObject=new GLTFLoader()
GLTFObject.load(`${buildFlag?'../../static/model/RobotExpressive.glb':'static/model/RobotExpressive.glb'}`, (gltf)=> {
model=gltf.scene
model.position.set(0,0,10)
model.rotation.y=Math.PI
scene.add(model)
})
}
function moveForward ( distance ) {
vec.setFromMatrixColumn( model.children[0].matrix, 0 );
vec.crossVectors( model.children[0].up, vec );
model.children[0].position.addScaledVector( vec, distance );
orbit_moveForward(-distance)
}
function moveRight( distance ) {
vec.setFromMatrixColumn( model.children[0].matrix, 0 );
model.children[0].position.addScaledVector( vec, distance );
orbit_moveRight(-distance)
}
function orbit_moveForward ( distance ) {
vec.setFromMatrixColumn( orbitcontrol.object.matrix, 0 );
vec.crossVectors( orbitcontrol.object.up, vec );
orbitcontrol.object.position.addScaledVector( vec, distance );
}
function orbit_moveRight( distance ) {
vec.setFromMatrixColumn( orbitcontrol.object.matrix, 0 );
orbitcontrol.object.position.addScaledVector( vec, distance );
}
function animations(){
requestAnimationFrame(animations)
if(model){
model.children[0].rotation.copy(orbitcontrol.object.rotation)
let time=performance.now()
let delta = ( time - prevTime ) / 1000;
orbitcontrol.target=new THREE.Vector3(model.position.x,model.position.y+4,model.position.z)
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(moveforward) - Number(moveback);
direction.x = Number(moveright) - Number(moveleft);
direction.normalize();
if (moveforward || moveback)
velocity.z -= direction.z * 200.0 * delta;
if (moveleft || moveright)
velocity.x -= direction.x * 200.0 * delta;
moveForward(velocity.z * delta);
moveRight(velocity.x * delta);
prevTime=time;
}
renderer.render(scene,camera)
}
function mounted(){
initParam()
initModel()
animations()
}
</script>
</body>
When I move, then rotate the OrbitControls, the position of the model changes strangely, it not according to my target。Debugged, but I still don’t know what went wrong. 
It is working.Details determine success or failure 
moveForward ( distance ) { vec.setFromMatrixColumn( model.children[0].matrix, 0 ); vec.crossVectors( model.children[0].up, vec ); model.position.addScaledVector( vec, -distance ); orbit_moveForward(-distance) }, moveRight( distance ) { vec.setFromMatrixColumn( model.children[0].matrix, 0 ); model.position.addScaledVector( vec, -distance ); orbit_moveRight(-distance) },