我正在尝试学习三，到目前为止一切进展顺利。我正在努力创建一个简单的项目，在高尔夫球座上建造一个高尔夫球。最终，我会将它放在一个天空盒中，并使用一些着色器来创建球中凹痕的外观。
现在我已经能够创建球和发球台并设置相机和灯光。我现在正在尝试添加一些轨道控件，以便我可以在场景周围旋转、平移和缩放。我添加了orbitControls 脚本并设置了我在在线示例中看到的方式。但是，当我尝试绕轨道运行时，我的相机会捕捉到 1,0,0 0,1,0 或 0,0,1，最终场景完全失败，我最终沿着 0,0 看，没有任何物体可见。
这是我的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>3D Sandbox</title>
<style>
html, body {
margin: 0px;
}
canvas {
background-color: #999;
position: absolute;
height: 100vh;
width: 100vw;
overflow: hidden;
}
</style>
</head>
<body>
<script src='/three.js'></script>
<script src="/orbitControls.js"></script>
<script type='text/javascript'>
let scene,
camera,
controls,
renderer,
height = window.innerHeight,
width = window.innerWidth;
window.addEventListener('load', init, false);
function init () {
createScene();
createCamera();
createLights();
createBall();
createTee();
render();
animate();
}
function createScene () {
let grid;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
grid = new THREE.GridHelper(100, 5);
scene.add(grid);
}
function createCamera () {
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.z = 50;
camera.position.y = 13;
camera.up = new THREE.Vector3(0,1,0);
//camera.lookAt(new THREE.Vector3(0,13,0));
controls = new THREE.OrbitControls(camera);
controls.target = new THREE.Vector3(0, 13, 0);
controls.addEventListener('change', render);
}
function createLights () {
let directionalLight, ambientLight;
directionalLight = new THREE.DirectionalLight(0x404040, 4);
directionalLight.position.set(0, 2000, 2000);
directionalLight.target.position.set(0, 2, 0);
scene.add(directionalLight);
ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);
}
function createBall () {
let ballGeom, ballMaterial, ball;
ballGeom = new THREE.SphereGeometry(5, 32, 32);
ballMaterial = new THREE.MeshPhongMaterial({
color: 0xFFFFFF
});
ball = new THREE.Mesh(ballGeom, ballMaterial);
ball.position.y = 13.3;
scene.add(ball);
}
function createTee () {
let tee, stemGeom, stem, bevelGeom, bevel, topGeom, top, teeMat;
tee = new THREE.Object3D();
teeMat = new THREE.MeshPhongMaterial({
color: 0x0000FF
});
stemGeom = new THREE.CylinderGeometry(.9, 0.75, 7);
stem = new THREE.Mesh(stemGeom, teeMat);
tee.add(stem);
bevelGeom = new THREE.CylinderGeometry(1.5, .9, 2);
bevel = new THREE.Mesh(bevelGeom, teeMat);
bevel.position.y = 3.75;
tee.add(bevel);
topGeom = new THREE.CylinderGeometry(1.5, 1.5, .25);
top = new THREE.Mesh(topGeom, teeMat);
top.position.y = 4.875;
tee.add(top);
tee.position.y = 3.5;
scene.add(tee);
}
function render () {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
</script>
</body>
</html>
The*_*Pea 12
就我而言，相机position与 相同OrbitControl target，这使我的 OrbitControl 看起来“损坏”（与 OP 不同的症状 - 我的OrbitControl 根本无法工作。）
正如此github 评论中提到的，相机位置和OrbitControl目标不能相同；我重新定位了相机来解决这个问题 ( camera.position.z = 10)。
请记住，相机（与任何相机一样Object3D）默认位于(0,0,0)，并且OrbitControl target属性 (a Vector3D) 似乎也默认位于同一点(0,0,0)
小智 8
controls = new THREE.OrbitControls(camera);
需要是
controls = new THREE.OrbitControls(camera, renderer.domElement);
结果就在这个块上。