Dom 简单的Three.js安装程序不显示任何内容_Dom_Three.js

Dom 简单的Three.js安装程序不显示任何内容

dom three.js

Dom 简单的Three.js安装程序不显示任何内容,dom,three.js,Dom,Three.js,这是我所有的代码，我从我通过Thread安装的node_modules目录中获得了所有三个.js源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

这是我所有的代码，我从我通过Thread安装的node_modules目录中获得了所有三个.js源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello World</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<script src="node_modules/three/build/three.js"></script>
    
<body>
</body>

<script>
    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
    camera.position.z = 10;

    let renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor("#CCC");
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
    })


    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
    let mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    let light = new THREE.PointLight(0xffffff, 1, 500);
    light.position.set(10,0,25);

    renderer.render(scene, camera);

    console.log("compiled")
</script>

</html>


你好，世界
让场景=新的三个。场景（）；
让摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHight，0.11000）；
摄像机位置z=10；
让renderer=new THREE.WebGLRenderer（{antialas:true}）；
渲染器.setClearColor（“CCC”）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
window.addEventListener（'resize'，（）=>{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
})
让geometry=new-THREE.BoxGeometry（1,1,1）；
let material=new THREE.MeshLambertMaterial（{color:0xFFCC00}）；
设网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
让灯光=新的三点灯光（0xffffff，1500）；
光。位置。设置（10,0,25）；
渲染器。渲染（场景、摄影机）；
console.log（“已编译”）

我没有收到任何错误，并且没有显示boxGeometry。我确实看到了为渲染视图设置的浅灰色画布。我尝试过的任何操作都不起作用

我通过Chrome在MacOs 11.0.1上运行此程序，您的代码中有一个输入错误

innerHight

应为

innerHeight

。此外，有必要将点光源添加到场景中

const scene=new THREE.scene（）；
const-camera=新的三视角摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=10；
const renderer=new THREE.WebGLRenderer({
反别名：对
});
渲染器.setClearColor（“CCC”）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
const geometry=新的3.BoxGeometry（1,1,1）；
const material=新的三点材质({
颜色：0xFFCC00
});
常量网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
恒光=新的三点光（0xffffff，1500）；
光。位置。设置（10，0，25）；
场景。添加（灯光）；
渲染器。渲染（场景、摄影机）
正文{
保证金：0；
}