Блог

Главная - Вопросы по программированию - Просто Three.js настройка ничего не отображает

Просто Three.js настройка ничего не отображает

#dom #three.js

#dom #three.js

Вопрос:

это весь мой код, я получаю все three.js источник из моего каталога node_modules, который я установил через yarn

 <!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>

Я не получаю ошибок, и BoxGeometry не отображается, я вижу светло-серый холст, который я установил для представления рендеринга, ничего из того, что я пробовал, не работает

Я запускаю это на macOS 11.0.1 через Chrome

Ответ №1:

В вашем коде есть опечатка. innerHieght должно быть innerHeight . Кроме того, необходимо добавить точечный свет в вашу сцену.

 const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor("#CCC");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

renderer.render(scene, camera); 
 body {
      margin: 0;
} 
 <script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>