0

私は webGL と three.js が初めてで、JSFiddle から例を選んだところです。

http://jsfiddle.net/BlackSRC/XWCRM/1/

しかし、テストすると、何も得られません。コードは次のようになります。

<!DOCTYPE html>
<html>


<head>
    <title>ThreeJS</title>

</head>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/mrdoob-three.js-2524525/build/three.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

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

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

<body onload="onLoadComplete();">

何か不足していますか？助けてくれてありがとう！

4

2 に答える 2

0

コードに問題はありませんが、ローカルの js ファイルを使用しています。そのため、body dom render の前に js コードが実行されるようにするため、呼び出されるとdocument.body.appendChild(renderer.domElement);エラーが発生します。

test.html:45 Uncaught TypeError: null のプロパティ 'appendChild' を読み取れません(…)

空白のページが表示されます。しかし、ローカルに保存されていないリモートjsファイルでテストすると、うまく機能します。したがって、この問題を回避するには、dom の後に js をロードします。

以下はコードです。js コードの前に本文を追加し、オンライン js ファイルを使用します。ここでは、js がリモートから読み込まれるため、js コードの後に​​ body を配置することもできます。js が実行されると、body は既にレンダリングされています。

 <!DOCTYPE html>
<html>
<head>
    <title>ThreeJS</title>

<body onload="onLoadComplete();">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

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

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

</html>

于 2016-11-25T05:26:11.220 に答える
0

[検査] をクリックして、モデルのパスの読み込みに関連するエラーやコンストラクタ エラーがないかどうかを確認します。

  • これを geometry = CubeGeometry(...) に変更したい場合があります。
  • また、3 つの js モデルは動的であるため、ライブ サーバーを使用して 3 つの js モデルをロードします。
于 2021-08-18T19:53:08.087 に答える