0

我正在用physijs（VS代码）制作Three.js打破眼镜游戏它是场景的基本代码，只需加载立方体和地面但是，当我在VS代码中使用GO-LIve运行服务器时，会发生以下错误：

错误1

错误2

我试过了，但我不知道如何解决它们。请帮帮我；（这是HTML和JS代码的完整代码

   <!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>COMP392: Assignment 2 - Breaking Glasses</title>
    <script src="./libs/three.min.js"></script>
    <script src="./libs/dat.gui.min.js"></script>
    <script src="./libs/OrbitControls.js"></script>
    <script src="./libs/physi.js"></script>
    <script src="./libs/physijs_worker.js"></script>
    <script src="seoyoung.js"></script>
</head>
<body>
</body>
</html>

Physijs.scripts.worker= './libs/physijs_worker';
Physijs.scripts.ammo = './libs/ammo.js';

let renderer, scene, camera;
let controls, light, contents;

let cube1, cube2, cube3;
let obj1, obj2, obj3;

const clock = new THREE.Clock();

function init(){
    scene = new Physijs.Scene;
    scene.setGravity(new THREE.Vector3(0,-50,0));
    scene.background = new THREE.Color(0xbfd1e5);
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setClearColor(0x337733);
    renderer.shadowMap.enabled = true;
    renderer.setSize( window.ineerWidth, window.ineerHeight);
    renderer.setPixelRatio( window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);
}

function setupCameraAndLight(){
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(-14,8,16);
    camera.lookAt(scene.position);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.target.set(0,2,0);
    controls.update();

    scene.add(new THREE.AmbientLight({color: 0x707070}));

    const light = new THREE.DirectionalLight(0xffffff,1);
    light.position.set(-10,18,5);
    light.castShadow = true;
    const d = 14;
    light.shadow.camera.left = -d;
    light.shadow.camera.right = d;
    light.shadow.camera.top = d;
    light.shadow.camera.bottom = -d;

    light.shadow.camera.near = 2;
    light.shadow.camera.far = 50;
    light.shadow.mapSize.x = 1024;
    light.shadow.mapSize.y = 1024;
    
    scene.add(light);

}


function createGeometry(){
    scene.add( new THREE.AxesHelper(20));

    let ground_material = Physijs.createMaterial(
        new THREE.MeshStandardMaterial(
            {color: 0x555555, map: new THREE.TextureLoader().load('assets/floor.jpg')}
        ),
        .2,.7);

    let ground = new Physijs.BoxMesh(new THREE.BoxBufferGeometry(60,1,40), ground_material, 0);
    ground.castShadow = true;
    ground.receiveShadow = true;
    scene.add(ground);

    //ground.addEventListener('collision',function(other_obj, rel_vel, rel_rot){
    //    console.log(`${this.id} ::: ${other.obj.name} ::: ${rel_vel.y} ::: ${rel_rot.x}`);
    //    obj1 = other_obj; obj2 = rel_vel; obj3 = rel_rot;
    //});
  
}

function createCubes(){
    cube1 = new Physijs.BoxMesh(
        new THREE.BoxBufferGeometry(3,3,3),
        Physijs.createMaterial(
            new THREE.MeshLamberMaterial(
                {transparent: true, opacity: 0.8, color: 0xee7788}
            ), 0.5, 0.95), 5);
    cube1.castShadow = true;
    cube1.receiveShadow = true;
    cube1.position.set(1,4,1);
    cube1.name = 'red';
    scene.add(cube1);

    cube2 = new Physijs.BoxMesh(
        new THREE.BoxBufferGeometry(3,3,3),
        Physijs.createMaterial(
            new THREE.MeshLamberMaterial(
                {transparent: true, opacity: 0.8, color: 0xee7788}
            ), 0.5, 0.95), 5);
    cube2.castShadow = true;
    cube2.receiveShadow = true;
    cube2.position.set(10,4,10);
    cube2.name = 'blue';
    scene.add(cube2);

    cube3 = new Physijs.BoxMesh(
        new THREE.BoxBufferGeometry(3,3,3),
        Physijs.createMaterial(
            new THREE.MeshLamberMaterial(
                {transparent: true, opacity: 0.8, color: 0xee7788}
            ), 0.5, 0.95), 5);
    cube3.castShadow = true;
    cube3.receiveShadow = true;
    cube3.position.set(3.0,11,3.0);
    cube3.name = 'green';
    scene.add(cube3);
}

function render(){
    requestAnimationFrame(render);
    controls.update();
    renderer.render(scene, camera);
    scene.simulate(undefined, 1);
}

window.onload = function(){
    init();
    setupCameraAndLight();
    createGeometry();
    render();
}

4

0 回答 0