我的对象和照明存在小问题。当我旋转我的物体时，光线与我的物体一起移动。我希望光线是静态的。光线是否因为我将场景添加到渲染器而移动？我不知道如何将我的对象添加到渲染器，所以我尝试将场景添加到渲染器。这是导致问题的原因吗？
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>THEE JS BOX APP</title>
<style>
body {
margin: 0;
width: 100%;
height: 100%;
font-size: 0;
overflow: hidden;
display: flex;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJloader.js"></script>
<script>
$(document).ready(function() {
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 150;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#000000");
//************** SETTING SIZE FOR RENDERER *******************//
renderer.setSize( window.innerWidth ,window.innerHeight );
//renderer.setSize( 550, 297);
//************** END-OF-SETTING SIZE FOR RENDERER *******************//
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// instantiate a loader
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
// ***************************** LIGHTING **********************************//
var ambientlight = new THREE.AmbientLight( 0xa6a6a6, 0.25 );
scene.add( ambientlight );
var dirlight = new THREE.DirectionalLight( 0xfffff, 0.8, 500 );
dirlight.target = scene;
scene.add(dirlight);
scene.add(dirlight.target);
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 0, 100, 50 );
scene.add( pointLight );
var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );
// ************************ END-OF-LIGHTING *****************************//
// CREATING A BOX
//var geometry = new THREE.BoxGeometry(1, 1, 1);
//var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
//var cube = new THREE.Mesh( geometry, material);
// ADD CUBE TO THE SCENE
//scene.add(cube);
// ANIMATION LOOP
function animate() {
requestAnimationFrame( animate );
//scene.rotation.x += 0.01;
scene.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
});
</script>
</body>
</html>
最佳答案
注意:您旋转的是场景(包含光点)，而不是物体。 您所要做的就是旋转对象，您将获得预期的结果。
编辑:
// instantiate a loader
var loader = new THREE.OBJLoader();
var myObj;
// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
myObj = object
// code;
},
//code
);
// ***************************** LIGHTING**********************************//
// code
function animate() {
requestAnimationFrame( animate );
myObj.rotation.y += 0.01;
renderer.render( scene, camera );
}关于three.js - 在 three.js 中旋转对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54671935/