Question

我想用汽车创建一个场景，你也应该能够使用three.js用鼠标在场景中移动。

我尝试了一些编码，一切正常，但后来我想添加OrbitControl，现在我再也看不到整个场景了。那里有什么问题？

<!DOCTYPE html>

场景

<script src="js/THREE.js"></script>
<script src="js/controls/OrbitControls.js"></script>


<script>

var width = 1300;
var height = 500;

init();

function animate() {
requestAnimationFrame(animate);
controls.update();

function init(){
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(width,height);

    var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);

    camera.position.x = 5;
    camera.position.y = 2;
    camera.position.z = 5.3;

    var controls = new THREE.OrbitControls( camera );
    controls.damping = 0.2;
    controls.addEventListener( 'change', render );

    document.body.appendChild(renderer.domElement);

    var scene = new THREE.Scene();

    var car = new THREE.Object3D();
    var body = new THREE.Object3D();
    var wheels = new THREE.Object3D();
    var ground = new THREE.Object3D();


            var cube = new THREE.Mesh(new THREE.CubeGeometry(2,1,5),
                                    new THREE.MeshLambertMaterial({color:0x856363}));


            var cube1 = new THREE.Mesh(new THREE.CubeGeometry(1.8,1,3),
                                    new THREE.MeshLambertMaterial({color:0x856363}));
            cube1.position.y = 0.8;

    body.add(cube);
    body.add(cube1);
    body.position.z = -1.5;


    car.add(body);
    car.add(wheels);

    car.rotation.y = Math.PI/6;
    car.position.y += 1;

    car.position.x += 3;
    car.position.z -= 3;


            var wheel1 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                    new THREE.MeshLambertMaterial({color:0x800000}));
            var wheel2 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                    new THREE.MeshLambertMaterial({color:0x800000}));
            var wheel3 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                    new THREE.MeshLambertMaterial({color:0x800000}));
            var wheel4 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                    new THREE.MeshLambertMaterial({color:0x800000}));


            wheel1.rotation.z = Math.PI/2;
            wheel2.rotation.z = Math.PI/2;
            wheel3.rotation.z = Math.PI/2;
            wheel4.rotation.z = Math.PI/2;

            wheel1.position.x = -1.2;
            wheel1.position.y = 0;
            wheel1.position.z = 0;

            wheel2.position.x = 1.2;
            wheel2.position.y = 0;
            wheel2.position.z = 0;

            wheel3.position.x = -1.2;
            wheel3.position.y = 0;
            wheel3.position.z = -2.5;

            wheel4.position.x = 1.2;
            wheel4.position.y = 0;
            wheel4.position.z = -2.5;

    wheels.add(wheel1);
    wheels.add(wheel2);
    wheels.add(wheel3);
    wheels.add(wheel4);         


            var plane;
            var planeGeo = new THREE.PlaneGeometry(30,30,100,100);  

            var texture = THREE.ImageUtils.loadTexture('grass.jpg',{},function(){renderer.render(scene,camera)});
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;

            var planeMat = new THREE.MeshLambertMaterial({
                        map: texture,
                        });


            plane = new THREE.Mesh(planeGeo,planeMat);

    ground.add(plane);
    ground.position.z = - 7.5;
    ground.position.x =  5;

    scene.add(car);
    scene.add(ground);

    var light = new THREE.SpotLight(); 
    light.position.set(170,300,-160); 
    scene.add(light);

    var directionalLight = new THREE.DirectionalLight (0xffffff, 0.5);
    directionalLight.position.set(0,0,1);
    scene.add(directionalLight);

    var directionalLight1 = new THREE.DirectionalLight (0xffffff, 0.2);
    directionalLight1.position.set(0,1,0);
    scene.add(directionalLight1);       


    renderer.render(scene, cam);
}   



</script>

three.js的问题

0 个答案: