0

threejs を始めたばかりで、threejs の 'Hello World' を作成しています。これは基本的に形状を作成するだけです。c9.io を使用してすべてのコードを記述していますが、これがエラーの原因であるかどうかはわかりません。すべてのコードを作成しましたが、何らかの理由で実行されません。必要なスニペットを次に示します。

<html>
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;   
        }
        canvas {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <script src="node_modules/three/three.min.js"></script>
        <script src="scene1.js"></script>
    </body>
</html>

Web サイトを実行するための HTML (スクリプトを適切に参照していますか?)

import THREE from 'node_modules/three';

var scene = new THREE.Scene();
var fov = 45;
var aspect = window.innerWidth / window.innerHeight;
var near = 0.1;
var far = 10000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x666420});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function()
{
    requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
}
render();

JavaScript コード

これが左側の私の階層です

4

1 に答える 1